.reader-copy {
  font-family: var(--font-reading);
  background:
    radial-gradient(circle at 12% 0%, color-mix(in srgb, var(--accent-reader) 8%, transparent), transparent 34%),
    linear-gradient(180deg, color-mix(in srgb, var(--card) 96%, #fff), color-mix(in srgb, var(--panel) 94%, #fff));
  border: 1px solid color-mix(in srgb, var(--accent-reader) 16%, var(--border));
  border-radius: var(--radius);
  padding: 30px clamp(18px, 3vw, 40px) 44px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.46), var(--shadow-soft);
  max-width: 74ch;
  margin: 0 auto;
  contain: layout paint;
  will-change: transform, opacity;
}

html[data-reader-type="sans"] .reader-copy {
  font-family: var(--font-sans);
}

html[data-reader-type="serif"] .reader-copy {
  font-family: var(--font-reading);
}

html[data-reader-line="compact"] .reader-copy p {
  line-height: 1.62;
  margin-bottom: 15px;
}

html[data-reader-line="open"] .reader-copy p {
  line-height: 2;
  margin-bottom: 22px;
}

html[data-reader-tone="sepia"] .route-reader {
  --panel: #f5ead7;
  --card: #fff7e9;
  --ink: #342415;
  --muted: #6f5a40;
  --border: rgba(114, 82, 45, 0.22);
}

html[data-reader-tone="dark"] .route-reader {
  --panel: #11151b;
  --card: #161d25;
  --ink: #eef3f0;
  --muted: #aeb9b4;
  --border: rgba(180, 204, 194, 0.18);
}

.reader-copy h3 {
  margin: 0 0 16px;
  font-size: 25px;
  line-height: 1.2;
  color: var(--ink);
}

.reader-copy p {
  margin: 0 0 18px;
  color: var(--ink);
  font-size: 18px;
  line-height: 1.85;
  user-select: text;
  -webkit-user-select: text;
}

.reader-copy,
.page-turn-enter {
  animation: readerPageEnter 420ms cubic-bezier(.2,.7,.2,1) both;
}

@keyframes readerPageEnter {
  from {
    opacity: 0;
    transform: translateY(12px) rotateX(2deg);
    filter: saturate(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: saturate(1);
  }
}

.reader-immersive .reader-copy {
  border-color: transparent;
  box-shadow: none;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--card) 98%, #fff), color-mix(in srgb, var(--panel) 96%, #fff));
}

.reader-copy p:last-child {
  margin-bottom: 0;
}

.reader-assist-control {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--muted);
  padding: 7px 9px;
  border: 1px solid color-mix(in srgb, var(--accent-reader) 16%, var(--border));
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--card) 72%, transparent);
}

.reader-preset-control {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--muted);
  padding: 7px 9px;
  border: 1px solid color-mix(in srgb, var(--accent-reader) 16%, var(--border));
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--card) 72%, transparent);
}

.reader-preset-control select,
.reader-assist-control select {
  min-height: 34px;
  padding: 5px 8px;
}

.reader-memory-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.clarify-assist-hint {
  border-bottom: 1px dotted color-mix(in srgb, var(--accent-reader) 58%, transparent);
  background: linear-gradient(to top, color-mix(in srgb, var(--accent-reader) 12%, transparent), color-mix(in srgb, var(--accent-reader) 12%, transparent)) 0 100% / 100% 0.45em no-repeat;
  cursor: pointer;
  border-radius: 2px;
  transition: border-color 140ms ease, background-size 140ms ease, color 140ms ease;
}

.clarify-assist-hint:hover,
.clarify-assist-hint:focus-visible {
  border-bottom-color: color-mix(in srgb, var(--accent-reader) 82%, var(--ink));
  background-size: 100% 0.68em;
  color: color-mix(in srgb, var(--accent-reader) 78%, var(--ink));
  outline: none;
}

.clarify-assist-hint-seen {
  border-bottom-color: rgba(139, 94, 43, 0.62);
  background: linear-gradient(to top, rgba(139, 94, 43, 0.1), rgba(139, 94, 43, 0.1)) 0 100% / 100% 0.52em no-repeat;
}

.chapter-bridge {
  margin: -6px 0 24px;
  padding: 13px 15px;
  border: 1px solid rgba(17, 100, 102, 0.12);
  border-radius: var(--radius);
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--accent-reader) 9%, transparent), transparent 65%),
    color-mix(in srgb, var(--card) 82%, transparent);
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

#readerTransitionModal,
#audioTransitionModal {
  background:
    radial-gradient(circle at 18% 0%, color-mix(in srgb, var(--accent-reader) 12%, transparent), transparent 36%),
    color-mix(in srgb, var(--card) 98%, #fff);
  border-color: color-mix(in srgb, var(--accent-reader) 20%, var(--border));
  box-shadow: 0 28px 76px color-mix(in srgb, var(--accent-reader) 18%, rgba(17, 24, 39, 0.28));
}

.reader-clarify-backdrop {
  background: color-mix(in srgb, var(--ink) 20%, transparent);
}

.reader-clarify-modal {
  width: min(420px, calc(100vw - 24px));
  transform-origin: top left;
  border-color: color-mix(in srgb, var(--accent-reader) 20%, var(--border));
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--card) 96%, #fff), color-mix(in srgb, var(--panel) 94%, #fff));
  box-shadow: 0 28px 74px color-mix(in srgb, var(--accent-reader) 20%, rgba(17, 24, 39, 0.28));
  backdrop-filter: blur(10px);
  transition: opacity 180ms ease, transform 180ms cubic-bezier(.2,.7,.2,1);
}

.reader-clarify-actions {
  margin-top: 14px;
}

.reader-clarify-handle {
  width: 44px;
  height: 5px;
  border-radius: 999px;
  background: rgba(36, 48, 58, 0.18);
  margin: 0 auto 10px;
  border: 0;
  padding: 0;
  display: block;
  cursor: pointer;
}

button.reader-clarify-handle {
  min-height: 18px;
}

.reader-clarify-preview {
  display: grid;
  gap: 6px;
  padding: 10px 12px;
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--card) 72%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent-reader) 12%, var(--border));
  margin-bottom: 12px;
}

.reader-clarify-preview strong {
  font-size: 15px;
  line-height: 1.35;
}

.reader-clarify-preview span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.reader-clarify-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

@media (min-width: 721px) {
  .reader-clarify-backdrop {
    opacity: 0;
    pointer-events: none;
  }

  .reader-clarify-modal {
    left: 0;
    top: 0;
    transform: translateY(8px);
    max-height: min(70vh, 640px);
  }

  .reader-clarify-modal.open {
    transform: translateY(0);
  }
}

@media (min-width: 1280px) {
  .reader-copy {
    max-width: 78ch;
    padding-block: 42px 56px;
  }

  .reader-copy p {
    font-size: 19px;
  }
}

@media (max-width: 720px) {
  .reader-copy {
    max-width: none;
    margin: 0;
    padding: 21px 15px 36px;
    border-inline: 0;
  }

  .reader-copy p {
    font-size: 18px;
    line-height: 1.72;
    overflow-wrap: anywhere;
  }

  .reader-assist-control {
    width: 100%;
    justify-content: space-between;
    min-height: 46px;
  }

  .reader-preset-control {
    width: 100%;
    justify-content: space-between;
    min-height: 46px;
  }

  .clarify-assist-hint {
    border-radius: 4px;
    padding: 1px 2px;
  }

  .reader-clarify-backdrop.open {
    opacity: 1;
    pointer-events: auto;
  }

  .reader-clarify-modal {
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    width: auto;
    max-height: min(82dvh, 760px);
    border-radius: 14px 14px 0 0;
    padding-bottom: calc(18px + env(safe-area-inset-bottom));
    transform: translateY(18px);
  }

  .reader-clarify-modal.open {
    transform: translateY(0);
  }

  .reader-clarify-modal:not(.mobile-expanded) .reader-clarify-tabs,
  .reader-clarify-modal:not(.mobile-expanded) .modal-body,
  .reader-clarify-modal:not(.mobile-expanded) .reader-clarify-actions {
    display: none;
  }

  button.reader-clarify-handle {
    width: 56px;
    min-height: 30px;
    margin-bottom: 6px;
    touch-action: none;
  }

  .reader-clarify-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
  }

  .reader-clarify-tabs .chip {
    flex: 1 0 auto;
  }

  .reader-clarify-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .reader-clarify-actions .chip,
  .reader-clarify-actions .btn {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .reader-copy {
    animation: none;
  }
}

@media (max-width: 460px) {
  .reader-clarify-actions {
    grid-template-columns: 1fr;
  }
}