:root {
  color-scheme: light;
  --ui-page: #e6e0d8;
  --ui-shell: #f1ebe4;
  --ui-panel: #f8f4ee;
  --ui-panelStrong: #ece3d8;
  --ui-text: #1c1815;
  --ui-textSoft: #675f58;
  --ui-accent: #a78254;
  --ui-accentStrong: #856641;
  --ui-accentSoft: #e3d3bc;
  --ui-border: #cec2b3;
  --ui-warningBg: #efe5d8;
  --ui-warningText: #694f31;
  --ui-shell-shadow: 0 18px 42px rgba(24, 18, 14, 0.11);
  --shell: #f5f0e8;
  --page: #f5f0e8;
  --panel: #fbf8f3;
  --panelStrong: #eee4d7;
  --canvas: #fcfaf7;
  --text: #2f241d;
  --textSoft: #73685e;
  --accent: #a78254;
  --accentStrong: #856641;
  --accentSoft: #e6d7c4;
  --border: #d8cdc0;
  --shadow: rgba(22, 16, 12, 0.08);
  --block: rgba(251, 248, 243, 0.94);
  --radius-frame: 4px;
  --radius-inner: 3px;
  --shadow-soft: 0 10px 24px rgba(24, 18, 14, 0.06);
  --shadow-press: 0 14px 28px rgba(133, 102, 65, 0.18);
  --highlight: rgba(191, 219, 254, 0.32);
  --ruler: rgba(59, 130, 246, 0.1);
  --syllabe1: #3b82f6;
  --syllabe2: #4f8aa8;
  --muet: #9aa7b7;
  --important: rgba(191, 219, 254, 0.48);
  --dl-ui-bg: #e6e0d8;
  --dl-ui-accent: #a78254;
  --dl-ui-text: #1c1815;
  --dl-ui-border: #cec2b3;
  --dl-bg-color: #fcfbf8;
  --dl-text-color: #3b3530;
  --dl-font-family: "Verdana", "Geneva", sans-serif;
  --dl-font-size: 21px;
  --dl-line-height: 1.8;
  --dl-letter-spacing: 0.12em;
  --dl-word-spacing: 0.16em;
  --dl-reading-width: 68ch;
  --dl-padding: 34px;
  --dl-overlay-color: transparent;
  --dl-overlay-opacity: 0;
  --dl-guide-color: #a0344a;
  --dl-guide-opacity: 0.16;
  --dl-guide-top: 0px;
  --dl-guide-height: 40px;
  --dl-guide-bottom: 0px;
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html,
body {
  margin: 0;
  min-height: 100%;
  background: var(--ui-page);
  color: var(--ui-text);
  font-family: "Manrope", "Segoe UI Variable", "Aptos", "Segoe UI", sans-serif;
}

body {
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 26px;
  background:
    radial-gradient(circle at top, rgba(255, 255, 255, 0.64), transparent 42%),
    linear-gradient(180deg, #ede7de 0%, var(--ui-page) 100%);
}

.startup-splash {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  padding: 32px;
  background:
    radial-gradient(circle at center, rgba(255, 252, 248, 0.99) 0%, rgba(244, 238, 229, 0.975) 52%, rgba(232, 224, 213, 0.96) 100%);
  opacity: 1;
  visibility: visible;
  transition: opacity 1800ms cubic-bezier(0.22, 1, 0.36, 1), visibility 1800ms cubic-bezier(0.22, 1, 0.36, 1);
}

.startup-splash.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.startup-splash__surface {
  width: min(1280px, 92vw);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translateY(16px) scale(0.975);
  animation: startup-splash-reveal 2400ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.startup-splash__image {
  width: min(1200px, 90vw);
  height: auto;
  display: block;
  filter: drop-shadow(0 28px 60px rgba(26, 20, 16, 0.08));
}

@keyframes startup-splash-reveal {
  from {
    opacity: 0;
    transform: translateY(16px) scale(0.975);
  }

  55% {
    opacity: 0.88;
    transform: translateY(4px) scale(0.994);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

button,
input,
select {
  font: inherit;
}

button {
  cursor: pointer;
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
[tabindex]:focus-visible,
.profile-card:focus-visible,
.reader-block:focus-visible {
  outline: 2px solid var(--dl-ui-accent);
  outline-offset: 3px;
}

.print-only {
  display: none;
}

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

.app-shell {
  display: grid;
  grid-template-columns: 372px minmax(0, 1fr);
  gap: 26px;
  width: min(1540px, 100%);
  height: calc(100vh - 56px);
  padding: 26px 28px 28px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0)),
    var(--ui-shell);
  border: 1px solid var(--ui-border);
  box-shadow: var(--ui-shell-shadow);
}

.sidebar,
.main-stage {
  min-height: 0;
}

.sidebar {
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow-y: auto;
  overflow-x: visible;
  padding-right: 6px;
  padding-bottom: 18px;
}

.sidebar-hero,
.panel,
.stage-topbar,
.warning-banner,
.empty-card,
.reader-stage-card,
.reader-page,
.stage-footer,
.reader-empty-message {
  border: 1px solid var(--border);
  border-radius: var(--radius-frame);
  background: var(--panel);
  box-shadow: var(--shadow-soft);
}

.sidebar-hero,
.panel,
.stage-topbar,
.empty-card,
.reader-stage-card,
.stage-footer,
.reader-empty-message {
  position: relative;
  overflow: visible;
}

.sidebar-hero,
.panel,
.stage-topbar,
.empty-card,
.stage-footer,
.reader-empty-message,
.warning-banner {
  border-color: var(--ui-border);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0)),
    var(--ui-panel);
}

.sidebar-hero {
  padding: 24px;
}

.brand-block h1,
.empty-card h3,
.reader-empty-message h3 {
  margin: 0;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 0.96;
}

.brand-block h1 {
  font-size: clamp(2rem, 3vw, 2.8rem);
}

.brand-logo {
  width: min(100%, 320px);
  height: auto;
  display: block;
  object-fit: contain;
}

.brand-block {
  display: flex;
  justify-content: center;
  padding-bottom: 12px;
  border-bottom: 1px solid color-mix(in srgb, var(--ui-border) 84%, transparent);
}

.eyebrow {
  margin: 0 0 8px;
  color: var(--ui-accent);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.support-copy,
.topbar-meta,
.muted-inline,
.reader-stage-caption {
  color: var(--ui-textSoft);
}

.support-copy,
.topbar-meta,
.reader-stage-caption {
  line-height: 1.6;
}

.support-copy {
  font-size: 0.95rem;
}

.help-intro {
  margin-top: -4px;
}

.copyright-note {
  display: none;
}

.app-copyright {
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 18px 20px 8px;
  border-top: 1px solid color-mix(in srgb, var(--ui-border) 80%, transparent);
  color: var(--ui-textSoft);
  font-size: 0.84rem;
  letter-spacing: 0.04em;
  text-align: center;
}

.app-copyright p {
  margin: 0;
}

.support-footer-action {
  min-width: min(280px, 100%);
  margin-top: 6px;
}

body.is-distraction-free .app-copyright {
  display: none;
}

.info-pills {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 18px;
}

.info-pill {
  display: grid;
  gap: 6px;
  min-width: 0;
  padding: 13px 14px;
  border-radius: var(--radius-frame);
  background: color-mix(in srgb, var(--ui-panel) 91%, white 9%);
  border: 1px solid color-mix(in srgb, var(--ui-border) 88%, transparent);
}

.info-pill:last-child {
  grid-column: 1 / -1;
}

.info-pill span {
  color: var(--ui-textSoft);
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.info-pill strong {
  min-width: 0;
  font-size: 0.94rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: auto;
}

.sidebar-primary-actions {
  display: grid;
  gap: 10px;
  margin-top: 18px;
}

.primary-action,
.ghost-action,
.tab-button,
.quick-action {
  min-height: 46px;
  padding: 11px 18px;
  border-radius: var(--radius-frame);
  border: 1px solid color-mix(in srgb, var(--ui-border) 86%, transparent);
  transition:
    transform 120ms ease,
    box-shadow 120ms ease,
    background 120ms ease,
    border-color 120ms ease,
    color 120ms ease;
}

.primary-action {
  background: var(--ui-accent);
  color: #171311;
  box-shadow: var(--shadow-press);
}

.primary-action:hover,
.ghost-action:hover,
.quick-action:hover,
.tab-button:hover,
.profile-card:hover {
  transform: translateY(-1px);
}

.ghost-action,
.tab-button,
.quick-action {
  background: color-mix(in srgb, var(--ui-panelStrong) 46%, white 54%);
  color: var(--ui-text);
  border-color: color-mix(in srgb, var(--ui-border) 84%, transparent);
}

.ghost-action.subtle,
.tab-button {
  min-height: 42px;
  padding-inline: 16px;
}

.ghost-action.danger {
  color: #b53e3e;
  border-color: rgba(181, 62, 62, 0.14);
  background: rgba(181, 62, 62, 0.05);
}

.quick-action--primary {
  background: color-mix(in srgb, var(--ui-accentSoft) 58%, white 42%);
  color: var(--ui-accentStrong);
}

.wide {
  width: 100%;
  justify-content: center;
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
  transform: none;
  box-shadow: none;
}

.panel {
  padding: 22px;
}

.panel > * {
  min-width: 0;
}

.panel-collapsible.is-collapsed > :not(.section-head) {
  display: none !important;
}

.panel-toggle {
  min-width: 88px;
  justify-content: center;
}

.section-head,
.profile-card-head,
.topbar-actions,
.stage-footer,
.action-inline,
.reader-stage-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.section-head {
  margin-bottom: 16px;
  flex-wrap: nowrap;
  align-items: flex-start;
}

.section-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-left: auto;
  flex-wrap: nowrap;
}

.section-actions > * {
  width: auto;
  min-width: 0;
}

.audio-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  width: 100%;
  min-width: 0;
  margin-bottom: 14px;
}

.audio-actions > * {
  width: auto;
  min-width: 0;
  white-space: normal;
  text-align: center;
  line-height: 1.3;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.audio-actions .ghost-action.subtle {
  min-height: 54px;
  padding-inline: 12px;
}

.section-head.compact {
  margin-top: 16px;
}

.section-head h2,
.section-head h3 {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.55rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.02;
}

.quick-actions-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  align-items: stretch;
}

.quick-actions-grid > * {
  width: 100%;
}

.start-assistant-panel {
  display: grid;
  gap: 14px;
}

.assistant-grid {
  display: grid;
  gap: 10px;
}

.assistant-need {
  display: grid;
  gap: 6px;
  min-height: 88px;
  padding: 15px 16px;
  text-align: left;
}

.assistant-need strong {
  color: var(--ui-text);
  font-size: 0.98rem;
}

.assistant-need span {
  color: var(--ui-textSoft);
  font-size: 0.9rem;
  line-height: 1.5;
}

.assistant-summary {
  margin: 0;
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--ui-border) 84%, transparent);
  border-radius: var(--radius-inner);
  background: color-mix(in srgb, var(--ui-panelStrong) 36%, white 64%);
}

.quick-action.is-active,
.ghost-action.is-active {
  background: color-mix(in srgb, var(--ui-accentSoft) 68%, white 32%);
  border-color: color-mix(in srgb, var(--ui-accent) 22%, transparent);
  color: var(--ui-accentStrong);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ui-accent) 10%, transparent);
}

.profiles-grid {
  display: grid;
  gap: 10px;
}

.panel-subgroup,
.profiles-advanced {
  margin-top: 12px;
  padding: 14px 16px 16px;
  border: 1px solid color-mix(in srgb, var(--ui-border) 82%, transparent);
  border-radius: var(--radius-frame);
  background: color-mix(in srgb, var(--ui-panel) 84%, white 16%);
}

.panel-subgroup summary,
.profiles-advanced summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--ui-text);
  list-style: none;
}

.panel-subgroup summary::-webkit-details-marker,
.profiles-advanced summary::-webkit-details-marker {
  display: none;
}

.panel-subgroup summary::after,
.profiles-advanced summary::after {
  content: "▾";
  float: right;
  color: var(--ui-accentStrong);
  font-size: 0.84rem;
  transition: transform 180ms ease;
}

.panel-subgroup:not([open]) summary::after,
.profiles-advanced:not([open]) summary::after {
  transform: rotate(-90deg);
}

.panel-subgroup[open] summary,
.profiles-advanced[open] summary {
  margin-bottom: 10px;
}

.profile-card {
  width: 100%;
  padding: 16px 17px;
  text-align: left;
  color: var(--ui-text);
  border: 1px solid color-mix(in srgb, var(--ui-border) 84%, transparent);
  border-radius: var(--radius-frame);
  background: color-mix(in srgb, var(--ui-panelStrong) 58%, var(--ui-panel) 42%);
}

.profile-card-head strong {
  font-size: 0.98rem;
}

.profile-card span {
  display: block;
  margin-top: 8px;
  color: var(--ui-textSoft);
  line-height: 1.5;
}

.profile-card.is-active {
  border-color: color-mix(in srgb, var(--ui-accent) 18%, transparent);
  background: color-mix(in srgb, var(--ui-accentSoft) 28%, var(--ui-panel) 72%);
  box-shadow:
    inset 2px 0 0 var(--ui-accent),
    0 10px 22px color-mix(in srgb, var(--ui-accent) 7%, transparent);
}

.profile-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: var(--radius-inner);
  background: color-mix(in srgb, var(--ui-accentSoft) 66%, white 34%);
  color: var(--ui-accentStrong);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.profile-summary-table-wrap {
  overflow: auto;
  border: 1px solid color-mix(in srgb, var(--ui-border) 84%, transparent);
  border-radius: var(--radius-frame);
  background: color-mix(in srgb, var(--ui-panel) 88%, white 12%);
}

.profile-summary-table {
  width: 100%;
  min-width: 980px;
  border-collapse: collapse;
  font-size: 0.92rem;
}

.profile-summary-table th,
.profile-summary-table td {
  padding: 12px 14px;
  border-bottom: 1px solid color-mix(in srgb, var(--ui-border) 74%, transparent);
  text-align: left;
  vertical-align: top;
  line-height: 1.5;
}

.profile-summary-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: color-mix(in srgb, var(--ui-panelStrong) 72%, white 28%);
  color: var(--ui-accentStrong);
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.profile-summary-table tbody tr:nth-child(even) {
  background: color-mix(in srgb, var(--ui-panelStrong) 24%, transparent);
}

.profile-summary-table td strong {
  display: block;
  margin-bottom: 4px;
  color: var(--ui-text);
}

.profile-summary-kind {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border-radius: var(--radius-inner);
  background: color-mix(in srgb, var(--ui-accentSoft) 58%, white 42%);
  color: var(--ui-accentStrong);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.controls-panel,
.support-panel {
  display: grid;
  gap: 14px;
  align-content: start;
}

.control-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  align-content: start;
}

.control {
  display: grid;
  gap: 8px;
  align-content: start;
}

.control span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-weight: 700;
  font-size: 0.9rem;
}

.control[data-has-help="true"] {
  cursor: help;
}

.control[data-has-help="true"] > span::after {
  content: "?";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin-left: auto;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--ui-accent) 14%, transparent);
  background: color-mix(in srgb, var(--ui-accentSoft) 42%, white 58%);
  color: var(--ui-accentStrong);
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1;
  flex-shrink: 0;
}

.control output {
  color: var(--ui-accent);
  font-weight: 800;
}

.control input[type="range"],
.control input[type="text"],
.control textarea,
.control input[type="color"],
.control select {
  width: 100%;
  display: block;
  margin: 0;
  accent-color: var(--ui-accent);
}

.control input[type="range"] {
  min-height: 28px;
}

.control input[type="text"],
.control textarea,
.control input[type="color"],
.control select {
  min-height: 46px;
  padding: 10px 14px;
  color: var(--ui-text);
  background: color-mix(in srgb, var(--ui-panel) 94%, white 6%);
  border: 1px solid color-mix(in srgb, var(--ui-border) 86%, transparent);
  border-radius: var(--radius-inner);
  outline: none;
}

.control input[type="text"]:focus,
.control textarea:focus,
.control input[type="color"]:focus,
.control select:focus {
  border-color: color-mix(in srgb, var(--ui-accent) 22%, transparent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--ui-accentSoft) 24%, transparent);
  outline: none;
}

.control textarea {
  resize: vertical;
  min-height: 120px;
  line-height: 1.6;
}

.profile-actions-grid {
  margin-bottom: 14px;
}

.inline-feedback,
.verification-summary {
  margin: 0 0 14px;
  padding: 12px 14px;
  border-radius: var(--radius-inner);
  border: 1px solid color-mix(in srgb, var(--ui-border) 84%, transparent);
  background: color-mix(in srgb, var(--ui-panelStrong) 50%, white 50%);
  color: var(--ui-textSoft);
  line-height: 1.55;
}

.inline-feedback {
  font-size: 0.9rem;
}

.verification-summary {
  display: grid;
  gap: 8px;
}

.verification-summary strong {
  color: var(--ui-accentStrong);
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.verification-summary span {
  color: var(--ui-text);
  font-weight: 700;
}

.verification-summary p {
  margin: 0;
  color: var(--ui-textSoft);
  font-size: 0.92rem;
}

.dl-shortcuts-dialog {
  width: min(720px, 92vw);
  max-width: 92vw;
  padding: 0;
  border: none;
  background: transparent;
}

.dl-profile-dialog {
  width: min(1180px, 96vw);
  max-width: 96vw;
  padding: 0;
  border: none;
  background: transparent;
}

.dl-shortcuts-dialog::backdrop {
  background: rgba(20, 16, 13, 0.46);
}

.dl-profile-dialog::backdrop {
  background: rgba(20, 16, 13, 0.46);
}

.dl-shortcuts-dialog__surface {
  display: grid;
  gap: 18px;
  padding: 24px;
  border: 1px solid var(--ui-border);
  border-radius: var(--radius-frame);
  background: var(--ui-panel);
  box-shadow: 0 22px 48px rgba(20, 16, 13, 0.18);
}

.dl-profile-dialog__surface {
  display: grid;
  gap: 18px;
  padding: 24px;
  border: 1px solid var(--ui-border);
  border-radius: var(--radius-frame);
  background: var(--ui-panel);
  box-shadow: 0 22px 48px rgba(20, 16, 13, 0.18);
}

.dl-shortcuts-dialog__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.dl-profile-dialog__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.dl-shortcuts-dialog__header h2 {
  margin: 0;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 2rem;
  font-weight: 600;
  line-height: 0.98;
}

.dl-profile-dialog__header h2 {
  margin: 0;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 2rem;
  font-weight: 600;
  line-height: 0.98;
}

.dl-shortcuts-dialog__body {
  max-height: min(68vh, 720px);
  overflow: auto;
}

.dl-profile-dialog__body {
  display: grid;
  gap: 18px;
  max-height: min(76vh, 860px);
  overflow: auto;
}

.document-overview-dialog {
  width: min(1460px, 98vw);
  max-width: 98vw;
}

.document-overview-dialog__surface {
  max-height: 92vh;
}

.document-overview-dialog__header {
  align-items: flex-start;
}

.document-overview-meta {
  margin: 8px 0 0;
}

.document-overview-toolbar {
  display: grid;
  grid-template-columns: auto minmax(220px, 1fr) auto;
  gap: 16px;
  align-items: center;
  padding: 14px 16px;
  border: 1px solid color-mix(in srgb, var(--ui-border) 84%, transparent);
  border-radius: var(--radius-frame);
  background: color-mix(in srgb, var(--ui-panelStrong) 32%, white 68%);
}

.document-overview-zoom-control {
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  color: var(--ui-accentStrong);
  font-weight: 800;
  letter-spacing: 0.12em;
}

.document-overview-zoom-control input {
  width: 100%;
}

.document-overview-content {
  max-height: min(68vh, 760px);
  overflow: auto;
  padding: 28px;
  border: 1px solid color-mix(in srgb, var(--ui-border) 84%, transparent);
  border-radius: var(--radius-frame);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0)),
    color-mix(in srgb, var(--ui-panelStrong) 28%, white 72%);
}

.document-overview-pages {
  display: grid;
  gap: 28px;
  width: var(--overview-page-width, 980px);
  max-width: none;
  margin: 0 auto;
  color: var(--dl-text-color);
  font-family: var(--dl-font-family);
  font-size: var(--overview-font-size, var(--dl-font-size));
  line-height: max(1.8, var(--dl-line-height));
  letter-spacing: max(0.12em, var(--dl-letter-spacing));
  word-spacing: max(0.16em, var(--dl-word-spacing));
}

.document-overview-page {
  display: grid;
  gap: 14px;
  padding: var(--overview-page-padding, var(--dl-padding));
  border: 1px solid color-mix(in srgb, var(--accent) 16%, transparent);
  border-radius: var(--radius-frame);
  background: var(--dl-bg-color);
  box-shadow: 0 18px 42px rgba(35, 28, 20, 0.1);
}

.document-overview-page__header,
.document-overview-block__meta {
  color: var(--accent);
  font-size: 0.68em;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.document-overview-page__body {
  display: grid;
  gap: 0.85em;
}

.document-overview-block {
  display: grid;
  gap: 0.45em;
  padding: var(--overview-block-padding, 12px);
  border: 1px solid transparent;
  border-left: 2px solid color-mix(in srgb, var(--accent) 26%, transparent);
  border-radius: var(--radius-inner);
  cursor: pointer;
}

.document-overview-block:hover,
.document-overview-block:focus-visible,
.document-overview-block.is-current {
  border-color: color-mix(in srgb, var(--accent) 24%, transparent);
  background: color-mix(in srgb, var(--accentSoft) 20%, transparent);
  outline: none;
}

.document-overview-block p,
.document-overview-block pre {
  margin: 0;
}

.document-overview-empty {
  max-width: 680px;
  margin: 0 auto;
  padding: 34px;
  text-align: center;
  color: var(--ui-textSoft);
}

.teacher-panel {
  display: grid;
  gap: 14px;
}

.reading-tools-panel,
.exam-panel {
  display: grid;
  gap: 14px;
}

.reading-tools-card {
  display: grid;
  gap: 10px;
  padding: 16px 18px;
  border: 1px solid color-mix(in srgb, var(--ui-border) 82%, transparent);
  border-radius: var(--radius-inner);
  background: color-mix(in srgb, var(--ui-panelStrong) 34%, white 66%);
}

.reading-tools-card strong {
  color: var(--ui-text);
  font-size: 1.1rem;
  line-height: 1.35;
}

.subtle-note {
  color: var(--ui-textSoft);
  opacity: 0.9;
}

.exam-timer {
  margin: 0;
  font-size: 1.08rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--ui-accentStrong);
}

.teacher-summary {
  display: grid;
  gap: 6px;
  padding: 14px 16px;
  border: 1px solid color-mix(in srgb, var(--ui-border) 84%, transparent);
  border-radius: var(--radius-inner);
  background: color-mix(in srgb, var(--ui-panelStrong) 38%, white 62%);
}

.teacher-summary strong {
  color: var(--ui-text);
}

.teacher-summary p {
  margin: 0;
  color: var(--ui-textSoft);
  line-height: 1.55;
}

.teacher-actions {
  grid-template-columns: 1fr;
}

.teacher-compare-dialog__body {
  gap: 20px;
}

.teacher-compare-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.teacher-compare-card {
  display: grid;
  gap: 12px;
  min-height: 0;
}

.teacher-compare-content {
  min-height: 240px;
  padding: 16px;
  border: 1px solid color-mix(in srgb, var(--ui-border) 84%, transparent);
  border-radius: var(--radius-inner);
  background: color-mix(in srgb, var(--ui-panelStrong) 28%, white 72%);
  overflow: auto;
}

.teacher-compare-content--raw {
  font-family: "Aptos Mono", "Consolas", monospace;
  color: var(--ui-text);
}

.teacher-compare-raw {
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.65;
}

.teacher-compare-preview {
  max-width: none;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
}

.dl-shortcuts-list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.dl-shortcuts-list li {
  display: grid;
  grid-template-columns: minmax(180px, 220px) minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--ui-accent) 10%, transparent);
  border-radius: var(--radius-inner);
  background: color-mix(in srgb, var(--ui-panelStrong) 32%, white 68%);
}

.dl-shortcuts-list strong {
  color: var(--ui-accentStrong);
}

.recent-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}

.ocr-progress {
  display: grid;
  gap: 8px;
  margin-top: 14px;
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--ui-border) 84%, transparent);
  border-radius: var(--radius-inner);
  background: color-mix(in srgb, var(--ui-panelStrong) 42%, white 58%);
}

.ocr-progress__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.ocr-progress__meta strong {
  color: var(--ui-text);
}

.ocr-progress__meta span {
  color: var(--ui-accentStrong);
  font-weight: 700;
}

.ocr-progress progress {
  width: 100%;
  height: 12px;
  accent-color: var(--ui-accent);
}

.selection-assist {
  display: grid;
  gap: 12px;
  padding: 16px 18px;
  border: 1px solid var(--ui-border);
  border-radius: var(--radius-frame);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0)),
    var(--ui-panel);
  box-shadow: var(--shadow-soft);
}

.selection-assist__copy {
  display: grid;
  gap: 4px;
}

.selection-assist__copy strong {
  color: var(--ui-text);
}

.selection-assist__copy p {
  margin: 0;
  color: var(--ui-textSoft);
  line-height: 1.55;
}

.selection-assist__actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
}

.recent-list li {
  padding: 10px 0 10px 14px;
  border-left: 2px solid color-mix(in srgb, var(--ui-accent) 24%, transparent);
  color: var(--ui-textSoft);
  line-height: 1.55;
}

.recent-file {
  display: grid;
  gap: 3px;
}

.recent-file-title {
  color: var(--ui-text);
  font-size: 1.02rem;
  line-height: 1.45;
}

.recent-file-title .word-adapted {
  font-size: 1.02rem;
}

.recent-file-meta {
  color: var(--ui-textSoft);
  font-size: 0.88rem;
  line-height: 1.45;
}

.main-stage {
  position: relative;
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: 18px;
  min-width: 0;
}

.floating-sidebar-toggle {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 4;
  min-height: 40px;
  padding-inline: 14px;
  box-shadow: var(--shadow-soft);
}

.quick-action-dock {
  position: fixed;
  right: 24px;
  bottom: 78px;
  z-index: 24;
  display: inline-flex;
  gap: 6px;
  padding: 6px;
  border: 1px solid color-mix(in srgb, var(--ui-border) 82%, transparent);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0)),
    color-mix(in srgb, var(--ui-panel) 92%, white 8%);
  box-shadow: 0 14px 34px rgba(35, 28, 20, 0.14);
}

.quick-action-dock[hidden] {
  display: none;
}

.quick-action-dock__button {
  min-width: 58px;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--ui-text);
  font: inherit;
  font-size: 0.94rem;
  cursor: pointer;
}

.quick-action-dock__button:hover,
.quick-action-dock__button:focus-visible,
.quick-action-dock__button.is-active {
  background: color-mix(in srgb, var(--ui-accentSoft) 60%, white 40%);
  color: var(--ui-accentStrong);
  outline: none;
}

.quick-action-dock__button--stop {
  color: color-mix(in srgb, #7a2c2c 72%, var(--ui-text) 28%);
}

.quick-action-dock__button--stop:hover,
.quick-action-dock__button--stop:focus-visible {
  background: color-mix(in srgb, #f0d4cf 58%, white 42%);
  color: #6f2424;
}

.quick-action-dock__button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.stage-topbar {
  padding: 16px 18px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0)),
    var(--panel);
}

.stage-topbar-copy {
  display: grid;
  gap: 4px;
}

.stage-topbar-caption {
  margin: 0;
  color: var(--textSoft);
  font-size: 0.95rem;
  line-height: 1.45;
}

.topbar-actions {
  flex-wrap: wrap;
}

.view-pill {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 16px;
  border-radius: var(--radius-frame);
  border: 1px solid color-mix(in srgb, var(--ui-border) 84%, transparent);
  background: color-mix(in srgb, var(--panel) 90%, white 10%);
  color: var(--textSoft);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.view-pill.is-active {
  background: color-mix(in srgb, var(--accentSoft) 56%, white 44%);
  color: var(--accentStrong);
  border-color: color-mix(in srgb, var(--accent) 18%, transparent);
}

.warning-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  border-radius: var(--radius-frame);
  color: var(--ui-warningText);
  background: color-mix(in srgb, var(--ui-warningBg) 88%, var(--ui-panel) 12%);
  border: 1px solid color-mix(in srgb, var(--ui-accent) 12%, transparent);
}

.empty-state,
.doc-state {
  min-height: 0;
}

.empty-state {
  display: grid;
  place-items: center;
}

.empty-card {
  max-width: 720px;
  padding: 48px 42px;
  text-align: center;
}

.empty-card p {
  color: var(--textSoft);
  line-height: 1.7;
}

.doc-state {
  display: grid;
}

.reader-stage-card {
  display: grid;
  grid-template-rows: auto 1fr;
  min-height: 0;
  padding: 16px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0)),
    var(--panel);
}

.reader-stage-header {
  gap: 14px;
  padding: 4px 6px 14px;
}

.reader-stage-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.reader-stage-caption {
  margin: 0;
  font-size: 0.86rem;
  letter-spacing: 0.06em;
  text-align: right;
}

.reading-area {
  position: relative;
  isolation: isolate;
  overflow: auto;
  min-height: 0;
  padding: 16px;
  border-radius: var(--radius-inner);
  color: var(--dl-text-color);
  background: var(--dl-bg-color);
  border: 1px solid color-mix(in srgb, var(--accent) 8%, transparent);
}

.reading-area::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--dl-overlay-color);
  opacity: var(--dl-overlay-opacity);
  mix-blend-mode: multiply;
  pointer-events: none;
  z-index: 2;
}

.page-list {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 12px;
}

.reader-page {
  padding: var(--dl-padding);
  border-radius: var(--radius-frame);
  color: var(--dl-text-color);
  background: var(--block);
}

.reader-page-header {
  margin-bottom: 12px;
  color: var(--accent);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.reader-page-body {
  display: grid;
  gap: 10px;
  color: var(--dl-text-color);
  font-family: var(--dl-font-family);
  font-size: max(16px, var(--dl-font-size));
  line-height: max(1.8, var(--dl-line-height));
  letter-spacing: max(0.12em, var(--dl-letter-spacing));
  word-spacing: max(0.16em, var(--dl-word-spacing));
  text-align: left;
}

.reader-block {
  position: relative;
  max-width: var(--dl-reading-width);
  padding: 12px 18px;
  border-radius: var(--radius-inner);
  border: 1px solid transparent;
  border-left: 2px solid transparent;
  color: var(--dl-text-color);
  background: transparent;
  outline: none;
}

.reader-block::before {
  content: "";
  position: absolute;
  left: 10px;
  top: 14px;
  bottom: 14px;
  width: 2px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 56%, transparent);
  opacity: 0;
  transform: scaleY(0.92);
  transition: opacity 140ms ease, background-color 140ms ease, transform 140ms ease;
}

.reader-block.is-current::before {
  opacity: 0.9;
  transform: scaleY(1);
}

.reader-block p {
  margin: 0;
  color: inherit;
  text-align: left;
  font-style: normal;
  white-space: pre-wrap;
}

.reader-block--heading {
  font-size: 1.04em;
  font-weight: 700;
  color: color-mix(in srgb, var(--accentStrong) 76%, var(--dl-text-color) 24%);
}

.reader-block--heading p {
  color: inherit;
}

.reader-block--list p {
  white-space: pre-wrap;
}

.reader-block--table {
  max-width: min(100%, calc(var(--dl-reading-width) + 18ch));
  padding: 16px 18px;
}

.table-block {
  display: grid;
  gap: 10px;
}

.table-block--science {
  gap: 12px;
}

.table-row {
  display: grid;
  gap: 10px;
  align-items: start;
}

.table-cell {
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--dl-text-color);
  background: color-mix(in srgb, var(--panel) 88%, white 12%);
  overflow-wrap: anywhere;
}

.table-cell--label {
  font-weight: 700;
}

.table-cell--value {
  color: color-mix(in srgb, var(--text) 88%, var(--accentStrong) 12%);
}

.table-cell--unit {
  font-family: "Cambria Math", "STIX Two Math", "Segoe UI", sans-serif;
  letter-spacing: 0.03em;
  background: color-mix(in srgb, var(--accentSoft) 16%, white 84%);
}

.reader-block.has-math {
  border-color: color-mix(in srgb, var(--accent) 10%, transparent);
}

.reader-block--formula {
  max-width: min(100%, calc(var(--dl-reading-width) + 6ch));
  background: color-mix(in srgb, var(--panel) 94%, white 6%);
  border-color: color-mix(in srgb, var(--accent) 16%, transparent);
}

.formula-content {
  margin: 0;
  color: var(--dl-text-color);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-family: "Cambria Math", "STIX Two Math", "Segoe UI", sans-serif;
  font-size: 1em;
  line-height: 1.65;
  letter-spacing: 0.01em;
  word-spacing: 0.08em;
}

.math-operator,
.math-group,
.math-number,
.math-super,
.math-sub,
.math-greek,
.math-variable,
.math-function,
.math-unit,
.math-identifier {
  color: var(--text);
}

.math-operator {
  color: var(--accentStrong);
  font-weight: 700;
}

.math-group {
  color: color-mix(in srgb, var(--accentStrong) 72%, var(--text) 28%);
}

.math-number {
  color: color-mix(in srgb, var(--accent) 72%, var(--text) 28%);
}

.math-greek {
  color: color-mix(in srgb, var(--accentStrong) 78%, var(--text) 22%);
  font-weight: 700;
}

.math-variable {
  color: color-mix(in srgb, var(--accentStrong) 68%, var(--text) 32%);
  font-weight: 600;
}

.math-function {
  color: color-mix(in srgb, var(--accent) 58%, var(--text) 42%);
  font-weight: 700;
  letter-spacing: 0.02em;
}

.math-unit {
  color: color-mix(in srgb, var(--accentStrong) 54%, var(--text) 46%);
  font-weight: 700;
  letter-spacing: 0.04em;
}

.math-identifier {
  color: color-mix(in srgb, var(--text) 88%, var(--accentStrong) 12%);
}

.math-super,
.math-sub {
  font-size: 0.82em;
  font-weight: 700;
}

.verification-note {
  display: grid;
  gap: 6px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid color-mix(in srgb, var(--accent) 10%, transparent);
  color: var(--textSoft);
  font-size: 0.86rem;
  line-height: 1.5;
}

.verification-note strong {
  color: var(--accentStrong);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.legend-block {
  display: grid;
  gap: 10px;
}

.legend-row {
  display: grid;
  grid-template-columns: minmax(16ch, 26ch) minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--accent) 9%, transparent);
  border-radius: var(--radius-inner);
  background: color-mix(in srgb, var(--panel) 90%, white 10%);
}

.legend-label {
  color: color-mix(in srgb, var(--accentStrong) 76%, var(--text) 24%);
  font-weight: 700;
}

.legend-value {
  color: var(--dl-text-color);
}

.block-anchor {
  position: absolute;
  top: 12px;
  right: 12px;
  display: none;
  padding: 3px 8px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--accentSoft) 74%, white 26%);
  color: var(--accentStrong);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}

html[data-highlight-mode="soft"] .reader-block.is-current {
  border-left-color: color-mix(in srgb, var(--accent) 68%, transparent);
  background: color-mix(in srgb, var(--highlight) 26%, transparent);
}

html[data-highlight-mode="strong"] .reader-block.is-current {
  border-color: color-mix(in srgb, var(--accent) 18%, transparent);
  border-left-color: var(--accent);
  background: color-mix(in srgb, var(--highlight) 46%, transparent);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--accent) 8%, transparent);
}

html[data-highlight-mode="none"] .reader-block.is-current {
  border-color: color-mix(in srgb, var(--accent) 16%, transparent);
  border-left-color: var(--accent);
}

html[data-verification-mode="markers"] .reader-block.is-flagged,
html[data-verification-mode="review"] .reader-block.is-flagged {
  border-left-color: var(--accent);
  background: color-mix(in srgb, var(--accentSoft) 12%, var(--panel) 88%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 16%, transparent);
}

html[data-verification-mode="markers"] .block-anchor,
html[data-verification-mode="review"] .block-anchor {
  display: inline-flex;
}

html[data-verification-mode="markers"] .reader-block.is-flagged.is-current,
html[data-verification-mode="review"] .reader-block.is-flagged.is-current {
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--accent) 18%, transparent),
    0 6px 16px color-mix(in srgb, var(--accent) 10%, transparent);
}

html[data-focus-mode="paragraph"] .reader-block {
  opacity: 0.72;
}

html[data-focus-mode="paragraph"] .reader-block.is-current {
  opacity: 1;
}

html[data-profile-id="normal"] .reader-block.is-current,
html[data-profile-id="lecture-visuelle-allegee"] .reader-block.is-current {
  border-color: transparent;
  border-left-color: transparent;
  background: transparent;
  box-shadow: none;
}

html[data-profile-id="audio"] .reader-block.is-current {
  border-color: transparent;
  border-left-color: transparent;
  background: transparent;
  box-shadow: none;
}

html[data-profile-id="normal"] .reader-block.is-current::before,
html[data-profile-id="lecture-visuelle-allegee"] .reader-block.is-current::before,
html[data-profile-id="audio"] .reader-block.is-current::before {
  background: color-mix(in srgb, var(--accent) 52%, transparent);
}

html[data-profile-id="audio"][data-audio-state="idle"] .reader-block {
  opacity: 1;
}

html[data-profile-id="audio"][data-audio-state="playing"] .reader-block,
html[data-profile-id="audio"][data-audio-state="paused"] .reader-block {
  opacity: 0.68;
}

html[data-profile-id="audio"][data-audio-state="playing"] .reader-block.is-audio-block,
html[data-profile-id="audio"][data-audio-state="paused"] .reader-block.is-audio-block {
  opacity: 1;
}

.ruler-overlay {
  display: none !important;
}

.dl-reading-guide {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
}

.dl-reading-guide[hidden] {
  display: none !important;
}

.dl-reading-guide__shade,
.dl-reading-guide__ruler,
.dl-reading-guide__window {
  position: absolute;
  left: 0;
  right: 0;
  border-radius: 4px;
}

.dl-reading-guide__shade {
  background: color-mix(in srgb, var(--dl-bg-color) 90%, transparent);
  opacity: 0;
}

.dl-reading-guide__shade--top {
  top: 0;
  height: var(--dl-guide-top);
}

.dl-reading-guide__shade--bottom {
  bottom: 0;
  height: var(--dl-guide-bottom);
}

.dl-reading-guide__ruler,
.dl-reading-guide__window {
  top: var(--dl-guide-top);
  height: var(--dl-guide-height);
  opacity: 0;
}

.dl-reading-guide__ruler {
  background: var(--dl-guide-color);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--dl-guide-color) 24%, transparent);
}

.dl-reading-guide__window {
  background: transparent;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--dl-guide-color) 28%, transparent);
}

.dl-reading-guide[data-mode="ruler"] .dl-reading-guide__ruler {
  opacity: var(--dl-guide-opacity);
}

.dl-reading-guide[data-mode="window"] .dl-reading-guide__window,
.dl-reading-guide[data-mode="window"] .dl-reading-guide__shade {
  opacity: calc(var(--dl-guide-opacity) * 2.2);
}

.dl-reading-guide[data-mode="window"] .dl-reading-guide__window {
  opacity: 1;
}

.word-adapted {
  transition: color 120ms ease;
}

.word-select-target {
  border-radius: 0.38em;
  cursor: pointer;
  transition:
    background-color 160ms ease,
    box-shadow 160ms ease;
}

.word-select-target:hover {
  background: color-mix(in srgb, var(--accentSoft) 12%, transparent);
}

.word-select-target:focus-visible {
  outline: none;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--ui-accent) 40%, transparent);
}

.word-select-target.is-word-selected {
  background: color-mix(in srgb, var(--accentSoft) 22%, transparent);
  box-shadow:
    inset 0 -0.08em 0 color-mix(in srgb, var(--ui-accent) 34%, transparent),
    0 0 0 1px color-mix(in srgb, var(--ui-accent) 18%, transparent);
}

.word-audio-track {
  display: inline;
}

.audio-sentence.is-audio-sentence {
  background: color-mix(in srgb, var(--accentSoft) 28%, transparent);
  border-radius: 4px;
}

.word-audio-track.is-audio-word .word-adapted,
.word-audio-track.is-audio-word {
  border-radius: 0.34em;
  background: color-mix(in srgb, var(--accentSoft) 42%, transparent);
  color: var(--accentStrong);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--accent) 18%, transparent),
    inset 0 -0.16em 0 color-mix(in srgb, var(--accent) 26%, transparent);
  text-decoration: underline;
  text-decoration-thickness: 0.1em;
  text-underline-offset: 0.16em;
}

.reader-block.is-audio-block {
  border-left-color: var(--ui-accent);
}

html[data-profile-id="audio"] .reader-block.is-audio-block {
  border-left-color: color-mix(in srgb, var(--accent) 72%, transparent);
  background: color-mix(in srgb, var(--highlight) 20%, transparent);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--accent) 8%, transparent);
}

.word-adapted.important {
  box-shadow: none;
}

.word-adapted.is-annotated,
.word-audio-track.is-annotated {
  border-radius: 4px;
}

.text-annotation--amber {
  background: rgba(248, 220, 134, 0.6);
}

.text-annotation--blue {
  background: rgba(180, 214, 255, 0.68);
}

.text-annotation--rose {
  background: rgba(248, 201, 223, 0.72);
}

.syllabe {
  box-shadow: none;
}

.syllabe.syllabe1 {
  box-shadow: none;
}

.syllabe.syllabe2 {
  box-shadow: none;
}

.syllable-chunk {
  display: inline;
}

.phoneme {
  font-weight: 700;
}

.phoneme.syllabe1 {
  color: var(--syllabe1);
}

.phoneme.syllabe2 {
  color: var(--syllabe2);
}

.phoneme.sound {
  font-weight: 800;
}

.phoneme.sound.sound-soft.sound-vowel {
  color: #265fa6;
}

.phoneme.sound.sound-soft.sound-nasal {
  color: #b63d48;
}

.phoneme.sound.sound-soft.sound-complex {
  color: #2f7b68;
}

.phoneme.sound.sound-soft.sound-consonant {
  color: #6a5b8c;
}

.phoneme.sound.sound-strong.sound-vowel {
  color: #0f5cc0;
}

.phoneme.sound.sound-strong.sound-nasal {
  color: #d62839;
}

.phoneme.sound.sound-strong.sound-complex {
  color: #177a63;
}

.phoneme.sound.sound-strong.sound-consonant {
  color: #6a42b5;
}

.syllable-separator {
  display: inline-block;
  margin-inline: 0.08em;
  color: color-mix(in srgb, var(--accentStrong) 60%, white 40%);
  font-weight: 700;
}

.syllable-separator--hyphen {
  letter-spacing: -0.04em;
}

.muet {
  color: var(--muet);
  font-weight: 600;
}

html[data-coloration-mode="pedagogiqueAlt"] {
  --syllabe1: #5f7ae6;
  --syllabe2: #5f93a1;
  --muet: #9aa5b0;
  --important: rgba(191, 219, 254, 0.42);
}

.reader-empty-message {
  max-width: 780px;
  padding: 30px;
}

.reader-empty-message p {
  margin: 10px 0 0;
  color: var(--textSoft);
  line-height: 1.7;
}

.stage-footer {
  padding: 14px 18px;
  color: var(--textSoft);
  background: color-mix(in srgb, var(--panel) 88%, white 12%);
}

.is-distraction-free .sidebar {
  display: none;
}

.is-distraction-free .app-shell {
  grid-template-columns: 1fr;
}

.is-distraction-free .warning-banner,
.is-distraction-free .reader-stage-header,
.is-distraction-free .stage-footer {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .startup-splash,
  .startup-splash__image {
    animation: none !important;
    transition-duration: 0.01ms !important;
  }

  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

:root[data-system-color-scheme="dark"] {
  color-scheme: dark;
  --ui-page: #12100f;
  --ui-shell: #191614;
  --ui-panel: #201c19;
  --ui-panelStrong: #2a2521;
  --ui-text: #f2ece5;
  --ui-textSoft: #c7bdb1;
  --ui-accent: #c49b64;
  --ui-accentStrong: #e0bf8e;
  --ui-accentSoft: #3e3428;
  --ui-border: #3a322b;
  --ui-warningBg: #2a241f;
  --ui-warningText: #e6c998;
}

:root[data-system-color-scheme="dark"] .app-shell {
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.42);
}

@media (max-width: 1360px) {
  .app-shell {
    grid-template-columns: minmax(320px, 34vw) minmax(0, 1fr);
  }

  .info-pills {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1080px) {
  body {
    overflow: auto;
  }

  .app-shell {
    height: auto;
    min-height: 100vh;
    grid-template-columns: 1fr;
  }

  .sidebar {
    overflow: visible;
  }

  .reader-stage-header,
  .stage-footer,
  .section-head,
  .topbar-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .quick-actions-grid {
    grid-template-columns: 1fr;
  }

  .teacher-compare-grid {
    grid-template-columns: 1fr;
  }

  .document-overview-toolbar {
    grid-template-columns: 1fr;
  }

  .info-pills {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 720px) {
  .app-shell {
    padding: 16px;
    gap: 16px;
  }

  .sidebar-hero,
  .panel,
  .stage-topbar,
  .reader-stage-card,
  .empty-card,
  .stage-footer {
    border-radius: var(--radius-frame);
  }

  .info-pills {
    grid-template-columns: 1fr;
  }

  .reader-block {
    padding: 16px 18px;
  }

  .selection-assist__actions {
    grid-template-columns: 1fr;
  }

  .quick-action-dock {
    right: 14px;
    bottom: 64px;
  }

  .document-overview-content {
    padding: 14px;
  }

  .dl-shortcuts-list li {
    grid-template-columns: 1fr;
  }
}