:root {
  --bg: #0f1419;
  --panel: #1a2332;
  --border: #2d3a4d;
  --text: #e7ecf3;
  --muted: #8b9cb3;
  --accent: #4f8cff;
  --accent-hover: #3a6fd6;
  --spotlight: #f0c878;
  --success: #3dd68c;
  --error: #ff6b6b;
  --radius: 10px;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.75rem;
}

[data-theme="light"] {
  --bg: #f6f4f0;
  --panel: #ffffff;
  --border: #d8d2c8;
  --text: #1a1a2e;
  --muted: #5c6478;
  --accent: #3a6fd6;
  --accent-hover: #2d57b8;
  --spotlight: #e8a838;
}

[data-theme="light"] .listen-section-nav {
  box-shadow: 0 4px 16px rgba(26, 26, 46, 0.08);
}

[data-theme="light"] .listen-transport-btn {
  background: rgba(26, 26, 46, 0.04);
}

[data-theme="light"] .listen-transport-btn:hover:not(:disabled) {
  background: rgba(58, 111, 214, 0.1);
  border-color: rgba(58, 111, 214, 0.35);
}

[data-theme="light"] .listen-section-nav {
  background: rgba(255, 255, 255, 0.85);
}

[data-theme="light"] .listen-hero-bar {
  background: linear-gradient(
    90deg,
    color-mix(in srgb, #fff 70%, var(--spotlight) 30%) 0%,
    color-mix(in srgb, #fff 94%, transparent) 100%
  );
  border-color: var(--border);
  box-shadow: 0 2px 10px rgba(26, 26, 46, 0.07);
}

[data-theme="light"] .listen-hero-title {
  color: color-mix(in srgb, var(--text) 88%, #9a6b12 12%);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: "Segoe UI", system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
}

body.modal-open {
  overflow: hidden;
}

body.wizard-step-listen .app-shell {
  overflow-x: hidden;
  max-width: 100%;
}

body.wizard-step-listen .sidebar-sections-scroll {
  overscroll-behavior: contain;
}

.cast-refresh-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.app-toast {
  position: fixed;
  z-index: 10000;
  min-width: 11rem;
  max-width: min(22rem, calc(100vw - 1.5rem));
  padding: 0.5rem 0.75rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text);
  font-size: 0.85rem;
  font-weight: 600;
  text-align: center;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  transform: translate(-50%, -0.35rem);
  left: 50%;
  bottom: 4.5rem;
  top: auto;
}

.app-toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

.app-toast.is-above.is-visible {
  transform: translate(-50%, -100%);
}

.app-toast.is-ok {
  border-color: rgba(61, 214, 140, 0.45);
  color: var(--success);
}

.app-toast:not(.is-ok) {
  border-color: rgba(255, 107, 107, 0.45);
  color: var(--error);
}

/* Tier 2 #10 — single REC pill. Idle: gray pill that opens the export
   config modal. Recording: red pill with a pulsing dot and live
   elapsed time; clicking again stops & saves. Replaces the old
   "Export clip" button + separate "REC … Stop & save" floater. */
.rec-clip-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.38rem 0.85rem 0.38rem 0.65rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease,
    transform 0.1s ease;
}

.rec-clip-pill:hover {
  border-color: rgba(220, 70, 70, 0.55);
  color: var(--text);
  background: rgba(220, 70, 70, 0.08);
}

.rec-clip-pill:active {
  transform: scale(0.97);
}

.rec-clip-pill:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.rec-clip-pill-dot {
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background: #d35454;
  transition: background 0.15s ease;
}

.rec-clip-pill-label {
  letter-spacing: 0.08em;
  font-size: 0.72rem;
}

.rec-clip-pill-time {
  font-variant-numeric: tabular-nums;
  font-size: 0.78rem;
  min-width: 2.4rem;
}

.rec-clip-pill.is-recording {
  color: #fff;
  background: linear-gradient(180deg, #d35454, #b23a3a);
  border-color: rgba(255, 120, 120, 0.6);
}

.rec-clip-pill.is-recording .rec-clip-pill-dot {
  background: #fff;
  box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.55);
  animation: rec-clip-pill-pulse 1.4s ease-in-out infinite;
}

@keyframes rec-clip-pill-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.55);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 0 6px rgba(255, 255, 255, 0);
    transform: scale(1.1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .rec-clip-pill.is-recording .rec-clip-pill-dot {
    animation: none;
  }
}

/* Background-validator status pill on the Listen screen.
   Sits below the listen-hero-bar; visible only while the deferred
   validator job is still running. Designed to be unobtrusive — a
   single line of text + a thin progress fill that quietly disappears
   when the refined attributions are hot-swapped in. */
.listen-validator-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin-top: 0.35rem;
  padding: 0.28rem 0.75rem 0.28rem 0.55rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  max-width: 100%;
  overflow: hidden;
}

.listen-validator-pill[hidden] {
  display: none;
}

.listen-validator-pill-icon {
  font-size: 0.85rem;
  line-height: 1;
  color: var(--accent);
  animation: listen-validator-pill-spin 2.4s linear infinite;
}

@keyframes listen-validator-pill-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.listen-validator-pill-label {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.listen-validator-pill-progress {
  display: inline-block;
  position: relative;
  width: 4.5rem;
  height: 0.28rem;
  border-radius: 999px;
  background: rgba(125, 125, 125, 0.18);
  overflow: hidden;
}

.listen-validator-pill-fill {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 0%;
  border-radius: 999px;
  background: var(--accent);
  transition: width 0.3s ease;
}

@media (prefers-reduced-motion: reduce) {
  .listen-validator-pill-icon {
    animation: none;
  }
}

.global-announcement-banner {
  --announce-accent: var(--accent);
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.9rem 3rem;
  min-height: 3.25rem;
  border-bottom: 2px solid color-mix(in srgb, var(--announce-accent) 55%, transparent);
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--announce-accent) 32%, var(--panel)) 0%,
    color-mix(in srgb, var(--announce-accent) 22%, var(--bg)) 100%
  );
  color: #f4f8ff;
  font-size: 1.02rem;
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: 0.01em;
  box-shadow:
    0 4px 18px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.global-announcement-content {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  max-width: min(56rem, calc(100% - 3rem));
  text-align: left;
}

.global-announcement-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.65rem;
  height: 1.65rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1;
}

#global-announcement-text {
  flex: 0 1 auto;
  min-width: 0;
}

.global-announcement-banner[data-level="warning"] {
  --announce-accent: var(--spotlight);
  color: #fff8e8;
}

.global-announcement-banner[data-level="warning"] .global-announcement-icon {
  background: rgba(255, 255, 255, 0.2);
}

.global-announcement-banner[data-level="error"] {
  --announce-accent: var(--error);
  color: #fff0f0;
}

.global-announcement-banner[data-level="error"] .global-announcement-icon {
  font-size: 0.82rem;
  background: rgba(255, 255, 255, 0.18);
}

.global-announcement-banner[hidden] {
  display: none !important;
}

.global-announcement-dismiss {
  position: absolute;
  right: 0.65rem;
  top: 50%;
  transform: translateY(-50%);
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.18);
  color: inherit;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  opacity: 0.92;
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    opacity 0.15s ease;
}

.global-announcement-dismiss:hover {
  background: rgba(0, 0, 0, 0.32);
  border-color: rgba(255, 255, 255, 0.45);
  opacity: 1;
}

[data-theme="light"] .global-announcement-banner {
  box-shadow:
    0 3px 14px rgba(26, 26, 46, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.65);
}

[data-theme="light"] .global-announcement-banner,
[data-theme="light"] .global-announcement-banner[data-level="info"] {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--announce-accent) 16%, #fff) 0%,
    color-mix(in srgb, var(--announce-accent) 9%, #fff) 100%
  );
  color: color-mix(in srgb, var(--announce-accent) 72%, #1a1a2e);
  border-bottom-color: color-mix(in srgb, var(--announce-accent) 42%, var(--border));
}

[data-theme="light"] .global-announcement-icon {
  background: color-mix(in srgb, var(--announce-accent) 18%, #fff);
  color: color-mix(in srgb, var(--announce-accent) 80%, #1a1a2e);
}

[data-theme="light"] .global-announcement-banner[data-level="warning"] {
  color: #6b4a08;
}

[data-theme="light"] .global-announcement-banner[data-level="warning"] .global-announcement-icon {
  background: rgba(232, 168, 56, 0.28);
  color: #6b4a08;
}

[data-theme="light"] .global-announcement-banner[data-level="error"] {
  color: #8f1f1f;
}

[data-theme="light"] .global-announcement-banner[data-level="error"] .global-announcement-icon {
  background: rgba(255, 107, 107, 0.22);
  color: #8f1f1f;
}

[data-theme="light"] .global-announcement-dismiss {
  border-color: color-mix(in srgb, var(--announce-accent) 28%, var(--border));
  background: rgba(255, 255, 255, 0.55);
  color: inherit;
}

[data-theme="light"] .global-announcement-dismiss:hover {
  background: rgba(255, 255, 255, 0.85);
  border-color: color-mix(in srgb, var(--announce-accent) 45%, var(--border));
}

.app-shell {
  display: flex;
  align-items: stretch;
  min-height: 100vh;
  position: relative;
  z-index: 1;
}

.library-sidebar {
  flex: 0 0 auto;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  align-self: flex-start;
  position: sticky;
  top: 0;
  height: 100vh;
  max-height: 100vh;
  min-height: 0;
  background: var(--panel);
  border-right: 1px solid var(--border);
  transition: width 0.2s ease;
  width: 17.5rem;
  overflow: hidden;
  max-width: 17.5rem;
  z-index: 40;
}

.library-sidebar.collapsed {
  width: 2.75rem;
  max-width: 2.75rem;
  min-width: 2.75rem;
}

.library-sidebar[hidden] {
  display: none !important;
}

.library-sidebar-rail {
  flex: 0 0 2.75rem;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  align-self: stretch;
  min-width: 2.75rem;
  border-right: 1px solid var(--border);
}

.library-sidebar-toggle {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0.35rem;
  padding: 0.75rem 0.25rem;
  border: none;
  border-right: none;
  background: rgba(0, 0, 0, 0.15);
  color: var(--muted);
  cursor: pointer;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  min-width: 2.75rem;
  min-height: 2.75rem;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  position: relative;
  z-index: 53;
}

.library-sidebar-pin {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  margin-right: 0.35rem;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--muted);
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  align-self: center;
}

.library-sidebar-pin svg {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.library-sidebar-pin:hover {
  color: var(--text);
  background: rgba(79, 140, 255, 0.12);
  border-color: rgba(79, 140, 255, 0.45);
}

.library-sidebar-pin[aria-pressed="true"] {
  color: var(--accent, #4f8cff);
  background: rgba(79, 140, 255, 0.16);
  border-color: rgba(79, 140, 255, 0.45);
}

.library-sidebar-pin:focus-visible {
  outline: 2px solid rgba(79, 140, 255, 0.55);
  outline-offset: -2px;
}

@media (pointer: coarse) {
  .library-sidebar-rail {
    flex-basis: 3rem;
    min-width: 3rem;
  }

  .library-sidebar-toggle {
    min-width: 3rem;
    min-height: 3rem;
  }

  .library-sidebar.collapsed {
    width: 3rem;
    max-width: 3rem;
    min-width: 3rem;
  }
}

.library-sidebar-toggle:hover {
  color: var(--text);
  background: rgba(79, 140, 255, 0.1);
}

.library-toggle-icon {
  font-size: 1rem;
  line-height: 1;
}

.library-toggle-icon::before {
  content: "▸";
}

.library-sidebar:not(.collapsed) .library-toggle-icon::before {
  content: "◂";
}

.library-sidebar.collapsed .library-toggle-label {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: rotate(180deg);
}

.library-sidebar-inner {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  height: 100%;
  max-height: 100%;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.sidebar-sections-scroll {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.sidebar-sections-scroll::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

/* Listen keeps the library rail independently scrollable; pin it to the
   viewport so page scrolling cannot unstick or clip it near document edges. */
body.sidebar-drawer-view.library-sidebar-drawer-mode.library-sidebar-collapsed,
body.sidebar-drawer-view.library-sidebar-drawer-mode:has(.library-sidebar.collapsed) {
  --library-sidebar-width: 0rem;
}

body.sidebar-drawer-view.library-sidebar-drawer-mode .library-sidebar.collapsed {
  width: 0 !important;
  max-width: 0 !important;
  min-width: 0 !important;
  border-right: none;
  overflow: hidden;
  pointer-events: none;
}

body.sidebar-drawer-view.library-sidebar-drawer-mode .library-sidebar.collapsed .library-sidebar-rail,
body.sidebar-drawer-view.library-sidebar-drawer-mode .library-sidebar.collapsed .library-sidebar-inner {
  display: none !important;
}

body.sidebar-drawer-view.library-sidebar-drawer-mode .library-sidebar:not(.collapsed) {
  box-shadow: 12px 0 32px color-mix(in srgb, #000 35%, transparent);
}

body.sidebar-drawer-view.library-sidebar-drawer-mode.library-sidebar-collapsed .app-shell.sidebar-drawer-shell,
body.sidebar-drawer-view.library-sidebar-drawer-mode:has(.library-sidebar.collapsed) .app-shell.sidebar-drawer-shell {
  padding-left: 0;
}

.app-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 0.45rem 0.65rem;
  position: sticky;
  top: var(--offline-chrome-top, 0);
  z-index: 120;
  padding: 0.55rem 0 0.65rem;
  margin-bottom: var(--space-md);
  background: color-mix(in srgb, var(--bg) 90%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
}

body.wizard-import-flow .app-header {
  row-gap: 0.85rem;
}

body.sidebar-drawer-view .app-shell.sidebar-drawer-shell {
  padding-left: var(--library-sidebar-width, 17.5rem);
}

body.sidebar-drawer-view:has(.library-sidebar.collapsed),
body.sidebar-drawer-view.library-sidebar-collapsed {
  --library-sidebar-width: 2.75rem;
}

body.sidebar-drawer-view:has(.library-sidebar.collapsed) .app-shell.sidebar-drawer-shell,
body.sidebar-drawer-view.library-sidebar-collapsed .app-shell.sidebar-drawer-shell {
  padding-left: var(--library-sidebar-width, 2.75rem);
}

@media (pointer: coarse) {
  body.sidebar-drawer-view:has(.library-sidebar.collapsed),
  body.sidebar-drawer-view.library-sidebar-collapsed {
    --library-sidebar-width: 3rem;
  }
}

body.sidebar-drawer-view .app-shell.sidebar-drawer-shell .library-sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  top: var(--offline-chrome-top, 0px);
  height: calc(100dvh - var(--offline-chrome-top, 0px));
  max-height: calc(100dvh - var(--offline-chrome-top, 0px));
  z-index: 20;
}

body.offline-shell-status-visible .library-sidebar,
body.offline-mode-banner-visible .library-sidebar,
body.global-announcement-visible .library-sidebar,
body.offline-has-downloads .library-sidebar,
html.standalone-web-app .library-sidebar {
  z-index: 52;
}

body.sidebar-drawer-view.offline-shell-status-visible .app-shell.sidebar-drawer-shell .library-sidebar,
body.sidebar-drawer-view.offline-mode-banner-visible .app-shell.sidebar-drawer-shell .library-sidebar,
body.sidebar-drawer-view.global-announcement-visible .app-shell.sidebar-drawer-shell .library-sidebar,
body.sidebar-drawer-view.offline-has-downloads .app-shell.sidebar-drawer-shell .library-sidebar,
html.standalone-web-app body.sidebar-drawer-view .app-shell.sidebar-drawer-shell .library-sidebar {
  z-index: 52;
}

.app-shell:not(.sidebar-drawer-shell) .sidebar-drawer-only {
  display: none !important;
}

.app-shell:not(.sidebar-on-listen) .sidebar-listen-only {
  display: none !important;
}

.library-sidebar.collapsed .library-sidebar-inner {
  display: none !important;
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  flex: 0 0 0 !important;
}

body.sidebar-drawer-view .app-shell.sidebar-drawer-shell .library-sidebar.collapsed {
  width: var(--library-sidebar-width, 2.75rem);
  max-width: var(--library-sidebar-width, 2.75rem);
  min-width: var(--library-sidebar-width, 2.75rem);
}

.app {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 960px;
  margin: 0 auto;
  padding: 1rem 1.5rem 3rem;
  width: 100%;
}

.app-header-leading {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-width: 0;
}

.app-header-brand {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-width: 0;
  max-width: 100%;
}

.app-logo {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: 9px;
  transform: translateY(-3px);
}

.app-header-titles {
  display: flex;
  flex-wrap: nowrap;
  align-items: baseline;
  gap: 0.38rem;
  min-width: 0;
  white-space: nowrap;
}

.app-header-titles h1 {
  margin: 0;
  font-size: 1.02rem;
  font-weight: 650;
  line-height: 1.25;
}

.app-brand-wordmark {
  font-family: "Playfair Display", "Cormorant Garamond", Georgia, "Times New Roman", serif;
  font-size: 1.18rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.15;
}

.app-brand-wordmark-table {
  color: color-mix(in srgb, var(--text) 92%, var(--muted) 8%);
}

.app-brand-wordmark-read {
  color: color-mix(in srgb, var(--spotlight) 72%, var(--text) 28%);
  font-weight: 700;
}

.app-header-titles .subtitle {
  display: inline;
  margin: 0;
  font-size: 0.88rem;
  font-weight: 500;
  line-height: 1.25;
  color: var(--muted);
  white-space: nowrap;
}

.app-header-titles .subtitle::before {
  content: "·";
  margin-right: 0.38rem;
  color: color-mix(in srgb, var(--muted) 72%, transparent);
}

.app-header-actions {
  grid-column: 3;
  grid-row: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  flex-shrink: 0;
}

.app-header > .steps-wrap,
.app-header > .steps,
.app-header > .pack-cast-edit-banner {
  grid-column: 1 / -1;
}

.wizard-back-home {
  display: none;
  align-items: center;
  gap: 0.35rem;
  margin-right: 0.5rem;
  padding: 0.38rem 0.85rem 0.38rem 0.55rem;
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 12%, var(--panel));
  color: var(--text);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    transform 0.12s ease;
}

.wizard-back-home svg {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  color: var(--accent);
}

.wizard-back-home:hover {
  background: color-mix(in srgb, var(--accent) 22%, var(--panel));
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
}

.wizard-back-home:active {
  transform: translateX(-1px);
}

body:not(.wizard-step-home) .wizard-back-home:not([hidden]) {
  display: inline-flex;
}

.wizard-new-document-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
  padding: 0.9rem 1.1rem;
  border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--border));
  border-radius: var(--radius-lg, 0.75rem);
  background: color-mix(in srgb, var(--accent) 7%, var(--panel));
}

.wizard-new-document-cta-text {
  min-width: 0;
}

.wizard-new-document-cta-title {
  margin: 0 0 0.15rem;
  font-weight: 650;
  color: var(--text);
}

.wizard-new-document-cta-sub {
  margin: 0;
  font-size: 0.88rem;
  color: var(--muted);
}

.wizard-new-document-cta button {
  flex-shrink: 0;
}

body:not(.wizard-import-flow) #wizard-steps-nav {
  display: none !important;
}

.app-account-wrap,
.app-operator-wrap {
  position: relative;
}

.app-account-wrap[hidden],
.app-operator-wrap[hidden] {
  display: none !important;
}

.app-account-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 14%, var(--panel));
  color: var(--text);
  cursor: pointer;
  font: inherit;
  padding: 0;
}

.app-account-btn:hover,
.app-account-btn[aria-expanded="true"] {
  color: var(--text);
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
  background: color-mix(in srgb, var(--accent) 22%, var(--panel));
}

.app-account-initials {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  line-height: 1;
  text-transform: uppercase;
  user-select: none;
}

.app-operator-btn svg {
  width: 1.15rem;
  height: 1.15rem;
}

.app-account-menu {
  position: absolute;
  top: calc(100% + 0.35rem);
  right: 0;
  z-index: 1220;
  width: min(16.5rem, calc(100vw - 2rem));
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--panel);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.38);
  overflow: hidden;
}

.app-account-menu[hidden] {
  display: none !important;
}

.app-account-menu-header {
  padding: 0.85rem 1rem 0.65rem;
  border-bottom: 1px solid var(--border);
}

.app-account-menu-email {
  margin: 0;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text);
  word-break: break-word;
}

.app-account-menu-plan {
  margin: 0.2rem 0 0;
  font-size: 0.75rem;
}

.app-account-menu-list {
  list-style: none;
  margin: 0;
  padding: 0.35rem 0;
}

.app-account-menu-item {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 0.55rem 1rem;
  border: none;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 0.84rem;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.app-account-menu-item:hover,
.app-account-menu-item:focus-visible {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  outline: none;
}

.app-account-menu-item.is-danger {
  color: color-mix(in srgb, #e07070 88%, var(--text));
}

.app-account-menu-divider {
  height: 1px;
  margin: 0.35rem 0;
  background: var(--border);
}

.theme-toggle {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  background: var(--panel);
}

.theme-toggle button {
  border: none;
  background: transparent;
  color: var(--muted);
  padding: 0.35rem 0.55rem;
  font-size: 0.78rem;
  cursor: pointer;
}

.theme-toggle button.is-active {
  background: rgba(79, 140, 255, 0.18);
  color: var(--text);
  font-weight: 600;
}

.header-plan-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.28rem 0.55rem;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--muted);
  white-space: nowrap;
}

.header-plan-pill[hidden] {
  display: none !important;
}

.header-plan-pill--trial {
  color: color-mix(in srgb, var(--accent) 88%, var(--text));
  border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
  background: color-mix(in srgb, var(--accent) 12%, var(--panel));
}

.header-plan-pill--standard {
  color: color-mix(in srgb, var(--spotlight) 80%, var(--text));
  border-color: color-mix(in srgb, var(--spotlight) 40%, var(--border));
  background: color-mix(in srgb, var(--spotlight) 14%, var(--panel));
}

.header-plan-pill--pro {
  color: #2f2410;
  border: 1px solid #9a7a3a;
  background:
    linear-gradient(
      108deg,
      transparent 28%,
      rgba(255, 255, 255, 0.28) 46%,
      rgba(255, 255, 255, 0.06) 54%,
      transparent 70%
    ),
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.14) 0%,
      rgba(255, 255, 255, 0) 38%
    ),
    linear-gradient(
      165deg,
      #d4bc82 0%,
      #c4a05a 18%,
      #a67c38 45%,
      #8a6428 72%,
      #6e4f1e 100%
    );
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.28),
    0 2px 8px rgba(100, 72, 32, 0.22),
    inset 0 1px 0 rgba(255, 248, 220, 0.35);
  text-shadow: none;
}

.header-plan-pill--expired {
  color: color-mix(in srgb, #e8a040 90%, var(--text));
  border-color: color-mix(in srgb, #e8a040 45%, var(--border));
  background: color-mix(in srgb, #e8a040 14%, var(--panel));
}

.steps-wrap {
  flex: 1 1 100%;
}

.steps {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.steps-wide .step-tab {
  flex: 1 1 auto;
  min-width: 5.5rem;
  font-size: 0.78rem;
  padding: 0.45rem 0.35rem;
}

.step-tab {
  flex: 1;
  min-width: 7rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel);
  color: var(--muted);
  cursor: pointer;
  font-size: 0.85rem;
}

.step-tab.active {
  border-color: var(--accent);
  color: var(--text);
  background: rgba(79, 140, 255, 0.15);
}

.step-tab:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.panel {
  display: none;
  margin-top: 1.5rem;
}

.panel.active {
  display: block;
}

h2 {
  margin: 0 0 0.5rem;
}

.panel-title {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0 0 1rem;
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.25;
}

.panel-title-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 10px;
  background: rgba(79, 140, 255, 0.12);
  border: 1px solid rgba(79, 140, 255, 0.28);
  color: var(--accent);
}

.panel-title-icon svg {
  width: 1.25rem;
  height: 1.25rem;
}

#step-5 .panel-title-icon.is-processing svg {
  animation: process-title-spin 1.32s linear infinite;
  transform-origin: center;
}

@keyframes process-title-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  #step-5 .panel-title-icon.is-processing svg {
    animation: process-title-pulse 1.68s ease-in-out infinite;
  }

  @keyframes process-title-pulse {
    0%,
    100% {
      opacity: 0.45;
    }

    50% {
      opacity: 1;
    }
  }
}

.panel-title + .lead {
  margin-top: -0.15rem;
  margin-bottom: 1.5rem;
  max-width: 42rem;
  line-height: 1.55;
}

.panel-cast .cast-panel-header + .lead {
  margin-top: 0;
  margin-bottom: 1.15rem;
}

.panel-cast .cast-layout {
  margin-top: 0;
}

#step-5 .panel-title + .process-hint,
#step-5 .panel-title + .lead {
  margin-bottom: 1.25rem;
}

#step-5 .progress-bar {
  margin: 1.25rem 0 1.5rem;
}

#step-5 .process-progress-stack {
  margin: 1rem 0 0.6rem;
}

#step-5 .process-progress-group + .process-progress-group {
  margin-top: 0.45rem;
}

#step-5 .process-stage-label {
  margin: 0 0 0.25rem;
}

#step-5 #process-validation-group .progress-bar {
  margin-top: 0.55rem;
}

#progress-fill-validation {
  height: 100%;
  background: var(--accent);
  transition: width 0.3s ease;
}

.lead {
  color: var(--muted);
  margin: 0 0 1.25rem;
}

.file-drop {
  display: block;
  padding: 2rem;
  border: 2px dashed var(--border);
  border-radius: 12px;
  text-align: center;
  cursor: pointer;
  margin-bottom: 1.5rem;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.file-drop:hover {
  border-color: rgba(79, 140, 255, 0.45);
  background: rgba(79, 140, 255, 0.04);
}

.file-drop input {
  display: none;
}

.file-drop.is-slot-locked {
  pointer-events: none;
  cursor: not-allowed;
  opacity: 0.65;
  border-color: var(--border);
  background: color-mix(in srgb, var(--text) 4%, transparent);
}

.scan-layout-fieldset {
  border: 0;
  margin: 0 0 0.85rem;
  padding: 0;
}

.scan-layout-legend {
  font-size: 0.82rem;
  color: var(--muted);
  margin-bottom: 0.45rem;
  padding: 0;
}

.scan-layout-options {
  display: grid;
  gap: 0.55rem;
}

@media (min-width: 640px) {
  .scan-layout-options {
    grid-template-columns: 1fr 1fr;
  }
}

.scan-layout-fieldset.is-slot-locked {
  opacity: 0.72;
  pointer-events: none;
}

.scan-actions {
  display: grid;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

@media (min-width: 640px) {
  .scan-actions {
    grid-template-columns: 1fr 1fr;
  }
}

.scan-actions .file-drop {
  margin-bottom: 0;
}

.scan-page-list {
  list-style: none;
  margin: 0 0 0.75rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.cloud-drive-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 0.75rem;
  margin-bottom: 0.65rem;
}

.cloud-drive-toolbar-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.cloud-drive-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.35rem;
  font-size: 0.92em;
}

.cloud-drive-breadcrumb button {
  background: none;
  border: none;
  color: var(--accent, #785aff);
  cursor: pointer;
  padding: 0;
  font: inherit;
}

.cloud-drive-breadcrumb button:hover {
  text-decoration: underline;
}

.cloud-drive-breadcrumb-sep {
  opacity: 0.55;
}

.cloud-drive-help {
  margin-bottom: 0.65rem;
}

.cloud-drive-selected {
  font-weight: 600;
}

.cloud-drive-file-item {
  display: flex;
  align-items: stretch;
  gap: 0.35rem;
}

.cloud-drive-select-mark {
  flex: 0 0 auto;
  align-self: center;
  width: 1.05rem;
  height: 1.05rem;
  margin-left: 0.1rem;
  border: 2px solid var(--text-muted, rgba(255, 255, 255, 0.45));
  border-radius: 999px;
  box-sizing: border-box;
}

.cloud-drive-file-item.is-selected .cloud-drive-select-mark {
  border-color: var(--accent, #785aff);
  background: radial-gradient(circle at center, var(--accent, #785aff) 0 38%, transparent 40%);
}

.cloud-drive-file-item .cloud-drive-file-btn {
  flex: 1;
  min-width: 0;
}

.cloud-drive-dismiss-btn {
  flex: 0 0 auto;
  align-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 1px solid rgba(232, 93, 93, 0.55);
  border-radius: 999px;
  background: transparent;
  color: #e85d5d;
  cursor: pointer;
}

.cloud-drive-dismiss-btn:hover {
  color: #ff8a8a;
  border-color: #e85d5d;
  background: rgba(232, 93, 93, 0.14);
}

.cloud-drive-dismiss-btn svg {
  width: 0.95rem;
  height: 0.95rem;
}

.cloud-drive-file-item.is-folder .cloud-drive-file-btn {
  border-style: dashed;
}

.cloud-drive-file-kind {
  font-size: 0.82em;
  opacity: 0.8;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.cloud-drive-file-list {
  list-style: none;
  margin: 0 0 0.75rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  max-height: min(42vh, 22rem);
  overflow: auto;
}

.cloud-drive-file-btn {
  width: 100%;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--border, rgba(255, 255, 255, 0.12));
  border-radius: 0.55rem;
  background: var(--surface-2, rgba(255, 255, 255, 0.04));
  color: inherit;
  cursor: pointer;
}

.cloud-drive-file-item.is-selected .cloud-drive-file-btn {
  border-color: var(--accent, #785aff);
  box-shadow: 0 0 0 1px var(--accent, #785aff);
}

.cloud-drive-file-name {
  font-weight: 600;
}

.cloud-drive-file-meta {
  font-size: 0.85em;
  color: var(--text-muted, var(--text));
  opacity: 0.85;
}

.scan-page-item {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.45rem 0.55rem;
  border: 1px solid var(--border, rgba(255, 255, 255, 0.12));
  border-radius: 999px;
  background: var(--surface-2, rgba(255, 255, 255, 0.04));
  cursor: grab;
}

.scan-page-item.is-dragging {
  opacity: 0.55;
}

.scan-page-item.is-drop-target {
  border-color: var(--accent, #785aff);
  box-shadow: 0 0 0 1px var(--accent, #785aff);
}

.scan-page-grip {
  color: var(--text-muted, var(--text));
  font-size: 0.75rem;
  letter-spacing: -0.08em;
  user-select: none;
}

.scan-page-thumb {
  width: 2.4rem;
  height: 2.4rem;
  object-fit: cover;
  border-radius: 0.35rem;
  flex: 0 0 auto;
  background: rgba(0, 0, 0, 0.08);
}

.scan-page-label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.92rem;
  color: var(--text);
}

.scan-page-remove {
  flex: 0 0 auto;
  width: 1.75rem;
  height: 1.75rem;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--text-muted, var(--text));
  font-size: 0.95rem;
  line-height: 1;
  cursor: pointer;
}

.scan-page-remove:hover {
  background: rgba(220, 70, 70, 0.15);
  color: #ff8a8a;
}

.is-slot-locked .scan-page-item {
  cursor: default;
}

.is-slot-locked .scan-page-remove,
.is-slot-locked .scan-page-grip {
  display: none;
}

.pro-badge {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.1rem 0.35rem;
  border-radius: 4px;
  background: rgba(120, 90, 255, 0.2);
  color: var(--accent, #785aff);
  vertical-align: middle;
  margin-left: 0.25rem;
}

.radio-card.is-pro-locked {
  opacity: 0.72;
}

.scan-video-recorder {
  margin-bottom: 1rem;
  border-radius: 12px;
  overflow: hidden;
  background: #000;
}

.scan-video-preview-wrap {
  position: relative;
}

.scan-video-recorder video {
  display: block;
  width: 100%;
  max-height: 280px;
  object-fit: contain;
}

.scan-video-live-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.scan-video-page-count {
  position: absolute;
  top: 0.65rem;
  left: 0.65rem;
  padding: 0.25rem 0.55rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  background: rgba(0, 0, 0, 0.62);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.scan-video-capture-flash {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(0.92);
  padding: 0.55rem 1rem;
  border-radius: 999px;
  font-size: 0.95rem;
  font-weight: 700;
  color: #fff;
  background: rgba(46, 160, 67, 0.92);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.35);
  opacity: 0;
}

.scan-video-capture-flash.is-visible {
  animation: scan-video-capture-pop 1.1s ease-out forwards;
}

.scan-video-recorder.is-stable-hold video {
  outline: 2px solid rgba(79, 140, 255, 0.55);
  outline-offset: -2px;
}

@keyframes scan-video-capture-pop {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.85);
  }
  18% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.04);
  }
  70% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1);
  }
}

.scan-video-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: stretch;
  margin-bottom: 0.75rem;
}

.scan-video-actions .file-drop {
  flex: 1 1 200px;
  margin-bottom: 0;
  padding: 1rem;
}

.scan-video-checklist {
  margin: 0 0 1rem 1.1rem;
  padding: 0;
  line-height: 1.45;
}

.scan-video-checklist-ack {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
  margin-bottom: 1rem;
  font-size: 0.92rem;
}

.dictation-recorder {
  margin-bottom: 0.75rem;
  padding: 0.65rem 0.85rem;
  border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.12));
  border-radius: 0.5rem;
}

.dictation-recorder-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
}

.dictation-recorder-leading {
  display: inline-flex;
  align-items: baseline;
  gap: 0.6rem;
  min-width: 0;
}

.dictation-record-status.is-transcribing {
  color: var(--accent, #7eb8ff);
}

#btn-dictation-transcribe.is-busy {
  opacity: 0.85;
  cursor: wait;
}

#btn-dictation-confirm.is-confirmed {
  border-color: var(--success, #5cb87a);
  color: var(--success, #5cb87a);
}

#dictation-hint.is-ok {
  color: var(--success, #5cb87a);
}

.dictation-timer {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  font-size: 1.1rem;
}

.dictation-recorder-actions {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
}

.dictation-transport-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  padding: 0;
  border-radius: 999px;
  border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.18));
  background: rgba(255, 255, 255, 0.05);
  color: var(--text);
  cursor: pointer;
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    transform 0.1s ease;
}

.dictation-transport-btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.28);
}

.dictation-transport-btn[hidden] {
  display: none !important;
}

.dictation-transport-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

.dictation-transport-btn.dictation-transport-record.is-active {
  transform: translateY(1px);
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.35);
  background: rgba(229, 57, 53, 0.34);
  border-color: rgba(229, 57, 53, 0.88);
}

.dictation-transport-btn.dictation-transport-record.is-active .dictation-transport-glyph-record {
  background: #c62828;
}

.dictation-transport-btn.dictation-transport-record {
  border-color: rgba(229, 57, 53, 0.45);
  background: rgba(229, 57, 53, 0.12);
}

.dictation-transport-btn.dictation-transport-record:hover:not(:disabled) {
  background: rgba(229, 57, 53, 0.22);
  border-color: rgba(229, 57, 53, 0.65);
}

.dictation-transport-glyph {
  width: 1rem;
  height: 1rem;
  display: block;
}

.dictation-transport-pause-resume .dictation-transport-icon {
  display: none;
  align-items: center;
  justify-content: center;
}

.dictation-transport-pause-resume:not(.is-paused) .dictation-transport-icon:first-child {
  display: inline-flex;
}

.dictation-transport-pause-resume.is-paused .dictation-transport-icon-resume {
  display: inline-flex;
}

.dictation-transport-glyph-record {
  width: 0.85rem;
  height: 0.85rem;
  border-radius: 50%;
  background: #e53935;
}

.dictation-transport-btn.dictation-transport-text {
  width: auto;
  min-width: 2.1rem;
  padding: 0 0.55rem;
  border-radius: 6px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.dictation-upload.file-drop {
  margin-bottom: 0;
}

.dictation-upload-inline.file-drop {
  display: inline-flex;
  align-items: center;
  padding: 0.35rem 0.65rem;
  border-width: 1px;
  border-style: dashed;
  border-radius: 6px;
  font-size: 0.85rem;
  margin: 0;
  text-align: left;
}

.dictation-all-lead {
  margin: 0 0 0.5rem;
}

.dictation-transcript-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.85rem;
  margin-bottom: 0.35rem;
}

.dictation-transcript-header-actions {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  margin-left: auto;
}

.dictation-transcript-title {
  font-weight: 600;
}

.dictation-transcript-scope {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem 1rem;
}

.dictation-scope-option {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.9rem;
  color: var(--muted);
  cursor: pointer;
}

.dictation-scope-option:has(input:checked) {
  color: var(--text);
}

.dictation-scope-option input {
  margin: 0;
}

.dictation-transcript-tabs {
  display: inline-flex;
  gap: 0.25rem;
  padding: 0.2rem;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.12));
}

.dictation-preview-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.75rem;
  border-radius: 6px;
  border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.12));
  background: rgba(255, 255, 255, 0.04);
  color: var(--muted);
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition:
    background 0.15s ease,
    color 0.15s ease,
    border-color 0.15s ease;
}

.dictation-preview-btn:hover:not(:disabled) {
  color: var(--text);
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
}

.dictation-preview-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.dictation-preview-modal-body {
  min-height: 8rem;
  max-height: min(60vh, 28rem);
  overflow: auto;
  padding: 0.85rem 1rem;
  border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.12));
  border-radius: 0.5rem;
  background: rgba(0, 0, 0, 0.18);
  font-size: 0.95rem;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
}

.dictation-preview-modal-body .dictation-word-quoted {
  color: var(--accent, #9ec5ff);
}

.dictation-transcript-tabs button {
  padding: 0.45rem 0.9rem;
  border-radius: 6px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted);
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition:
    background 0.15s ease,
    color 0.15s ease,
    border-color 0.15s ease;
}

.dictation-transcript-tabs button:hover:not(:disabled) {
  color: var(--text);
  background: rgba(255, 255, 255, 0.04);
}

.dictation-transcript-tabs button[aria-selected="true"] {
  background: var(--accent, #4f8cff);
  color: #fff;
  border-color: var(--accent, #4f8cff);
}

.dictation-transcript-tabs button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.dictation-transcript-panel[hidden] {
  display: none !important;
}

.dictation-transcript-panel .dictation-transcript-preview {
  margin-bottom: 0;
}

.dictation-preview-empty {
  margin: 0;
  padding: 0.25rem 0;
}

.dictation-transcript-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  margin-bottom: 0.5rem;
}

.dictation-quote-hint kbd {
  font-family: inherit;
  font-size: 0.8em;
  padding: 0.1em 0.35em;
  border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.2));
  border-radius: 0.25rem;
  background: rgba(255, 255, 255, 0.06);
}

.dictation-transcript-preview {
  min-height: 12rem;
  max-height: 18rem;
  overflow: auto;
  padding: 0.75rem;
  margin-bottom: 0.5rem;
  border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.12));
  border-radius: 0.5rem;
  font-size: 0.95rem;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
  cursor: text;
}

.dictation-transcript-preview:focus {
  outline: 2px solid var(--accent, #7eb8ff);
  outline-offset: 1px;
}

.dictation-transcript-preview .dictation-word {
  cursor: pointer;
  border-radius: 0.15rem;
  padding: 0 0.05em;
}

.dictation-transcript-preview .dictation-word-merge-picked {
  background: rgba(126, 184, 255, 0.35);
  outline: 1px solid var(--accent, #7eb8ff);
}

.dictation-transcript-preview .dictation-word-quoted {
  color: var(--accent, #9ec5ff);
}

.dictation-transcript-preview .dictation-quote-mark {
  color: var(--muted);
  user-select: none;
}

.chapter-images-collapsible {
  border: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
  border-radius: var(--radius);
  margin: 0 0 1.35rem;
  background: color-mix(in srgb, var(--panel) 88%, var(--bg));
  overflow: hidden;
}

[data-theme="light"] .chapter-images-collapsible {
  background: color-mix(in srgb, var(--panel) 100%, var(--bg));
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.chapter-images-summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.75rem 0.9rem;
  user-select: none;
}

.chapter-images-summary::-webkit-details-marker {
  display: none;
}

.chapter-images-summary::marker {
  content: "";
}

.chapter-images-summary:hover {
  background: rgba(79, 140, 255, 0.06);
}

.chapter-images-chevron {
  flex-shrink: 0;
  width: 1rem;
  font-size: 1.1rem;
  line-height: 1;
  color: var(--accent);
  transition: transform 0.15s ease;
}

.chapter-images-collapsible[open] .chapter-images-chevron {
  transform: rotate(90deg);
}

.chapter-images-summary-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.chapter-images-summary-text strong {
  font-size: 0.95rem;
}

.chapter-images-summary-text .meta {
  margin: 0;
  line-height: 1.4;
}

.chapter-images-collapsible.is-coming-soon .chapter-images-summary {
  cursor: default;
  pointer-events: none;
}

.chapter-images-collapsible.is-coming-soon .chapter-images-summary:hover {
  background: transparent;
}

.chapter-images-collapsible.is-coming-soon .chapter-images-chevron {
  color: var(--muted);
  transform: none !important;
}

.chapter-images-collapsible.is-coming-soon .chapter-images-summary-text strong {
  color: var(--muted);
}

.chapter-images-fieldset {
  border: none;
  margin: 0;
  padding: 0 0.9rem 0.9rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.chapter-images-option {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  cursor: pointer;
}

.chapter-images-checkbox-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.55rem;
  user-select: none;
}

.chapter-images-checkbox-row input[type="checkbox"] {
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
  margin: 0;
  accent-color: var(--accent, #4f8cff);
  cursor: pointer;
}

.chapter-images-checkbox-title {
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--text);
  line-height: 1.3;
}

.chapter-images-option-hint {
  margin: 0;
  padding-left: 1.55rem;
  line-height: 1.45;
}

.chapter-images-fieldset .stacked-label {
  gap: 0.45rem;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--text);
}

.chapter-images-style,
.chapter-images-engine,
.chapter-images-local-url {
  margin-top: 0;
}

.enhanced-stories-shelf {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.enhanced-story-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.5rem 0.85rem;
  align-items: start;
  padding: 0.75rem 1rem;
  border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.12));
  border-radius: 8px;
  background: var(--surface-raised, rgba(255, 255, 255, 0.03));
  overflow: visible;
}

.enhanced-story-cover-wrap {
  position: relative;
  grid-row: 1 / span 2;
  grid-column: 1;
  align-self: start;
  flex-shrink: 0;
}

.enhanced-story-cover-wrap--has-summary {
  cursor: help;
  outline: none;
}

.enhanced-story-cover-wrap--has-summary:hover,
.enhanced-story-cover-wrap--has-summary:focus-within {
  z-index: 8;
}

.enhanced-story-cover {
  position: relative;
  width: 56px;
  height: 80px;
  border-radius: 5px;
  border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.12));
  overflow: hidden;
  background: linear-gradient(
    145deg,
    color-mix(in srgb, var(--panel, #1a1d24) 70%, var(--bg, #0f1115)) 0%,
    color-mix(in srgb, var(--text, #e8eaed) 8%, var(--panel, #1a1d24)) 100%
  );
  color: color-mix(in srgb, var(--muted, #9aa0a6) 70%, var(--text, #e8eaed));
}

.enhanced-story-cover img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.enhanced-story-cover-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.35rem;
}

.enhanced-story-cover--rich {
  background:
    radial-gradient(
      circle at 30% 20%,
      hsl(var(--cover-placeholder-hue, 220) 42% 38% / 0.55),
      transparent 62%
    ),
    radial-gradient(
      circle at 78% 82%,
      color-mix(in srgb, var(--spotlight) 28%, transparent),
      transparent 58%
    ),
    linear-gradient(
      145deg,
      color-mix(in srgb, var(--panel) 72%, #000 28%),
      color-mix(in srgb, var(--panel) 88%, var(--accent) 12%)
    );
  border: 1px solid color-mix(in srgb, var(--spotlight) 22%, var(--border));
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #fff 8%, transparent),
    0 6px 18px color-mix(in srgb, #000 28%, transparent);
}

.enhanced-story-cover-initials {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: color-mix(in srgb, var(--spotlight) 72%, var(--text));
  text-shadow: 0 2px 10px color-mix(in srgb, #000 45%, transparent);
  pointer-events: none;
}

.enhanced-story-cover-wrap--home .enhanced-story-cover--rich .enhanced-story-cover-initials {
  font-size: 1.55rem;
}

.enhanced-story-cover-placeholder svg {
  width: 70%;
  height: auto;
  opacity: 0.85;
}

.enhanced-story-cover--placeholder .enhanced-story-cover-placeholder {
  position: static;
  width: 100%;
  height: 100%;
}

.enhanced-story-summary-tooltip {
  position: absolute;
  z-index: 20;
  left: calc(100% + 0.65rem);
  top: 0;
  width: min(26rem, calc(100vw - 3rem));
  overflow: visible;
  padding: 0.8rem 0.9rem;
  border-radius: 12px;
  background: var(--surface-elevated, #1e2430);
  border: 1px solid var(--border, rgba(255, 255, 255, 0.14));
  box-shadow:
    0 12px 32px rgba(0, 0, 0, 0.42),
    0 0 0 1px rgba(255, 255, 255, 0.04) inset;
  color: var(--text, #e8eaed);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transform: translateX(6px);
}

.enhanced-story-summary-tooltip--hidden {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: none !important;
  transform: none !important;
}

.enhanced-story-summary-tooltip__hero {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 0.65rem;
}

.enhanced-story-summary-tooltip__hero:last-child {
  margin-bottom: 0;
}

.enhanced-story-summary-tooltip__cover {
  position: relative;
  flex-shrink: 0;
  width: 9.5rem;
  height: 13.5rem;
  border-radius: 8px;
  border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.14));
  overflow: hidden;
  background: linear-gradient(
    145deg,
    color-mix(in srgb, var(--panel, #1a1d24) 70%, var(--bg, #0f1115)) 0%,
    color-mix(in srgb, var(--text, #e8eaed) 8%, var(--panel, #1a1d24)) 100%
  );
  transition:
    width 0.2s ease,
    height 0.2s ease;
}

.enhanced-story-summary-tooltip__cover--zoomable {
  display: block;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  appearance: none;
  -webkit-appearance: none;
  cursor:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Ccircle cx='10' cy='10' r='6.25' fill='none' stroke='%23e8c84a' stroke-width='2.25'/%3E%3Cline x1='14.75' y1='14.75' x2='21.25' y2='21.25' stroke='%23e8c84a' stroke-width='2.75' stroke-linecap='round'/%3E%3C/svg%3E")
      10 10,
    default;
}

.enhanced-story-summary-tooltip__cover--zoomable img {
  pointer-events: none;
  cursor: inherit;
}

.enhanced-story-summary-tooltip__cover--zoomable:hover {
  border-color: color-mix(in srgb, var(--accent, #4f8cff) 45%, var(--border-subtle, rgba(255, 255, 255, 0.14)));
  cursor:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Ccircle cx='10' cy='10' r='6.25' fill='none' stroke='%23e8c84a' stroke-width='2.25'/%3E%3Cline x1='14.75' y1='14.75' x2='21.25' y2='21.25' stroke='%23e8c84a' stroke-width='2.75' stroke-linecap='round'/%3E%3C/svg%3E")
      10 10,
    default;
}

.enhanced-story-summary-tooltip__cover--zoomable.is-zoomed {
  width: 19rem;
  height: 27rem;
  cursor:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Ccircle cx='10' cy='10' r='6.25' fill='none' stroke='%23e8c84a' stroke-width='2.25'/%3E%3Cline x1='7' y1='10' x2='13' y2='10' stroke='%23e8c84a' stroke-width='2' stroke-linecap='round'/%3E%3Cline x1='14.75' y1='14.75' x2='21.25' y2='21.25' stroke='%23e8c84a' stroke-width='2.75' stroke-linecap='round'/%3E%3C/svg%3E")
      10 10,
    default;
}

.enhanced-story-summary-tooltip.is-cover-zoomed:not(.enhanced-story-summary-tooltip--hidden) {
  width: min(30rem, calc(100vw - 2rem));
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.enhanced-story-summary-tooltip--floating:not(.enhanced-story-summary-tooltip--hidden) {
  position: fixed;
  left: var(--tooltip-left, 0);
  top: var(--tooltip-top, 0);
  z-index: 15000;
  transform: none !important;
  overflow: visible;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.enhanced-story-summary-tooltip--floating::before {
  display: none;
}

.enhanced-story-summary-tooltip.is-cover-zoomed .enhanced-story-summary-tooltip__hero {
  flex-direction: column;
  align-items: center;
}

.enhanced-story-summary-tooltip.is-cover-zoomed .enhanced-story-summary-tooltip__header {
  width: 100%;
  text-align: center;
  padding-top: 0;
}

.enhanced-story-summary-tooltip.is-cover-zoomed .enhanced-story-summary-tooltip__highlights {
  display: inline-block;
  text-align: left;
}

.enhanced-story-summary-tooltip__cover img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.enhanced-story-summary-tooltip__cover--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  color: color-mix(in srgb, var(--muted, #9aa0a6) 70%, var(--text, #e8eaed));
}

.enhanced-story-summary-tooltip__cover--placeholder .enhanced-story-cover-placeholder {
  width: 70%;
}

.enhanced-story-summary-tooltip__header {
  flex: 1;
  min-width: 0;
  padding-top: 0.1rem;
}

.enhanced-story-summary-tooltip__title {
  margin: 0;
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--text, #e8eaed);
}

.enhanced-story-summary-tooltip__author {
  margin: 0.28rem 0 0;
  font-size: 0.78rem;
  line-height: 1.35;
  color: var(--muted, #9aa0a6);
  font-weight: 500;
}

.enhanced-story-summary-tooltip__highlights {
  margin: 0.55rem 0 0;
  padding: 0 0 0 1rem;
  font-size: 0.73rem;
  line-height: 1.45;
  color: color-mix(in srgb, var(--text, #e8eaed) 88%, var(--muted, #9aa0a6));
}

.enhanced-story-summary-tooltip__highlights li {
  margin: 0.28rem 0;
}

.enhanced-story-summary-tooltip__highlights li::marker {
  color: var(--accent, #4f8cff);
}

.enhanced-story-summary-tooltip__actions {
  margin: 0.65rem 0 0;
  padding-top: 0.55rem;
  border-top: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.1));
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  align-items: center;
}

.enhanced-story-summary-tooltip__actions .primary,
.enhanced-story-summary-tooltip__actions .secondary {
  min-width: 5.5rem;
  padding: 0.45rem 1.1rem;
  font-size: 0.82rem;
  font-weight: 600;
}

.enhanced-story-summary-tooltip__actions + .enhanced-story-summary-tooltip__body {
  margin-top: 0.55rem;
}

.enhanced-story-summary-tooltip__label {
  margin: 0 0 0.4rem;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted, #9aa0a6);
}

.enhanced-story-summary-tooltip__body {
  margin: 0;
  padding-top: 0.55rem;
  border-top: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.1));
  font-size: 0.8rem;
  line-height: 1.55;
  white-space: pre-wrap;
  font-weight: 400;
  color: color-mix(in srgb, var(--text, #e8eaed) 92%, var(--muted, #9aa0a6));
}

.enhanced-story-summary-tooltip--floating:not(.enhanced-story-summary-tooltip--hidden):hover,
.enhanced-story-cover-wrap--has-summary:not(.enhanced-story-cover-wrap--home):hover .enhanced-story-summary-tooltip:not(.enhanced-story-summary-tooltip--hidden),
.enhanced-story-cover-wrap--has-summary:not(.enhanced-story-cover-wrap--home):focus-within .enhanced-story-summary-tooltip:not(.enhanced-story-summary-tooltip--hidden),
.enhanced-story-cover-wrap--has-summary:has(.is-cover-zoomed) .enhanced-story-summary-tooltip:not(.enhanced-story-summary-tooltip--hidden) {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
  pointer-events: auto;
}

.enhanced-story-summary-tooltip::before {
  content: "";
  position: absolute;
  top: 1.35rem;
  right: 100%;
  border: 7px solid transparent;
  border-right-color: var(--surface-elevated, #1e2430);
  filter: drop-shadow(-1px 0 0 rgba(255, 255, 255, 0.08));
}

.enhanced-story-cover-wrap--sidebar {
  flex-shrink: 0;
  align-self: center;
}

.enhanced-story-cover-wrap--sidebar .enhanced-story-cover {
  width: 2.35rem;
  height: 3.35rem;
  border-radius: 4px;
}

.enhanced-story-cover-wrap--sidebar.enhanced-story-cover-wrap--has-summary {
  cursor: pointer;
  outline: none;
}

.enhanced-story-cover-wrap--sidebar.enhanced-story-cover-wrap--has-summary:hover,
.enhanced-story-cover-wrap--sidebar.enhanced-story-cover-wrap--has-summary:focus-within,
.enhanced-story-cover-wrap--sidebar.enhanced-story-cover-wrap--has-summary.is-summary-open,
.enhanced-story-cover-wrap--has-summary:has(.is-cover-zoomed) {
  z-index: 15000;
}

.enhanced-story-cover-wrap--sidebar .enhanced-story-summary-tooltip {
  pointer-events: none;
}

.enhanced-story-cover-wrap--sidebar .enhanced-story-summary-tooltip:not(.enhanced-story-summary-tooltip--floating) {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.enhanced-story-cover-wrap--sidebar .enhanced-story-summary-tooltip::before {
  display: none;
}

.enhanced-story-cover-wrap--sidebar.is-summary-open .enhanced-story-summary-tooltip--floating:not(.enhanced-story-summary-tooltip--hidden),
.enhanced-story-cover-wrap--sidebar:hover .enhanced-story-summary-tooltip--floating:not(.enhanced-story-summary-tooltip--hidden),
.enhanced-story-cover-wrap--sidebar:focus-within .enhanced-story-summary-tooltip--floating:not(.enhanced-story-summary-tooltip--hidden) {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.enhanced-story-cover-wrap--home.enhanced-story-cover-wrap--has-summary {
  cursor: pointer;
  outline: none;
}

.enhanced-story-cover-wrap--home .enhanced-story-summary-tooltip {
  pointer-events: none;
}

.enhanced-story-cover-wrap--home .enhanced-story-summary-tooltip:not(.enhanced-story-summary-tooltip--floating) {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.enhanced-story-cover-wrap--home .enhanced-story-summary-tooltip::before {
  display: none;
}

.enhanced-story-cover-wrap--home.is-summary-open,
.enhanced-story-cover-wrap--home:has(.is-cover-zoomed) {
  z-index: 15001;
}

.enhanced-story-cover-wrap--home.is-summary-open .enhanced-story-summary-tooltip--floating:not(.enhanced-story-summary-tooltip--hidden) {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.purchases-doc-item--has-cover {
  overflow: visible;
}

.purchases-doc-item--has-cover .library-doc-title-row {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto auto;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 0.2rem;
  row-gap: 0.04rem;
}

.purchases-doc-item--has-cover .enhanced-story-cover-wrap--sidebar {
  grid-column: 1;
  grid-row: 1 / span 2;
  align-self: center;
}

.purchases-doc-item--has-cover .library-doc-title-row > .library-doc-expand-btn {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
}

.purchases-doc-item--has-cover.purchases-doc-item--in-bundle .library-doc-title-row {
  grid-template-columns: auto minmax(0, 1fr) auto auto;
}

.purchases-doc-item--has-cover.purchases-doc-item--in-bundle .library-doc-text-block {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
}

.purchases-doc-item--has-cover.purchases-doc-item--in-bundle .purchases-update-dot,
.purchases-doc-item--has-cover.purchases-doc-item--in-bundle .purchases-update-pill {
  grid-column: 3;
}

.purchases-doc-item--has-cover.purchases-doc-item--in-bundle .library-play-btn {
  grid-column: 4;
}

.purchases-doc-item--has-cover .library-doc-title-row > .library-doc-title {
  grid-column: 3;
  grid-row: 1 / span 2;
  align-self: center;
}

.purchases-doc-item--has-cover .purchases-update-dot,
.purchases-doc-item--has-cover .purchases-update-pill {
  grid-column: 4;
  grid-row: 1 / span 2;
  align-self: center;
  justify-self: center;
}

.purchases-doc-item--has-cover .library-play-btn {
  grid-column: 5;
  grid-row: 1 / span 2;
  align-self: center;
}

.purchases-doc-item--has-cover.is-collapsed .library-doc-title {
  padding: 0.1rem 0.2rem;
}

.enhanced-story-card h3,
.enhanced-story-card-title {
  margin: 0;
  font-size: 1rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.5rem;
}

.enhanced-story-card-body {
  grid-column: 2;
  grid-row: 1 / span 2;
  min-width: 0;
}

.enhanced-story-default-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  border: 1px solid rgba(240, 200, 120, 0.45);
  background: rgba(240, 200, 120, 0.14);
  color: #f0c878;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.3;
}

.enhanced-story-marketing-tags {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.4rem;
}

.enhanced-story-marketing-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.22rem;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  background: color-mix(in srgb, var(--panel) 88%, transparent);
  color: var(--text);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.3;
  white-space: nowrap;
}

.enhanced-story-marketing-pill__icon {
  font-size: 0.95em;
  line-height: 1;
}

.enhanced-story-marketing-pill--gold,
.enhanced-story-marketing-pill--starred,
.enhanced-story-marketing-pill--featured {
  border-color: rgba(240, 200, 120, 0.45);
  background: rgba(240, 200, 120, 0.14);
  color: #f0c878;
}

.enhanced-story-marketing-pill--starred .enhanced-story-marketing-pill__icon {
  color: #ffd56a;
}

.enhanced-story-marketing-pill--purple,
.enhanced-story-marketing-pill--staff-pick {
  border-color: rgba(180, 140, 255, 0.45);
  background: rgba(140, 100, 220, 0.16);
  color: #c9b0ff;
}

.enhanced-story-marketing-pill--green,
.enhanced-story-marketing-pill--on-sale {
  border-color: rgba(100, 220, 140, 0.45);
  background: rgba(70, 180, 110, 0.16);
  color: #8ee0a8;
}

.enhanced-story-marketing-pill--blue,
.enhanced-story-marketing-pill--most-popular {
  border-color: rgba(100, 170, 255, 0.45);
  background: rgba(70, 140, 255, 0.16);
  color: #8ec0ff;
}

.enhanced-story-marketing-pill--teal,
.enhanced-story-marketing-pill--new {
  border-color: rgba(90, 210, 210, 0.45);
  background: rgba(60, 170, 170, 0.16);
  color: #8adede;
}

.enhanced-story-update-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.12rem 0.5rem;
  border-radius: 999px;
  border: 1px solid rgba(100, 170, 255, 0.45);
  background: rgba(70, 140, 255, 0.18);
  color: #8ec0ff;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  cursor: pointer;
  line-height: 1.3;
}

.enhanced-story-update-pill:hover {
  background: rgba(70, 140, 255, 0.3);
  border-color: rgba(120, 185, 255, 0.65);
}

.purchases-doc-list .purchases-update-pill {
  font-size: 0.62rem;
  padding: 0.08rem 0.4rem;
  flex-shrink: 0;
}

.purchases-doc-item .library-doc-title-row {
  align-items: center;
  gap: 0.12rem;
}

.purchases-bundle-group {
  list-style: none;
  margin: 0;
  padding: 0;
  border-bottom: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.08));
}

.purchases-bundle-group:last-child {
  border-bottom: none;
}

.purchases-bundle-header {
  display: flex;
  align-items: stretch;
  gap: 0.15rem;
}

.purchases-bundle-toggle {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex: 1;
  min-width: 0;
  width: auto;
  margin: 0;
  padding: 0.45rem 0.55rem;
  border: 0;
  background: color-mix(in srgb, #e8b84a 5%, transparent);
  color: var(--text);
  font: inherit;
  font-size: 0.74rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  line-height: 1.35;
}

.purchases-bundle-toggle:hover {
  background: color-mix(in srgb, #e8b84a 10%, transparent);
}

.purchases-bundle-toggle.is-open {
  background: color-mix(in srgb, #e8b84a 8%, transparent);
}

.purchases-bundle-toggle .sidebar-section-chevron {
  flex-shrink: 0;
}

.purchases-bundle-title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.purchases-bundle-count {
  flex-shrink: 0;
  font-size: 0.68rem;
  color: var(--muted, #9aa0a6);
}

.purchases-bundle-play-all {
  flex-shrink: 0;
  align-self: center;
  margin: 0 0.35rem 0 0;
  padding: 0.22rem 0.5rem;
  border: 1px solid color-mix(in srgb, #e8b84a 35%, transparent);
  border-radius: 0.35rem;
  background: color-mix(in srgb, #e8b84a 12%, transparent);
  color: var(--text);
  font: inherit;
  font-size: 0.64rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
}

.purchases-bundle-play-all:hover {
  background: color-mix(in srgb, #e8b84a 22%, transparent);
  border-color: color-mix(in srgb, #e8b84a 50%, transparent);
}

.purchases-bundle-play-all:focus-visible {
  outline: 2px solid color-mix(in srgb, #e8b84a 65%, transparent);
  outline-offset: 1px;
}

.purchases-bundle-play-all:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.purchases-bundle-list {
  margin: 0;
  padding: 0 0 0.15rem;
  list-style: none;
}

.purchases-bundle-list .purchases-doc-item {
  padding-left: 0.35rem;
}

.purchases-bundle-list .purchases-doc-item .library-doc-title {
  font-size: 0.78rem;
}

.purchases-bundle-list .purchases-doc-item--in-bundle.is-collapsed .library-doc-title-row {
  align-items: center;
}

.purchases-doc-item--in-bundle .library-play-btn {
  align-self: center;
}

.purchases-doc-item--in-bundle .library-doc-text-block {
  flex: 1;
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 0.12rem;
  row-gap: 0.04rem;
  align-items: center;
}

.purchases-doc-item--in-bundle .library-doc-title-line {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
  align-items: center;
  min-width: 0;
}

.purchases-doc-item--in-bundle .library-doc-title-line .library-doc-expand-btn {
  grid-column: 1;
  flex-shrink: 0;
  margin-right: -0.05rem;
}

.purchases-doc-item--in-bundle .library-doc-title-line .library-doc-title {
  grid-column: 2;
  min-width: 0;
}

.purchases-doc-item--in-bundle .purchases-bundle-position {
  grid-column: 2;
  align-self: start;
}

.purchases-doc-item--has-cover.purchases-doc-item--in-bundle .purchases-bundle-position {
  padding-left: 0.2rem;
}

.library-doc-title-stack {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.04rem;
}

.purchases-bundle-position {
  padding: 0;
  font-size: 0.62rem;
  line-height: 1.25;
  color: var(--muted, #9aa0a6);
  white-space: nowrap;
}

.enhanced-story-card .meta,
.enhanced-story-card-meta {
  margin: 0.15rem 0 0;
}

.enhanced-story-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  grid-column: 1 / -1;
  grid-row: 3;
}

@media (min-width: 520px) {
  .enhanced-story-card {
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto;
    align-items: center;
  }
  .enhanced-story-cover-wrap {
    grid-row: 1;
  }
  .enhanced-story-card-body {
    grid-column: 2;
    grid-row: 1;
  }
  .enhanced-story-actions {
    grid-column: 3;
    grid-row: 1;
    justify-content: flex-end;
  }
}

.scan-video-review-panel {
  max-width: min(920px, 96vw);
  max-height: 90vh;
  overflow: auto;
}

.scan-video-review-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 0.75rem;
  margin: 1rem 0;
}

.scan-video-review-card {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.5rem;
  background: color-mix(in srgb, var(--text) 3%, transparent);
}

.scan-video-review-card.is-excluded {
  opacity: 0.45;
}

.scan-video-review-card img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 6px;
  background: #111;
}

.scan-video-review-card .review-ocr {
  font-size: 0.72rem;
  line-height: 1.3;
  margin: 0.35rem 0;
  color: var(--text-muted, var(--text));
  max-height: 3.6em;
  overflow: hidden;
}

.scan-video-review-card .review-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.scan-video-review-card .review-actions button {
  font-size: 0.72rem;
  padding: 0.15rem 0.35rem;
}

.scan-video-review-warnings {
  margin: 0 0 0.5rem 1rem;
  color: var(--warn, #c90);
  font-size: 0.88rem;
}

.scan-video-review-card .flag-low {
  color: var(--warn, #c90);
  font-size: 0.68rem;
}

.inline-add-page {
  display: inline-block;
  padding: 0.5rem 0.75rem;
  margin: 0;
}

.source-type-fieldset.is-slot-locked .radio-card {
  pointer-events: none;
  cursor: not-allowed;
  opacity: 0.65;
}

.source-type-fieldset.is-slot-locked .radio-card:has(input:checked) {
  opacity: 1;
  border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
}

#step-1.is-slot-locked #url-input,
#step-1.is-slot-locked #paste-text,
#step-1.is-slot-locked #btn-paste-clipboard {
  pointer-events: none;
  opacity: 0.65;
  cursor: not-allowed;
}

.engine-choice {
  border: none;
  padding: 0;
  margin: 0 0 1.5rem;
}

.engine-choice legend {
  margin-bottom: 0.75rem;
  font-weight: 600;
}

.radio-card {
  display: block;
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 0.5rem;
  cursor: pointer;
}

.radio-card:has(input:checked) {
  border-color: var(--accent);
  background: rgba(79, 140, 255, 0.08);
}

.radio-card strong {
  display: block;
}

.radio-card span {
  font-size: 0.85rem;
  color: var(--muted);
}

.ai-preset-fieldset {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.85rem 1rem 0.75rem;
  margin: 0.75rem 0 0;
  background: rgba(79, 140, 255, 0.04);
}

.ai-preset-fieldset legend {
  font-weight: 600;
  padding: 0 0.4rem;
}

.ai-preset-fieldset .radio-card {
  background: var(--bg, transparent);
}

.ai-preset-card {
  display: block;
  padding: 0.85rem 1rem;
  position: relative;
}

/* Hide the radio circle but keep the input in the DOM so clicks on the
   wrapping <label> still toggle selection and form serialisation still
   works. The :has(input:checked) rule on .radio-card paints the
   highlighted border/background. */
.ai-preset-card input[type="radio"] {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

.ai-preset-icon {
  font-size: 1.15rem;
  line-height: 1;
  margin-right: 0.35rem;
  vertical-align: -0.05em;
}

.ai-preset-body {
  display: block;
  min-width: 0;
}

.ai-preset-body strong {
  display: block;
  font-size: 1rem;
}

.ai-preset-tagline {
  display: block;
  margin-top: 0.2rem;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.4;
}

.ai-preset-badge {
  display: inline-block;
  margin-left: 0.45rem;
  padding: 0.05rem 0.55rem;
  border-radius: 999px;
  background: rgba(79, 140, 255, 0.18);
  color: var(--accent);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  vertical-align: middle;
}

.ai-preset-badge-muted {
  background: rgba(255, 180, 60, 0.15);
  color: #c9922e;
}

.analysis-recommended-badge {
  display: inline-block;
  margin-left: 0.45rem;
  padding: 0.05rem 0.55rem;
  border-radius: 999px;
  background: rgba(72, 187, 120, 0.18);
  color: #3d9a66;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  vertical-align: middle;
}

.analysis-heuristic-hint {
  margin: 0.35rem 0 0.85rem;
  max-width: 42rem;
}

.analysis-ai-experimental {
  margin: 0 0 0.75rem;
  padding: 0.65rem 0.85rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(255, 180, 60, 0.04);
}

.analysis-ai-experimental summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--text);
}

.analysis-ai-experimental summary:hover {
  color: var(--accent);
}

.analysis-ai-experimental-intro {
  margin: 0.65rem 0 0.75rem;
  line-height: 1.45;
}

.analysis-ai-engine-choice {
  margin-bottom: 0.65rem;
}

.analysis-engine-body {
  display: block;
}

.analysis-engine-body strong {
  display: block;
}

.analysis-engine-body > span:last-child {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.85rem;
  color: var(--muted);
}

.ai-cost-estimate {
  display: block;
  margin-top: 0.5rem;
  font-style: normal;
  font-weight: 600;
  color: var(--accent);
  font-size: 0.85rem;
}

.ai-cost-estimate[data-state="free"] {
  color: var(--accent);
}

.ai-cost-estimate[data-state="unknown"] {
  color: var(--muted);
  font-weight: 500;
}

.ai-cost-disclaimer {
  margin: 0.5rem 0 0;
  font-size: 0.78rem;
}

.elevenlabs-cost-notice {
  margin: 0.55rem 0 0;
  padding: 0.5rem 0.65rem;
  font-size: 0.78rem;
  line-height: 1.45;
  border-radius: 6px;
  background: rgba(255, 180, 60, 0.1);
  border: 1px solid rgba(255, 180, 60, 0.28);
  color: var(--muted);
}

.ai-preset-details {
  margin-top: 0.45rem;
  font-size: 0.82rem;
}

.ai-preset-details summary {
  cursor: pointer;
  color: var(--muted);
  font-weight: 500;
  padding: 0.15rem 0;
}

.ai-preset-details summary:hover {
  color: var(--accent);
}

.ai-preset-details p {
  margin: 0.4rem 0 0;
}

.ollama-detected-banner {
  margin-bottom: 0.85rem;
  padding: 0.75rem 0.9rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(40, 167, 69, 0.07);
}

.ollama-detected-row {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex-wrap: wrap;
}

.ollama-detected-icon {
  color: #2cb86b;
  font-size: 0.85rem;
  line-height: 1;
}

.ollama-detected-change {
  margin-left: auto;
  font-size: 0.85rem;
}

.ollama-detected-model-label {
  display: block;
  margin-top: 0.55rem;
}

.ollama-detected-model-label select {
  width: 100%;
  margin-top: 0.25rem;
}

.ollama-detected-model-label .meta {
  display: block;
  margin-top: 0.25rem;
}

.link-button {
  background: none;
  border: none;
  padding: 0;
  color: var(--accent);
  cursor: pointer;
  font-size: inherit;
  font-family: inherit;
  text-decoration: underline;
}

.link-button:hover {
  text-decoration: none;
}

.ai-advanced-details {
  margin-top: 0.75rem;
}

.ai-advanced-details summary {
  cursor: pointer;
  color: var(--muted);
  font-weight: 500;
  font-size: 0.88rem;
  padding: 0.15rem 0;
}

.ai-advanced-details summary:hover {
  color: var(--accent);
}

.ai-advanced-details .inline {
  margin-top: 0.5rem;
}

.tts-lead {
  margin-top: 0;
  margin-bottom: 0.75rem;
}

.tts-tier-group {
  border: 0;
  margin: 0 0 1.25rem;
  padding: 0;
}

.tts-tier-group--auto {
  margin-bottom: 1rem;
}

.tts-tier-collapsible {
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  margin: 0 0 0.55rem;
  background: rgba(0, 0, 0, 0.12);
  overflow: hidden;
}

.tts-tier-collapsible[open] {
  margin-bottom: 0.85rem;
}

.tts-tier-summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.7rem 0.85rem;
  user-select: none;
}

.tts-tier-summary::-webkit-details-marker {
  display: none;
}

.tts-tier-summary::marker {
  content: "";
}

.tts-tier-summary:hover {
  background: rgba(79, 140, 255, 0.06);
}

.tts-tier-chevron {
  flex-shrink: 0;
  width: 1rem;
  font-size: 1.1rem;
  line-height: 1;
  color: var(--accent);
  transition: transform 0.15s ease;
}

.tts-tier-collapsible[open] .tts-tier-chevron {
  transform: rotate(90deg);
}

.tts-tier-summary-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.tts-tier-summary-label {
  font-size: 0.95rem;
  font-weight: 700;
}

.tts-tier-summary-hint {
  line-height: 1.35;
  font-size: 0.82rem;
}

.tts-tier-summary-count {
  flex-shrink: 0;
  font-size: 0.78rem;
  white-space: nowrap;
}

.tts-tier-body {
  padding: 0 0.85rem 0.85rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.tts-tier-body .tts-tier-desc {
  margin: 0.65rem 0 0.55rem;
}

.tts-tier-desc {
  margin: 0 0 0.65rem;
  line-height: 1.45;
}

.tts-engine-title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.55rem;
}

.tts-engine-desc {
  display: block;
}

.tts-recommend-badge,
.tts-best-plan-badge {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: 0.15rem 0.45rem;
  border-radius: 999px;
  line-height: 1.3;
}

.tts-recommend-badge {
  background: rgba(79, 140, 255, 0.2);
  color: var(--accent);
  border: 1px solid rgba(79, 140, 255, 0.45);
}

.tts-best-plan-badge {
  background: rgba(72, 187, 120, 0.15);
  color: #5fd38a;
  border: 1px solid rgba(72, 187, 120, 0.35);
}

.tts-recommend-detail {
  margin: 0.35rem 0 0;
  line-height: 1.45;
}

.tts-cost-hint {
  margin: 0.35rem 0 0;
  line-height: 1.4;
  font-style: italic;
}

.tts-azure-quota {
  margin: 0.5rem 0 0;
  line-height: 1.45;
}

.tts-azure-quota--warn {
  color: var(--warn-fg, #b45309);
}

.tts-azure-quota--exceeded {
  color: var(--error-fg, #b91c1c);
}

.pro-checkout-panel .pro-checkout-bullets {
  margin: 0.75rem 0 1rem;
  padding-left: 1.25rem;
  line-height: 1.5;
}

.pro-checkout-panel .pro-checkout-bullets li + li {
  margin-top: 0.45rem;
}

.pro-checkout-stats {
  margin: 0.5rem 0 0;
  line-height: 1.45;
  font-style: italic;
}

.pro-checkout-error {
  color: var(--error-fg, #b91c1c);
}

.cast-gold-verification-lead {
  margin: 0 0 0.5rem;
  line-height: 1.45;
}

.cast-gold-verification-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.65rem;
}

.cast-gold-verification-warnings {
  margin: 0.35rem 0 0;
  padding-left: 1.1rem;
  color: var(--warn-fg, #b45309);
}

.tts-tier-options {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.tts-engine-options .radio-card {
  position: relative;
  padding-right: 6rem;
}

.tts-engine-options .enable-tts-btn {
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  padding: 0.35rem 0.65rem;
  font-size: 0.8rem;
  font-weight: 600;
  border-radius: 6px;
  border: 1px solid var(--accent);
  background: transparent;
  color: var(--accent);
  cursor: pointer;
}

.tts-engine-options .enable-tts-btn:hover:not(:disabled) {
  background: rgba(79, 140, 255, 0.15);
}

.tts-engine-options .enable-tts-btn:disabled {
  opacity: 0.5;
  cursor: wait;
}

.tts-engine-options .tts-install-status {
  margin: 0.35rem 0 0;
  padding: 0.45rem 0.55rem;
  border-radius: 6px;
  background: rgba(79, 140, 255, 0.1);
  border: 1px solid rgba(79, 140, 255, 0.28);
  line-height: 1.4;
}

.tts-engine-options .tts-install-status--error {
  color: var(--error);
  background: rgba(255, 107, 107, 0.1);
  border-color: rgba(255, 107, 107, 0.35);
}

.tts-engine-options .tts-install-status--ok {
  color: var(--success);
  background: rgba(61, 214, 140, 0.1);
  border-color: rgba(61, 214, 140, 0.35);
}

.tts-engine-options .radio-card.unavailable {
  opacity: 0.85;
}

.tts-engine-options .radio-card.unavailable input {
  pointer-events: none;
}

.tts-engine-options .radio-card.needs-setup {
  border-color: var(--accent);
  cursor: pointer;
}

.tts-engine-options .radio-card.needs-setup strong::after {
  content: " — setup required";
  font-weight: 400;
  font-size: 0.82em;
  color: var(--accent);
}

.sidebar-settings-lead {
  margin: 0 0 0.5rem;
  line-height: 1.4;
}

.sidebar-settings-link {
  display: inline-block;
  text-decoration: none;
  text-align: center;
}

.byo-tts-setup-panel .byo-tts-setup-error,
.elevenlabs-setup-panel .elevenlabs-setup-error {
  color: #e85d5d;
}

.byo-tts-setup-actions,
.elevenlabs-setup-actions {
  flex-wrap: wrap;
  gap: 0.5rem;
}

.settings-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  margin: 1.25rem 0 0.5rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--border);
}

.settings-nav-link {
  color: var(--accent);
  text-decoration: none;
  font-size: 0.9rem;
}

.settings-nav-link:hover {
  text-decoration: underline;
}

.settings-section {
  margin-top: 2rem;
}

.settings-section h2 {
  margin: 0 0 0.75rem;
  font-size: 1.1rem;
}

.settings-section h3 {
  margin: 0;
  font-size: 0.98rem;
}

.settings-dl {
  margin: 0;
}

.settings-dl-row {
  display: grid;
  grid-template-columns: 7rem 1fr;
  gap: 0.5rem 1rem;
  margin: 0.35rem 0;
}

.settings-dl-row dt {
  margin: 0;
  color: var(--muted);
  font-size: 0.88rem;
}

.settings-dl-row dd {
  margin: 0;
}

.settings-form {
  margin-top: 1rem;
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
}

.settings-integration-card + .settings-integration-card {
  margin-top: 1rem;
}

.settings-integration-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}

.settings-badge {
  font-size: 0.75rem;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  background: rgba(79, 140, 255, 0.15);
  color: var(--accent);
}

.settings-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-top: 0.75rem;
}

.settings-field input {
  padding: 0.5rem 0.65rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
}

.settings-field-hint {
  margin: 0;
}

.settings-note {
  margin: 0.5rem 0 0;
  line-height: 1.45;
}

.settings-form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1rem;
}

.settings-status {
  margin-top: 1rem;
  padding: 0.65rem 0.85rem;
  border-radius: 6px;
  border: 1px solid var(--border);
}

.settings-status--ok {
  border-color: rgba(79, 200, 120, 0.45);
  background: rgba(79, 200, 120, 0.08);
}

.settings-status--err {
  border-color: rgba(232, 93, 93, 0.45);
  background: rgba(232, 93, 93, 0.08);
}

.voices-legal-footer {
  margin: 1rem 0 0;
  font-size: 0.85rem;
  color: var(--muted);
}

.voices-legal-footer a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.voices-legal-footer a:hover {
  color: var(--text);
}

body.licenses-page {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
}

.licenses-panel {
  max-width: 52rem;
  margin: 0 auto;
  padding: 2rem 1.5rem 3rem;
}

.licenses-header h1 {
  margin: 0 0 0.5rem;
  font-size: 1.5rem;
}

.licenses-panel section {
  margin-top: 2rem;
}

.licenses-panel h2 {
  margin: 0 0 0.75rem;
  font-size: 1.1rem;
}

.licenses-panel ul,
.licenses-panel ol {
  margin: 0.5rem 0 0;
  padding-left: 1.25rem;
}

.licenses-panel li {
  margin: 0.35rem 0;
}

.license-block {
  margin-top: 0.75rem;
  padding: 1rem;
  font-size: 0.75rem;
  line-height: 1.45;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-word;
}

.license-block--scroll {
  max-height: 24rem;
  overflow-y: auto;
}

/* Shared chrome for /wizard/about.html, /wizard/privacy.html,
   /wizard/terms.html (and existing licenses.html). Builds on
   .licenses-page / .licenses-panel above. */
.legal-page {
  line-height: 1.55;
}

.legal-panel h3 {
  margin: 1.25rem 0 0.4rem;
  font-size: 0.98rem;
  font-weight: 600;
}

.legal-header {
  border-bottom: 1px solid var(--border);
  padding-bottom: 1.25rem;
}

.legal-back {
  margin: 0 0 0.5rem;
  font-size: 0.85rem;
}

.legal-meta {
  margin-top: 0.25rem;
}

.legal-banner {
  margin-top: 1rem;
  padding: 0.85rem 1rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface);
  font-size: 0.85rem;
  line-height: 1.5;
}

.legal-banner--draft {
  border-left: 3px solid var(--spotlight, #e8a838);
}

.legal-toc {
  margin-top: 1.5rem;
  padding: 1rem 1.25rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
}

.legal-toc-title {
  margin: 0 0 0.5rem;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted, var(--text));
}

.legal-toc ol {
  margin: 0;
  padding-left: 1.25rem;
  columns: 2;
  column-gap: 1.5rem;
}

.legal-toc li {
  break-inside: avoid;
  margin: 0.2rem 0;
  font-size: 0.85rem;
}

@media (max-width: 640px) {
  .legal-toc ol {
    columns: 1;
  }
}

.legal-link-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.legal-link-list a {
  display: inline-block;
  padding: 0.3rem 0;
}

.legal-dl {
  margin: 0;
  display: grid;
  gap: 0.5rem;
}

.legal-dl-row {
  display: grid;
  grid-template-columns: 9rem 1fr;
  gap: 0.75rem;
  align-items: baseline;
}

.legal-dl-row dt {
  font-weight: 600;
  color: var(--muted, var(--text));
  font-size: 0.85rem;
}

.legal-dl-row dd {
  margin: 0;
}

@media (max-width: 480px) {
  .legal-dl-row {
    grid-template-columns: 1fr;
    gap: 0.15rem;
  }
}

.legal-footer {
  margin-top: 2.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
}

.legal-footer p {
  margin: 0.35rem 0;
}

.legal-preferences {
  margin-top: 2rem;
  padding: 1.25rem 1.35rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--panel-bg, rgba(255, 255, 255, 0.03));
}

.legal-checkbox-field {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  margin: 0.75rem 0 0.5rem;
  cursor: pointer;
  line-height: 1.45;
}

.legal-checkbox-field input {
  margin-top: 0.2rem;
  flex-shrink: 0;
}

/* Parent-brand block used on the About page only. Renders the
   "nightstand LABS" wordmark with a selectable mark icon. */
.legal-brand-block {
  margin-top: 2rem;
  padding: 2rem 1.5rem 1.75rem;
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
}

.legal-brand-eyebrow {
  margin: 0 0 0.75rem;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted, var(--text));
}

.legal-brand-wordmark {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  color: var(--text);
}

.legal-brand-line {
  font-family: "Playfair Display", "Cormorant Garamond", "DM Serif Display",
    Georgia, "Times New Roman", serif;
  font-weight: 500;
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  line-height: 1.1;
  letter-spacing: -0.005em;
}

.legal-brand-mark {
  width: 3rem;
  height: 3rem;
  margin-bottom: 0.35rem;
  color: var(--spotlight, #e8a838);
}

.legal-brand-lockup {
  display: block;
  width: min(11rem, 72vw);
  height: auto;
  margin: 0 auto;
}

/* Nightstand Labs company lockup (Logo 8). */
.nightstand-labs-brand {
  display: block;
  margin: 0 auto;
}

.nightstand-labs-brand-logo {
  display: block;
  width: 100%;
  height: auto;
}

.export-audiobook-meta-fields {
  display: grid;
  gap: 0.5rem;
  margin: 0.35rem 0 0;
}

.export-audiobook-meta-fields .field {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.listen-export-audiobook-btn {
  flex: 0 0 auto;
}

.listen-hero-icon-btn {
  position: relative;
  flex: 0 0 auto;
}

.listen-hero-icon-tooltip {
  position: absolute;
  right: 0;
  top: calc(100% + 0.45rem);
  z-index: 40;
  width: max-content;
  max-width: min(16rem, 72vw);
  padding: 0.55rem 0.7rem;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--border) 80%, var(--accent) 20%);
  background: color-mix(in srgb, var(--panel-elevated, #1a1a22) 94%, #000 6%);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
  color: var(--text);
  font-size: 0.78rem;
  line-height: 1.35;
  text-align: left;
  white-space: normal;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-0.15rem);
  transition:
    opacity 0.14s ease,
    transform 0.14s ease,
    visibility 0.14s ease;
}

.listen-hero-icon-tooltip-title {
  display: block;
  margin-bottom: 0.2rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: color-mix(in srgb, var(--text) 92%, var(--spotlight) 8%);
}

.listen-hero-icon-tooltip-body {
  display: block;
  color: color-mix(in srgb, var(--text) 78%, transparent);
}

.listen-hero-icon-btn:hover .listen-hero-icon-tooltip,
.listen-hero-icon-btn:focus-visible .listen-hero-icon-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.listen-hero-icon-btn:disabled .listen-hero-icon-tooltip {
  border-color: color-mix(in srgb, var(--border) 88%, transparent);
}

/* Audiobook export modal — wide 2-column layout, scrollable body, sticky footer */
.app-modal-export-audiobook {
  padding: 0.65rem;
}

.app-modal-export-audiobook .app-export-audiobook-panel {
  width: min(52rem, calc(100vw - 1.25rem));
  max-height: min(92vh, 100%);
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
  position: relative;
}

.export-audiobook-close {
  position: absolute;
  top: 0.65rem;
  right: 0.65rem;
  width: 2.1rem;
  height: 2.1rem;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: color-mix(in srgb, var(--text) 4%, transparent);
  color: var(--muted);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  z-index: 2;
}

.export-audiobook-close:hover,
.export-audiobook-close:focus-visible {
  color: var(--text);
  outline: none;
}

.export-audiobook-header {
  flex-shrink: 0;
  padding: 1.1rem 2.75rem 0.55rem 1.35rem;
  border-bottom: 1px solid var(--border);
}

.export-audiobook-header .app-modal-title {
  margin-bottom: 0.35rem;
}

.export-audiobook-header .app-modal-lead {
  margin: 0 0 0.35rem;
  font-size: 0.88rem;
  line-height: 1.4;
}

.export-audiobook-header .app-modal-hint,
.export-audiobook-engine-line {
  margin: 0.15rem 0 0;
  font-size: 0.82rem;
}

.export-audiobook-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0.65rem 1.35rem 0.75rem;
}

.export-audiobook-footer {
  flex-shrink: 0;
  padding: 0.7rem 1.35rem 1rem;
  border-top: 1px solid var(--border);
  background: var(--panel);
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.export-audiobook-footer .app-modal-actions {
  margin: 0;
}

#export-audiobook-progress[hidden],
#export-audiobook-ready[hidden],
#export-audiobook-settings[hidden] {
  display: none !important;
}

.export-audiobook-ready {
  margin: 0.5rem 0 0.25rem;
  padding: 1.35rem 1.25rem 1.5rem;
  text-align: center;
  border-radius: 12px;
  background: rgba(61, 214, 140, 0.1);
  border: 1px solid rgba(61, 214, 140, 0.38);
}

.export-audiobook-ready-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  margin: 0 auto 0.65rem;
  border-radius: 50%;
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1;
  color: var(--bg);
  background: var(--success);
}

.export-audiobook-ready-title {
  margin: 0 0 0.35rem;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text);
}

.export-audiobook-ready-filename {
  margin: 0 0 0.5rem;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--success);
  word-break: break-word;
}

.export-audiobook-ready-hint {
  margin: 0 0 1rem;
  max-width: 26rem;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.45;
}

.export-audiobook-save-btn {
  min-width: min(100%, 16rem);
  padding: 0.65rem 1.35rem;
  font-size: 0.95rem;
  font-weight: 600;
}

.export-audiobook-eta {
  margin: 0.45rem 0 0;
  font-weight: 600;
  color: var(--text);
}

.export-audiobook-processing-hint {
  margin: 0.35rem 0 0;
  line-height: 1.45;
  color: var(--muted);
}

.export-audiobook-rights {
  border: none;
  margin: 0 0 0.65rem;
  padding: 0;
}

.export-audiobook-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.65rem 1.15rem;
  align-items: start;
}

.export-audiobook-col {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  min-width: 0;
}

.export-audiobook-fieldset {
  margin: 0 !important;
}

.export-audiobook-section-title {
  display: block;
  width: 100%;
  margin: 0 0 0.35rem;
  padding: 0;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  border: none;
}

.export-audiobook-options {
  border: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.export-audiobook-options .app-modal-checkbox-row {
  margin: 0;
  font-size: 0.88rem;
}

.export-audiobook-format-inline .export-audiobook-format-row {
  display: flex;
  gap: 0.45rem;
}

.export-audiobook-format-inline .export-clip-format-option {
  flex: 1 1 0;
  min-width: 0;
  justify-content: center;
  padding: 0.45rem 0.55rem;
}

.export-audiobook-format-inline .export-clip-format-option em {
  display: none;
}

.app-export-audiobook-panel .export-clip-range-option,
.app-export-audiobook-panel .export-clip-format-option {
  padding: 0.45rem 0.6rem;
}

.app-export-audiobook-panel .export-clip-range-option em,
.app-export-audiobook-panel .export-clip-format-option em {
  font-size: 0.74rem;
  margin-top: 0.1rem;
}

@media (max-width: 720px) {
  .export-audiobook-columns {
    grid-template-columns: 1fr;
  }
}

.nightstand-labs-brand--about {
  width: min(24rem, 100%);
}

.nightstand-labs-brand--auth {
  width: min(11rem, 72vw);
  margin-top: 0.55rem;
}

.nightstand-labs-brand--sidebar {
  width: min(12.5rem, 100%);
}

.legal-brand-block .nightstand-labs-brand {
  margin: 0.35rem auto 0.5rem;
}

.legal-brand-sub {
  font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--text);
  margin-top: 0.35rem;
}

.legal-brand-meta {
  margin-top: 0.75rem;
}

/* Compact text-link footer at the bottom of the main wizard sidebar. */
.sidebar-legal-footer {
  margin-top: auto;
  padding: 0.85rem 1rem 1rem;
  border-top: 1px solid var(--border);
  color: var(--muted, var(--text));
}

.sidebar-legal-footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.85rem;
}

.sidebar-legal-footer li {
  margin: 0;
}

.sidebar-legal-footer a {
  font-size: 0.75rem;
  color: var(--muted, var(--text));
  text-decoration: none;
  opacity: 0.85;
}

.sidebar-legal-footer a:hover,
.sidebar-legal-footer a:focus {
  opacity: 1;
  text-decoration: underline;
}

.sidebar-legal-footer--in-section {
  margin-top: 0;
  padding: 0.15rem 0 0.35rem;
  border-top: none;
}

.sidebar-legal-info .sidebar-legal-footer ul {
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
}

.sidebar-legal-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin: 0.65rem 0 0;
  font-size: 0.7rem;
  text-align: center;
}

.sidebar-legal-copy .nightstand-labs-brand {
  width: min(12.5rem, 100%);
  opacity: 1;
}

.sidebar-legal-copy > span:last-child {
  opacity: 0.65;
}

.sidebar-legal-mark {
  width: 5.5rem;
  height: auto;
  flex-shrink: 0;
}

#ai-settings[hidden] {
  display: none !important;
}

.ai-settings {
  display: grid;
  gap: 0.75rem;
  padding: 1rem;
  background: var(--panel);
  border-radius: 8px;
  margin-bottom: 1rem;
}

.ai-settings label {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-size: 0.85rem;
  color: var(--muted);
}

.ai-settings input,
.ai-settings select {
  padding: 0.5rem;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
}

.ai-settings label.inline {
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
}

.progress-bar {
  height: 8px;
  background: var(--panel);
  border-radius: 4px;
  overflow: hidden;
  margin: 1rem 0;
}

#progress-fill {
  height: 100%;
  background: var(--accent);
  transition: width 0.3s ease;
}

.panel-footer {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: 2rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
}

.process-early-listen-block {
  margin-top: 1.25rem;
  padding: 1rem 1.1rem;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--accent) 8%, var(--surface, #1a1a22));
}

.process-early-listen-text {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--text, #e8e8ec);
}

.process-early-listen-block .primary {
  margin-top: 0.9rem;
}

button {
  padding: 0.6rem 1.2rem;
  border-radius: 8px;
  border: none;
  font-weight: 600;
  cursor: pointer;
  font-size: 0.95rem;
}

button.primary {
  background: var(--accent);
  color: #fff;
}

button.primary:hover:not(:disabled) {
  background: var(--accent-hover);
}

button.secondary {
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border);
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease,
    box-shadow 0.15s ease;
}

button.secondary:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--accent) 42%, var(--border));
  background: color-mix(in srgb, var(--accent) 11%, var(--panel));
  box-shadow: 0 1px 6px color-mix(in srgb, #000 18%, transparent);
}

button.secondary:active:not(:disabled) {
  background: color-mix(in srgb, var(--accent) 16%, var(--panel));
}

button.secondary:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent) 50%, transparent);
  outline-offset: 2px;
}

button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.error {
  color: var(--error);
}

#process-error.process-warning {
  color: color-mix(in srgb, var(--warning, #c98a1a) 88%, var(--text));
}

.process-chapter-prompts {
  margin: 1rem 0 0;
  padding: 0.85rem 1rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 92%, var(--accent) 8%);
}

.process-chapter-character-bible {
  margin-bottom: 1rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--border);
}

.process-chapter-character-bible .process-chapter-prompts-title {
  margin: 0;
}

.process-chapter-prompts-title {
  margin: 0 0 0.35rem;
  font-size: 1rem;
}

.process-chapter-prompts-intro {
  margin: 0 0 0.75rem;
}

.process-chapter-prompts-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.process-chapter-prompt-card {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.process-chapter-prompt-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.process-chapter-prompt-card-title {
  margin: 0;
  font-size: 0.92rem;
  font-weight: 600;
}

.process-chapter-prompt-copy {
  flex-shrink: 0;
  font-size: 0.78rem;
  padding: 0.25rem 0.55rem;
}

.process-chapter-prompt-text {
  width: 100%;
  margin: 0;
  white-space: pre-wrap;
  overflow: visible;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.8rem;
  line-height: 1.45;
  padding: 0.55rem 0.65rem;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  user-select: text;
}

.cast-add-btn {
  width: 100%;
  margin-top: 0.5rem;
}

.app-modal-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-bottom: 0.75rem;
  font-size: 0.85rem;
  color: var(--muted);
}

.app-modal-field input,
.app-modal-field select,
#app-add-character label input,
#app-add-character label select {
  padding: 0.5rem;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
}

.app-modal-checkbox-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.55rem;
  margin-bottom: 0.75rem;
  font-size: 0.88rem;
  color: var(--text);
  cursor: pointer;
  user-select: none;
}

.app-modal-checkbox-row input[type="checkbox"] {
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
  margin: 0;
  accent-color: var(--accent, #4f8cff);
  cursor: pointer;
}

#app-add-character label {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-bottom: 0.75rem;
  font-size: 0.85rem;
  color: var(--muted);
}

#app-prompt-field-label[hidden] {
  display: none !important;
}

.app-modal-lead {
  margin: 0 0 1rem;
}

.save-preset-update-row {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin: 0 0 0.85rem;
  font-size: 0.9rem;
  color: var(--text);
  cursor: pointer;
}

.save-preset-update-row input {
  width: auto;
  margin: 0.15rem 0 0;
  flex-shrink: 0;
}

.save-preset-update-copy {
  flex: 1;
  min-width: 0;
  line-height: 1.45;
}

.save-preset-update-name {
  display: inline;
  font-weight: 600;
}

/* Shared form controls (cast step and elsewhere) */
.form-select,
.cast-global-settings select,
.cast-detail select,
.director-preset-row select,
#narrator-voice,
#char-voice,
.ai-settings select,
.chapter-images-fieldset select {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  padding: 0.5rem 2.1rem 0.5rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background-color: var(--bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238b9cb3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.6rem center;
  background-size: 1rem;
  color: var(--text);
  font: inherit;
  font-size: 0.9rem;
  line-height: 1.35;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.form-select:hover,
.cast-global-settings select:hover,
.cast-detail select:hover {
  border-color: rgba(79, 140, 255, 0.45);
}

.form-select:focus,
.cast-global-settings select:focus,
.cast-detail select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(79, 140, 255, 0.22);
}

.form-input,
.cast-roster-toolbar .search,
.cast-detail input[type="text"],
.cast-detail input[type="number"],
.trait-fields input,
.chapter-images-fieldset input[type="url"] {
  width: 100%;
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: 0.9rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.form-input:focus,
.cast-roster-toolbar .search:focus,
.cast-detail input:focus,
.chapter-images-fieldset input[type="url"]:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(79, 140, 255, 0.22);
}

.acting-param-row .form-input-compact {
  width: 100%;
  max-width: none;
}

button.small {
  padding: 0.4rem 0.7rem;
  font-size: 0.8rem;
}

.cast-panel-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.15rem;
}

.cast-panel-header .panel-title {
  margin-bottom: 0;
  flex: 1 1 auto;
  min-width: 0;
}

.cast-header-meta {
  flex: 0 1 auto;
  max-width: min(24rem, 48%);
  margin: 0.2rem 0 0;
  text-align: right;
  line-height: 1.45;
  font-size: 0.88rem;
  color: var(--muted);
}

.cast-panel-meta {
  margin-top: 1.15rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.cast-meta-collapsible {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.45rem 0.65rem 0.55rem;
  background: rgba(0, 0, 0, 0.08);
}

.cast-meta-collapsible summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 0.88rem;
  list-style: none;
  user-select: none;
  color: var(--muted);
}

.cast-meta-collapsible summary::-webkit-details-marker {
  display: none;
}

.cast-meta-collapsible summary::before {
  content: "▸ ";
  color: var(--muted);
}

.cast-meta-collapsible[open] summary::before {
  content: "▾ ";
}

.cast-meta-collapsible-body {
  margin-top: 0.45rem;
}

.cast-meta-collapsible .dev-test-metrics-body {
  margin: 0;
}

.cast-meta-collapsible .dev-test-compare-list {
  margin-top: 0.45rem;
}

@media (max-width: 640px) {
  .cast-panel-header {
    flex-direction: column;
    align-items: stretch;
    gap: 0.35rem;
  }

  .cast-header-meta {
    max-width: none;
    text-align: left;
    margin-top: 0;
  }
}

.cast-layout {
  display: grid;
  grid-template-columns: minmax(260px, 300px) minmax(0, 1fr);
  gap: 1rem 1.25rem;
  min-height: 320px;
  align-items: stretch;
}

.cast-roster-header {
  grid-column: 1 / -1;
  padding: 0.75rem 0.85rem;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
}

.cast-roster-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  margin-bottom: 0.6rem;
}

.cast-roster-toolbar .search {
  flex: 1 1 10rem;
  min-width: 8rem;
  max-width: 18rem;
  margin: 0;
}

.cast-roster-toolbar .cast-min-lines {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  flex-shrink: 0;
  font-size: 0.8rem;
  color: var(--muted);
}

.cast-min-lines-label {
  white-space: nowrap;
}

.cast-min-lines-input {
  width: 3.25rem;
  min-width: 3.25rem;
  padding: 0.35rem 0.4rem;
  text-align: center;
}

.cast-roster-toolbar #btn-refresh-cast {
  flex-shrink: 0;
}

.cast-roster-toolbar .cast-add-btn {
  flex: 0 0 auto;
  width: auto;
  margin: 0;
  white-space: nowrap;
}

.cast-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.cast-list--roster {
  --cast-roster-visible-rows: 4;
  --cast-roster-row-height: 3.15rem;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 0.25rem;
  overflow-x: hidden;
  overflow-y: auto;
  max-height: calc(var(--cast-roster-visible-rows) * var(--cast-roster-row-height));
  padding-right: 0.2rem;
  scrollbar-width: thin;
}

.cast-list--roster .cast-item {
  flex: 0 0 auto;
  width: 100%;
  min-width: 0;
  max-width: none;
  margin-bottom: 0;
  padding: 0.5rem 0.65rem;
}

.cast-list--roster .cast-item-main {
  overflow: hidden;
  text-overflow: ellipsis;
}

.cast-panel-heading {
  margin: 0 0 0.5rem;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.cast-voice-recs {
  grid-column: 1;
  grid-row: 2;
  display: flex;
  flex-direction: column;
  min-height: 0;
  margin: 0;
  padding: 0.85rem;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
}

.cast-voice-recs[hidden] {
  display: none !important;
}

.cast-layout:has(.cast-voice-recs[hidden]) {
  grid-template-columns: 1fr;
}

.cast-layout:has(.cast-voice-recs[hidden]) .cast-detail-column {
  grid-column: 1 / -1;
}

.cast-voice-recs #btn-refresh-voice-rec {
  width: 100%;
  margin-top: 0.35rem;
  flex-shrink: 0;
}

.cast-voice-recs .voice-rec-list {
  flex: 1 1 auto;
  min-height: 6rem;
  max-height: min(480px, calc(72vh - 14rem));
  overflow-y: auto;
}

.cast-voice-recs .voice-rec-item {
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.5rem;
}

.cast-voice-recs .voice-rec-info {
  flex: 1 1 auto;
  min-width: 0;
}

.cast-voice-recs .voice-rec-actions {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.25rem;
  flex-shrink: 0;
  align-self: center;
  margin-top: 0;
  margin-left: auto;
}

.cast-voice-recs .voice-rec-preview,
.cast-voice-recs .voice-rec-apply,
.cast-voice-recs .cast-voice-apply {
  flex-shrink: 0;
}

.cast-detail-column {
  grid-column: 2;
  grid-row: 2;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-width: 0;
  min-height: 0;
}

.cast-global-settings {
  flex-shrink: 0;
  padding: 0.85rem 1rem;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
}

.cast-global-settings-title {
  margin: 0 0 0.65rem;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0.02em;
}

.cast-global-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem 1.25rem;
  align-items: start;
}

.cast-global-grid .director-preset-row {
  margin-bottom: 0;
}

.cast-global-grid .narrator-row {
  margin-bottom: 0;
}

@media (max-width: 900px) {
  .cast-global-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 700px) {
  .cast-layout {
    grid-template-columns: 1fr;
  }

  .cast-voice-recs,
  .cast-detail-column {
    grid-column: 1;
    grid-row: auto;
  }

  .trait-fields-grid {
    grid-template-columns: 1fr;
  }

  .cast-detail-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
  }

  .cast-detail-title-row {
    flex-wrap: wrap;
    gap: 0.35rem 0.75rem;
  }

  .cast-detail-mentions {
    white-space: normal;
  }

  .cast-voice-row {
    grid-template-columns: 1fr;
  }

  .cast-voice-preview {
    justify-content: flex-start;
  }

  .cast-roster-toolbar .search {
    max-width: none;
    flex: 1 1 100%;
  }
}

.cast-item {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.65rem;
  border-radius: 6px;
  cursor: pointer;
  margin-bottom: 0.25rem;
}

.cast-item-actions {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  flex-shrink: 0;
}

.cast-item-main {
  flex: 1;
  min-width: 0;
}

.cast-item-delete {
  flex: 0 0 auto;
  opacity: 0.5;
  border-color: transparent;
  background: transparent;
  color: var(--muted);
}

.cast-item-delete:hover:not(:disabled) {
  opacity: 1;
  color: var(--error);
  border-color: rgba(255, 107, 107, 0.35);
  background: rgba(255, 107, 107, 0.1);
}

.cast-item:hover {
  background: var(--panel);
}

.cast-item.selected {
  background: rgba(79, 140, 255, 0.2);
  outline: 1px solid var(--accent);
}

.cast-item.is-new {
  border-left: 3px solid var(--success);
}

.cast-item .badge-new {
  display: inline-block;
  margin-left: 0.35rem;
  padding: 0.1rem 0.4rem;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--bg);
  background: var(--success);
  border-radius: 4px;
  vertical-align: middle;
}

.cast-new-banner {
  margin: 0 0 1rem;
  padding: 0.65rem 0.85rem;
  border-radius: 8px;
  background: rgba(61, 214, 140, 0.12);
  border: 1px solid rgba(61, 214, 140, 0.35);
  color: var(--success);
}

.casting-preset-panel {
  margin: 0 0 1.25rem;
  padding: 1rem;
  background: var(--panel);
  border-radius: 8px;
  border: 1px solid var(--border);
}

.casting-preset-panel label {
  display: block;
  margin-bottom: 0.75rem;
}

.casting-preset-panel select {
  width: 100%;
  margin-top: 0.35rem;
}

.import-mode-fieldset {
  border: none;
  padding: 0;
  margin: 0 0 1.5rem;
}

.reuse-style-fieldset {
  margin: 0.75rem 0;
  border: none;
  padding: 0;
}

.radio-card.compact {
  padding: 0.5rem 0.65rem;
  margin-bottom: 0.35rem;
}

.radio-card.compact span {
  font-size: 0.85rem;
}

.cast-detail-column .cast-detail {
  flex: 0 1 auto;
  min-height: 0;
  max-height: none;
}

.cast-detail {
  padding: 1rem 1.1rem;
  background: var(--panel);
  border-radius: 10px;
  border: 1px solid var(--border);
  overflow: visible;
}

.cast-detail-acting-notes {
  margin-top: 0.75rem;
  margin-bottom: 0;
}

.preview-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.75rem;
}

.cast-voice-preview,
.narrator-preview {
  margin: 0;
  gap: 0;
  flex-wrap: nowrap;
}

/* Cast screen icon buttons (preview, assign, remove) */
.cast-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  flex-shrink: 0;
  font-weight: 400;
  font-size: 0;
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease,
    opacity 0.15s ease,
    transform 0.12s ease;
}

.cast-icon-btn svg {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cast-icon-btn:hover:not(:disabled) {
  background: rgba(79, 140, 255, 0.1);
  border-color: rgba(79, 140, 255, 0.4);
  color: var(--text);
}

.cast-icon-btn:active:not(:disabled) {
  transform: scale(0.94);
}

.cast-icon-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.cast-icon-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.cast-preview-toggle .cast-icon-play svg {
  fill: currentColor;
  stroke: none;
}

.cast-preview-toggle .cast-icon-stop {
  display: none;
}

.cast-preview-toggle .cast-icon-stop svg {
  fill: currentColor;
  stroke: none;
}

.cast-preview-toggle.is-playing {
  color: var(--error);
  border-color: rgba(255, 107, 107, 0.45);
  background: rgba(255, 107, 107, 0.1);
}

.cast-preview-toggle.is-playing .cast-icon-play {
  display: none;
}

.cast-preview-toggle.is-playing .cast-icon-stop {
  display: inline-flex;
}

.cast-preview-toggle.is-playing:hover:not(:disabled) {
  background: rgba(255, 107, 107, 0.16);
  border-color: rgba(255, 107, 107, 0.55);
  color: var(--error);
}

.cast-voice-apply {
  color: var(--accent);
  border-color: rgba(79, 140, 255, 0.35);
  background: rgba(79, 140, 255, 0.08);
}

.cast-voice-apply:hover:not(:disabled) {
  background: rgba(79, 140, 255, 0.18);
  border-color: rgba(79, 140, 255, 0.55);
  color: var(--accent);
}

.cast-roster-preview:not(.is-playing):not(:disabled) {
  color: var(--accent);
  border-color: rgba(79, 140, 255, 0.35);
  background: rgba(79, 140, 255, 0.06);
}

.cast-roster-preview:not(.is-playing):not(:disabled):hover {
  background: rgba(79, 140, 255, 0.16);
  color: var(--accent);
}

.cast-remove-row {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}

.cast-remove-row .danger {
  color: var(--error);
  border-color: rgba(255, 107, 107, 0.45);
}

.cast-remove-row .danger:hover {
  background: rgba(255, 107, 107, 0.12);
}

.panel-listen {
  --listen-gap: 1.75rem;
  position: relative;
}

/* Blocks Listen controls until the first batch is ready to play. Sidebar + step tabs stay usable. */
.listen-boot-overlay {
  position: absolute;
  inset: 0;
  z-index: 45;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

.listen-boot-overlay[hidden] {
  display: none;
}

.listen-boot-overlay-card {
  max-width: 22rem;
  padding: 1.35rem 1.5rem 1.25rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--panel);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.22);
  text-align: center;
}

.listen-boot-spinner {
  width: 2.35rem;
  height: 2.35rem;
  margin: 0 auto 0.95rem;
  border: 3px solid rgba(125, 125, 125, 0.22);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: listen-boot-spin 0.85s linear infinite;
}

@keyframes listen-boot-spin {
  to {
    transform: rotate(360deg);
  }
}

.listen-boot-message {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
}

.listen-boot-hint {
  margin: 0.55rem 0 0;
  font-size: 0.78rem;
  line-height: 1.45;
}

/* Book-scoped status while server TTS catches up (shown only after a short grace period). */
.listen-speech-loading-pill {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 40;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  max-width: calc(100% - 2rem);
  padding: 0.5rem 0.95rem;
  border: 1px solid color-mix(in srgb, var(--border) 80%, var(--accent) 20%);
  border-radius: 999px;
  background: color-mix(in srgb, var(--panel) 92%, transparent);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.22);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.listen-speech-loading-pill[hidden] {
  display: none;
}

.listen-speech-loading-pill-text {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
}

.listen-speech-loading-pill-spinner {
  flex-shrink: 0;
  width: 0.95rem;
  height: 0.95rem;
  border: 2px solid rgba(125, 125, 125, 0.22);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: listen-boot-spin 0.85s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .listen-speech-loading-pill-spinner {
    animation: none;
    border-top-color: var(--accent);
    opacity: 0.85;
  }
}

.panel-listen.listen-boot-active .listen-transport-play,
.panel-listen.listen-boot-active .listen-transport-btn,
.panel-listen.listen-boot-active #listen-scrub,
.panel-listen.listen-boot-active .listen-nav-btn,
.panel-listen.listen-boot-active .listen-immersion-chip,
.panel-listen.listen-boot-active #btn-rec-clip,
.panel-listen.listen-boot-active .listen-chapter-trigger,
.panel-listen.listen-boot-active #listen-text {
  pointer-events: none;
}

.panel-listen.listen-startup-locked .listen-transport-play,
.panel-listen.listen-startup-locked .listen-transport-btn,
.panel-listen.listen-startup-locked #listen-scrub,
.panel-listen.listen-startup-locked .listen-nav-btn,
.panel-listen.listen-startup-locked .listen-skip-btn,
.panel-listen.listen-startup-locked .listen-chapter-trigger {
  pointer-events: none;
  opacity: 0.55;
}

.panel-listen.listen-startup-locked .listen-transport-play {
  cursor: wait;
}

@media (prefers-reduced-motion: reduce) {
  .listen-boot-spinner {
    animation: none;
    border-top-color: var(--accent);
    opacity: 0.85;
  }
}

.listen-section {
  display: block;
}

.listen-section-playback {
  margin-top: 0.65rem;
}

.listen-section-reader {
  margin-top: var(--space-md);
}

.listen-section-nav {
  margin-top: calc(var(--listen-gap) + 0.25rem);
  padding: 1.1rem 1rem 1rem;
  background: rgba(0, 0, 0, 0.14);
  border: 1px solid var(--border);
  border-radius: 10px;
}

.listen-toolbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  margin: 0;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
}

.listen-transport {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 0;
}

/* Compact transport row: skip | play controls | volume on one line.
   Play controls sit in the center column (aligned like immersion chips below).
   Rollback: set data-transport-layout="stacked" on .listen-toolbar (see stacked rules below). */
.listen-transport-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 0.65rem 1rem;
  margin-top: 1.15rem;
  padding-top: 0.15rem;
}

.listen-transport-row .listen-skip-time {
  grid-column: 1;
  justify-self: start;
  margin: 0;
}

.listen-transport-row .listen-transport {
  grid-column: 2;
  justify-self: center;
  flex: none;
  min-width: 0;
  margin: 0;
}

.listen-transport-row .listen-master-volume {
  grid-column: 3;
  justify-self: end;
  flex: none;
  margin-left: 0;
}

@media (max-width: 640px) {
  .listen-transport-row {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 0.55rem;
  }

  .listen-transport-row .listen-skip-time,
  .listen-transport-row .listen-transport,
  .listen-transport-row .listen-master-volume {
    grid-column: 1;
    justify-self: center;
  }
}

.listen-toolbar[data-transport-layout="stacked"] .listen-transport-row {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  align-items: center;
  gap: 0.65rem 1rem;
}

.listen-toolbar[data-transport-layout="stacked"] .listen-skip-time {
  grid-column: 1;
  grid-row: 1;
}

.listen-toolbar[data-transport-layout="stacked"] .listen-master-volume {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
}

.listen-toolbar[data-transport-layout="stacked"] .listen-transport {
  grid-column: 1 / -1;
  grid-row: 2;
  margin-top: 0.7rem;
}

.listen-transport-btn--chapter svg {
  width: 1.35rem;
}

.listen-transport-btn--chapter[hidden] {
  display: none;
}

.listen-transport-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.65rem;
  height: 2.65rem;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  cursor: pointer;
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease,
    transform 0.12s ease;
}

.listen-transport-btn svg {
  width: 1.25rem;
  height: 1.25rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.listen-transport-btn:hover:not(:disabled) {
  background: rgba(79, 140, 255, 0.12);
  border-color: rgba(79, 140, 255, 0.45);
  color: #fff;
}

.listen-transport-btn:active:not(:disabled) {
  transform: scale(0.94);
}

.listen-transport-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.listen-transport-play {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.75rem;
  height: 3.75rem;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: linear-gradient(145deg, #5a96ff 0%, var(--accent) 55%, var(--accent-hover) 100%);
  color: #fff;
  cursor: pointer;
  box-shadow:
    0 4px 18px rgba(79, 140, 255, 0.38),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
  transition:
    transform 0.12s ease,
    box-shadow 0.15s ease,
    background 0.15s ease;
}

.listen-transport-play:hover:not(:disabled) {
  background: linear-gradient(145deg, #6aa0ff 0%, #5a96ff 55%, var(--accent) 100%);
  box-shadow:
    0 6px 22px rgba(79, 140, 255, 0.48),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

.listen-transport-play:active:not(:disabled) {
  transform: scale(0.94);
}

.listen-transport-play:focus-visible,
.listen-transport-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.listen-transport-play-icon {
  display: grid;
  place-items: center;
  width: 1.65rem;
  height: 1.65rem;
}

.listen-transport-play-icon svg {
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
  fill: currentColor;
  stroke: none;
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.listen-transport-play .listen-icon-pause {
  opacity: 0;
  transform: scale(0.82);
}

.listen-transport-play .listen-icon-play {
  transform: translateX(0.08rem);
}

.listen-transport-play.is-playing .listen-icon-play {
  opacity: 0;
  transform: scale(0.82);
}

.listen-transport-play.is-playing .listen-icon-pause {
  opacity: 1;
  transform: scale(1);
}

.listen-progress {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  width: 100%;
}

.listen-progress-meta {
  display: flex;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  margin-bottom: 0.15rem;
}

.listen-toolbar-scrub {
  --scrub-progress: 0%;
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  margin: 0;
  height: 0.35rem;
  border-radius: 999px;
  appearance: none;
  -webkit-appearance: none;
  background: linear-gradient(
    to right,
    var(--accent) 0%,
    var(--accent) var(--scrub-progress),
    rgba(255, 255, 255, 0.12) var(--scrub-progress),
    rgba(255, 255, 255, 0.12) 100%
  );
  cursor: pointer;
}

[data-theme="light"] .listen-toolbar-scrub {
  background: linear-gradient(
    to right,
    var(--accent) 0%,
    var(--accent) var(--scrub-progress),
    rgba(26, 26, 46, 0.12) var(--scrub-progress),
    rgba(26, 26, 46, 0.12) 100%
  );
}

.listen-toolbar-scrub::-webkit-slider-runnable-track {
  height: 0.35rem;
  border-radius: 999px;
  background: transparent;
}

.listen-toolbar-scrub::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: 0.95rem;
  height: 0.95rem;
  margin-top: -0.3rem;
  border: 2px solid #fff;
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.listen-toolbar-scrub:active::-webkit-slider-thumb,
.listen-toolbar-scrub:hover::-webkit-slider-thumb {
  transform: scale(1.12);
  box-shadow: 0 2px 10px rgba(79, 140, 255, 0.45);
}

.listen-toolbar-scrub::-moz-range-track {
  height: 0.35rem;
  border-radius: 999px;
  background: transparent;
}

.listen-toolbar-scrub::-moz-range-progress {
  height: 0.35rem;
  border-radius: 999px;
  background: var(--accent);
}

.listen-toolbar-scrub::-moz-range-thumb {
  width: 0.95rem;
  height: 0.95rem;
  border: 2px solid #fff;
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.listen-toolbar-scrub:active::-moz-range-thumb,
.listen-toolbar-scrub:hover::-moz-range-thumb {
  transform: scale(1.12);
  box-shadow: 0 2px 10px rgba(79, 140, 255, 0.45);
}

.listen-position {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 0.5rem 0.65rem;
  flex: 0 1 auto;
  max-width: min(100%, 32rem);
  line-height: 1.3;
}

.listen-text-meta {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  margin: 0 0 0.5rem;
  padding: 0 0.15rem;
  overflow: visible;
  position: relative;
}

.listen-chapter-picker {
  position: relative;
  flex: 0 0 auto;
  margin-left: auto;
  display: flex;
  justify-content: flex-end;
  min-width: 0;
}

.listen-chapter-picker.is-open {
  z-index: 10041;
}

.listen-chapter-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.35rem;
  width: max-content;
  max-width: 100%;
  padding: 0.2rem 0.35rem;
  margin: -0.2rem -0.35rem;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.25;
  text-align: right;
  cursor: pointer;
}

.listen-chapter-trigger:hover,
.listen-chapter-picker.is-open .listen-chapter-trigger {
  background: rgba(255, 255, 255, 0.06);
}

.listen-chapter-trigger:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

#listen-chapter-trigger-label {
  white-space: nowrap;
  text-align: right;
  flex: 0 1 auto;
}

.listen-chapter-trigger-chevron {
  width: 0.85rem;
  height: 0.85rem;
  flex-shrink: 0;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
  opacity: 0.65;
  transition: transform 0.15s ease;
}

.listen-chapter-picker.is-open .listen-chapter-trigger-chevron {
  transform: rotate(180deg);
}

.listen-chapter-menu {
  position: fixed;
  z-index: 10040;
  width: max-content;
  max-height: min(16rem, 40vh);
  margin: 0;
  padding: 0.35rem;
  list-style: none;
  overflow-y: auto;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-y;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

.listen-chapter-menu-item {
  display: block;
  width: max-content;
  min-width: 100%;
  box-sizing: border-box;
  padding: 0.5rem 0.65rem;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 0.8125rem;
  line-height: 1.35;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.listen-chapter-menu-item:hover,
.listen-chapter-menu-item:focus-visible {
  background: rgba(255, 255, 255, 0.06);
  outline: none;
}

.listen-chapter-menu-item.is-current {
  font-weight: 600;
  color: var(--accent);
}

.listen-position-divider {
  display: inline-block;
  width: 1px;
  height: 1.25rem;
  background: linear-gradient(
    180deg,
    transparent,
    var(--border) 15%,
    var(--border) 85%,
    transparent
  );
  flex-shrink: 0;
  opacity: 0.9;
}

.listen-position-segment {
  display: inline-flex;
  align-items: baseline;
  gap: 0.3rem;
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  white-space: nowrap;
}

.listen-position-seg-label,
.listen-position-seg-of {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  opacity: 0.85;
}

.listen-position-seg-current {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--accent);
}

.listen-position-seg-total {
  font-weight: 500;
  color: var(--text);
  opacity: 0.72;
}

/* The reading area used to be its own scroll container with a vh-capped
   max-height, which produced a tall inner scrollbar whenever a segment
   ran long or chapter art / inline figures pushed the text down. Per
   product direction we now let the panel expand to fit its content and
   delegate any overflow scrolling to the page itself — the
   `scrollListenHighlightIntoView` helper scrolls the window so the
   active word stays visible. `min-height` is preserved so short
   passages don't make the panel collapse and jitter between segments. */
.listen-text-scroll {
  min-height: 10rem;
  margin: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  cursor: pointer;
  position: relative;
  z-index: 1;
}

@media (pointer: coarse), (hover: none) {
  .listen-text-scroll,
  .listen-companion-text-scroll,
  .listen-atmosphere-host .listen-spread-page {
    touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
  }

  .listen-text-scroll .listen-text,
  .listen-companion-text-scroll .listen-text,
  .listen-text-scroll .listen-word,
  .listen-companion-text-scroll .listen-word {
    -webkit-user-select: text !important;
    user-select: text !important;
    -webkit-touch-callout: default;
    cursor: text;
  }
}

/* Tier 1 theater: scene atmosphere, stingers, motion */
.listen-atmosphere-host {
  position: relative;
  margin: 0;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  background: var(--bg);
  transition:
    border-color 0.5s ease,
    box-shadow 0.5s ease;
}

.listen-atmosphere-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  transition: opacity 0.6s ease;
}

.listen-atmosphere-host.listen-atmosphere-active .listen-atmosphere-overlay {
  opacity: 1;
}

/* Reading layout — Web view (stacked) vs Book view (two-page spread). */
.listen-reader-layout-field {
  display: block;
  margin: 0.35rem 0 0.65rem;
}

.listen-reader-layout-field .meta {
  display: block;
  margin-bottom: 0.35rem;
}

.listen-reader-layout-options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.listen-reader-layout-option {
  display: inline-flex;
  margin: 0;
  cursor: pointer;
}

.listen-reader-layout-option input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.listen-reader-layout-option span {
  display: inline-block;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.32rem 0.7rem;
  font-size: 0.82rem;
  line-height: 1.25;
  background: var(--panel);
  color: var(--muted);
  user-select: none;
  transition:
    border-color 0.15s ease,
    color 0.15s ease,
    background 0.15s ease;
}

.listen-reader-layout-option input:checked + span {
  border-color: var(--accent);
  color: var(--text);
  background: rgba(79, 140, 255, 0.15);
}

.listen-reader-layout-option input:focus-visible + span {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.sidebar-playback-settings .listen-reader-layout-field .meta,
.sidebar-playback-settings .listen-display-format-field .meta {
  display: block;
  margin-bottom: 0.35rem;
}

.sidebar-playback-settings .listen-reader-layout-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.4rem;
}

.sidebar-playback-settings .listen-reader-layout-option {
  display: flex;
  margin: 0;
  min-width: 0;
}

.sidebar-playback-settings .listen-reader-layout-option span {
  flex: 1;
  width: 100%;
  box-sizing: border-box;
  text-align: center;
  white-space: nowrap;
  padding: 0.32rem 0.55rem;
  font-size: 0.82rem;
}

.sidebar-playback-settings .listen-reader-layout-field + .listen-reader-skin-field {
  margin-top: 0.15rem;
}

.sidebar-playback-settings .listen-reader-layout-field + .listen-highlight-toggle {
  margin-top: 0.5rem;
}

.sidebar-playback-settings #sidebar-playback-body {
  padding: 0.55rem 0.5rem 0.7rem;
}

/* Playback settings — recessed cards with bronze headers (matches listen-hero-bar). */
.sidebar-playback-settings .sidebar-playback-group {
  --playback-panel-base: color-mix(in srgb, var(--bg) 82%, var(--panel));
  margin: 0 0 0.75rem;
  padding: 0 0 0.65rem;
  overflow: hidden;
  border-radius: calc(var(--radius) - 1px);
  border: 1px solid color-mix(in srgb, var(--border) 90%, var(--text) 8%);
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--text) 3.5%, transparent) 0%,
      transparent 24%,
      color-mix(in srgb, black 10%, transparent) 100%
    ),
    repeating-linear-gradient(
      0deg,
      color-mix(in srgb, var(--text) 3.6%, transparent) 0 1px,
      transparent 1px 3px
    ),
    repeating-linear-gradient(
      90deg,
      color-mix(in srgb, var(--text) 2.8%, transparent) 0 1px,
      transparent 1px 4px
    ),
    repeating-linear-gradient(
      125deg,
      color-mix(in srgb, var(--text) 1.2%, transparent) 0 1px,
      transparent 1px 6px
    ),
    var(--playback-panel-base);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--text) 6%, transparent),
    0 2px 10px rgba(0, 0, 0, 0.24);
}

.sidebar-playback-settings .sidebar-playback-group:last-child {
  margin-bottom: 0;
}

[data-theme="light"] .sidebar-playback-settings .sidebar-playback-group {
  --playback-panel-base: color-mix(in srgb, var(--bg) 76%, var(--panel));
  border-color: color-mix(in srgb, var(--border) 100%, var(--text) 5%);
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.72) 0%,
      transparent 30%,
      color-mix(in srgb, var(--bg) 55%, transparent) 100%
    ),
    repeating-linear-gradient(
      0deg,
      color-mix(in srgb, var(--text) 5.5%, transparent) 0 1px,
      transparent 1px 3px
    ),
    repeating-linear-gradient(
      90deg,
      color-mix(in srgb, var(--text) 4.5%, transparent) 0 1px,
      transparent 1px 4px
    ),
    repeating-linear-gradient(
      125deg,
      color-mix(in srgb, var(--text) 2%, transparent) 0 1px,
      transparent 1px 6px
    ),
    var(--playback-panel-base);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 1px 4px rgba(26, 26, 46, 0.07);
}

.sidebar-playback-settings .sidebar-playback-group-title {
  margin: 0 0 0.6rem;
  padding: 0.5rem 0.65rem;
  border: none;
  border-bottom: 1px solid color-mix(in srgb, var(--spotlight) 14%, var(--border));
  border-radius: 0;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--panel) 88%, var(--spotlight) 12%) 0%,
    color-mix(in srgb, var(--bg) 96%, var(--spotlight) 4%) 100%
  );
  font-size: 0.73rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--text) 94%, var(--spotlight) 6%);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--spotlight) 6%, white 4%);
}

[data-theme="light"] .sidebar-playback-settings .sidebar-playback-group-title {
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--panel) 92%, var(--spotlight) 8%) 0%,
    color-mix(in srgb, var(--bg) 97%, var(--spotlight) 3%) 100%
  );
  color: color-mix(in srgb, var(--text) 92%, #9a6b12 8%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.sidebar-playback-settings .sidebar-playback-group > :not(.sidebar-playback-group-title) {
  margin-left: 0.55rem;
  margin-right: 0.55rem;
}

.sidebar-playback-settings .sidebar-playback-group > .sidebar-playback-subgroup {
  margin-left: 0.55rem;
  margin-right: 0.55rem;
}

.sidebar-playback-more {
  margin-top: 0.35rem;
}

.sidebar-playback-more-toggle {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  width: 100%;
  margin: 0;
  padding: 0.55rem 0.65rem;
  border: 1px dashed color-mix(in srgb, var(--border) 80%, var(--muted) 20%);
  border-radius: 8px;
  background: color-mix(in srgb, var(--panel) 96%, transparent);
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.sidebar-playback-more-toggle:hover {
  color: var(--text);
  border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
  background: color-mix(in srgb, var(--accent) 8%, var(--panel));
}

.sidebar-playback-more-toggle.is-open .sidebar-section-chevron {
  transform: rotate(90deg);
}

.sidebar-playback-more-body {
  margin-top: 0.55rem;
}

/* Unified field, slider, and checkbox rhythm inside playback cards. */
.sidebar-playback-settings .sidebar-field,
.sidebar-playback-settings .sidebar-slider-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  width: 100%;
  min-width: 0;
  font-size: inherit;
  box-sizing: border-box;
}

.sidebar-playback-settings .sidebar-playback-group > .sidebar-field,
.sidebar-playback-settings .sidebar-playback-group > .listen-playback-fields {
  width: auto;
}

.sidebar-playback-settings .sidebar-playback-select-field {
  margin: 0;
}

.sidebar-playback-settings .sidebar-playback-select-field > .form-select {
  width: 100%;
  box-sizing: border-box;
}

.sidebar-playback-settings .listen-reader-skin-field label,
.sidebar-playback-settings .listen-reader-decoration-label,
.sidebar-playback-settings .listen-environment-label {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin: 0;
}

.sidebar-playback-settings .sidebar-slider-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  width: 100%;
}

.sidebar-playback-settings .sidebar-field-value {
  flex-shrink: 0;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  font-size: 0.82rem;
}

.sidebar-playback-settings input[type="range"] {
  width: 100%;
  box-sizing: border-box;
}

.sidebar-playback-settings .listen-highlight-toggle {
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
  margin: 0 0 0.4rem;
  font-size: 0.82rem;
  line-height: 1.35;
  color: var(--text);
}

.sidebar-playback-settings .listen-playback-fields > * + * {
  margin-top: 0.45rem;
}

.sidebar-playback-settings .listen-speed-override-hint,
.sidebar-playback-settings #listen-sleep-timer-status,
.sidebar-playback-settings #listen-highlight-timing-note {
  margin: 0.15rem 0 0;
  font-size: 0.75rem;
  line-height: 1.35;
  opacity: 0.85;
}

.sidebar-playback-settings .listen-playback-fields .sidebar-field,
.sidebar-playback-settings .listen-playback-fields .listen-ambience-controls {
  margin-bottom: 0;
}

.sidebar-playback-settings .listen-playback-fields > .listen-speed-override-hint,
.sidebar-playback-settings .listen-playback-fields > .listen-sleep-timer-status {
  margin-top: 0.15rem;
}

.sidebar-playback-settings .listen-playback-fields > .listen-sleep-timer-field,
.sidebar-playback-settings .listen-playback-fields > .listen-skip-intro-animations-row {
  margin-top: 0.75rem;
}

.sidebar-playback-settings .listen-playback-fields > .listen-disable-page-turn-audio-row {
  margin-top: 0.75rem;
}

.sidebar-playback-settings .listen-highlight-sync .sidebar-field {
  margin: 0 0 0.5rem;
}

.sidebar-playback-settings .listen-speed label,
.sidebar-playback-settings .listen-highlight-sync label {
  display: flex;
  margin: 0;
}

.sidebar-playback-settings .listen-highlight-settings {
  margin-top: 0.15rem;
  width: auto;
  min-width: 0;
}

.sidebar-playback-settings .listen-highlight-sync {
  margin: 0.15rem 0 0;
  padding: 0;
  overflow: visible;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.sidebar-playback-settings .listen-highlight-sync .sidebar-field:last-child {
  margin-bottom: 0;
}

.sidebar-playback-settings .listen-highlight-sync > .listen-highlight-speed-field {
  margin-top: 0.85rem;
  padding-top: 0.45rem;
}

.sidebar-playback-settings .listen-ambience-controls {
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
  max-width: none;
}

.sidebar-playback-settings .listen-ambience-volume-label {
  margin: 0;
}

.sidebar-playback-group .listen-highlight-toggle:last-of-type {
  margin-bottom: 0;
}

.sidebar-playback-settings .sidebar-playback-subgroup {
  margin: 0 0 0.55rem;
  padding: 0.5rem 0.55rem 0.55rem;
  border-radius: 6px;
  border: 1px solid color-mix(in srgb, var(--border) 78%, var(--text) 6%);
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--text) 2.5%, transparent) 0%,
      transparent 36%
    ),
    repeating-linear-gradient(
      125deg,
      color-mix(in srgb, var(--text) 2.4%, transparent) 0 1px,
      transparent 1px 5px
    ),
    color-mix(in srgb, var(--bg) 90%, var(--panel));
  box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.16);
}

[data-theme="light"] .sidebar-playback-settings .sidebar-playback-subgroup {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.55) 0%, transparent 40%),
    color-mix(in srgb, var(--bg) 88%, var(--panel));
  border-color: color-mix(in srgb, var(--border) 100%, var(--text) 3%);
  box-shadow: inset 0 1px 3px rgba(26, 26, 46, 0.05);
}

.sidebar-playback-settings .sidebar-playback-subgroup:last-child {
  margin-bottom: 0;
}

.sidebar-playback-settings .sidebar-playback-group--environment > .sidebar-playback-subgroup {
  margin-top: 0.85rem;
}

.sidebar-playback-settings .sidebar-playback-subgroup-title-row {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin: -0.5rem -0.55rem 0.45rem;
  padding: 0.42rem 0.55rem 0.32rem;
  border: none;
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 12%, var(--border));
  border-radius: 6px 6px 0 0;
  background: color-mix(in srgb, var(--panel) 91%, var(--accent) 9%);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--accent) 5%, white 3%);
}

.sidebar-playback-settings .sidebar-playback-subgroup-title-row .sidebar-playback-subgroup-title {
  margin: 0;
  padding: 0;
  border-bottom: none;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--muted) 72%, var(--text) 28%);
  opacity: 0.92;
}

[data-theme="light"] .sidebar-playback-settings .sidebar-playback-subgroup-title-row {
  background: color-mix(in srgb, var(--panel) 94%, var(--accent) 6%);
  border-bottom-color: color-mix(in srgb, var(--accent) 14%, var(--border));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

[data-theme="light"]
  .sidebar-playback-settings
  .sidebar-playback-subgroup-title-row
  .sidebar-playback-subgroup-title {
  color: color-mix(in srgb, var(--muted) 78%, var(--text) 22%);
  opacity: 0.95;
}

.sidebar-playback-settings .sidebar-playback-subgroup-title {
  margin: 0 0 0.38rem;
  padding: 0 0 0.28rem;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 62%, transparent);
  font-size: 0.77rem;
  font-weight: 650;
  letter-spacing: 0.02em;
  color: color-mix(in srgb, var(--text) 92%, var(--muted));
  opacity: 1;
}

.sidebar-playback-settings .sidebar-playback-subgroup-hint {
  margin: 0 0 0.45rem;
  padding-left: 0.15rem;
  font-size: 0.72rem;
  line-height: 1.35;
  opacity: 0.8;
}

.sidebar-playback-settings .sidebar-playback-group .listen-reader-layout-field,
.sidebar-playback-settings .sidebar-playback-group .listen-display-format-field,
.sidebar-playback-settings .sidebar-playback-group .sidebar-field {
  margin-bottom: 0.5rem;
}

.sidebar-playback-settings .sidebar-playback-group .listen-highlight-settings {
  margin-bottom: 0;
}

.sidebar-playback-settings .curated-playback-lock-note {
  margin: 0 0 0.75rem;
  padding: 0.5rem 0.6rem;
  border-radius: calc(var(--radius) - 2px);
  border: 1px solid color-mix(in srgb, var(--spotlight) 42%, var(--border));
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--spotlight) 16%, var(--bg)) 0%,
    color-mix(in srgb, var(--spotlight) 8%, var(--bg)) 100%
  );
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--spotlight) 14%, white 6%);
}

.listen-environment-cinema-subgroup[hidden] {
  display: none !important;
}

.listen-reader-body {
  position: relative;
  z-index: 1;
  display: grid;
}

/* Web view: illustration, In scene, then current passage (legacy stack). */
.listen-atmosphere-host[data-reader-layout="web"] .listen-reader-body {
  grid-template-columns: 1fr;
  grid-template-areas:
    "image"
    "inscene"
    "current";
}

.listen-atmosphere-host[data-reader-layout="web"] .listen-spread-pages-row,
.listen-atmosphere-host[data-reader-layout="web"] .listen-spread-page--companion {
  display: contents;
}

/* Fantasy scroll wrappers sit inside the grid in web view — flatten them like book/minimal. */
.listen-atmosphere-host[data-reader-layout="web"] .listen-scroll-frame,
.listen-atmosphere-host[data-reader-layout="web"] .listen-scroll-sheet,
.listen-atmosphere-host[data-reader-layout="web"] .listen-scroll-parchment {
  display: contents;
}

.listen-atmosphere-host[data-reader-layout="web"] #listen-story-image-slot {
  grid-area: image;
}

.listen-atmosphere-host[data-reader-layout="web"] #listen-in-scene-panel {
  grid-area: inscene;
}

.listen-atmosphere-host[data-reader-layout="web"] .listen-spread-page--current {
  grid-area: current;
}

.listen-atmosphere-host[data-reader-layout="web"] #listen-companion-text-scroll {
  display: none !important;
}

/* Web view: chapter art only — book-flip back cover is book-layout ceremony UI. */
.listen-atmosphere-host[data-reader-layout="web"] .listen-book-page-face--back,
.listen-atmosphere-host[data-reader-layout="web"] #listen-book-closed-overlay {
  display: none !important;
}

/* Book view: In scene spans the spread; left = current, right = image or next. */
.listen-atmosphere-host[data-reader-layout="book"] .listen-reader-body {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.listen-atmosphere-host[data-reader-layout="book"] #listen-in-scene-panel {
  flex: 0 0 auto;
  border-radius: 10px 10px 0 0;
  position: relative;
  z-index: 12;
  isolation: isolate;
}

.listen-atmosphere-host[data-reader-layout="book"] .listen-spread-pages-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  flex: 1 1 auto;
  min-height: 14rem;
  border-top: none;
  align-items: stretch;
}

.listen-atmosphere-host[data-reader-layout="book"][data-display-format="paragraph"]
  .listen-spread-pages-row {
  height: clamp(32rem, 74vh, 36rem);
  min-height: clamp(32rem, 74vh, 36rem);
  flex: 0 0 auto;
}

.listen-atmosphere-host[data-reader-layout="book"] .listen-spread-page {
  min-height: 14rem;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--panel);
  position: relative;
}

.listen-atmosphere-host[data-reader-layout="book"][data-display-format="paragraph"]
  .listen-spread-page {
  min-height: 0;
}

.listen-page-footer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.4rem;
  z-index: 3;
  padding: 0 1rem;
  text-align: center;
  pointer-events: none;
  user-select: none;
}

.listen-page-number {
  display: inline-block;
  min-width: 1.5rem;
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  color: var(--listen-skin-muted, var(--muted));
  opacity: 0.72;
}

.listen-atmosphere-host[data-reader-layout="web"] .listen-spread-page--current .listen-text-scroll {
  padding-bottom: 1.85rem;
}

.listen-atmosphere-host[data-reader-layout="web"] .listen-spread-page--current {
  position: relative;
}

.listen-atmosphere-host[data-reader-layout="web"] .listen-page-footer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.4rem;
}

.listen-atmosphere-host[data-reader-layout="web"] .listen-page-footer--companion {
  display: none;
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="fantasy-scroll"]
  .listen-page-number {
  color: var(--listen-skin-muted, #4a3828);
  opacity: 0.65;
}

.listen-atmosphere-host[data-reader-layout="book"] .listen-spread-page--current {
  border-right: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
}

.listen-atmosphere-host[data-reader-layout="book"] .listen-spread-page--current .listen-text-scroll {
  flex: 1 1 auto;
  min-height: 12rem;
  padding-bottom: 1.85rem;
}

.listen-atmosphere-host[data-reader-layout="book"][data-display-format="paragraph"]
  .listen-spread-page--current:not(.listen-spread-page--image-side),
.listen-atmosphere-host[data-reader-layout="book"][data-display-format="paragraph"]
  .listen-spread-page--companion:not(.listen-spread-page--image-side) {
  overflow: hidden;
}

.listen-atmosphere-host[data-reader-layout="book"][data-display-format="paragraph"]
  .listen-spread-page--current
  .listen-text-scroll,
.listen-atmosphere-host[data-reader-layout="book"][data-display-format="paragraph"]
  .listen-companion-text-scroll {
  min-height: 0;
  flex: 1 1 auto;
  overflow-x: hidden;
  overflow-y: auto;
  padding-bottom: 5.5rem;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.listen-atmosphere-host[data-reader-layout="book"][data-display-format="paragraph"]
  .listen-spread-page--current
  .listen-text-scroll::-webkit-scrollbar,
.listen-atmosphere-host[data-reader-layout="book"][data-display-format="paragraph"]
  .listen-companion-text-scroll::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.listen-atmosphere-host[data-reader-layout="book"][data-display-format="paragraph"]
  .listen-page-footer {
  bottom: 0.85rem;
}

.listen-atmosphere-host[data-display-format="paragraph"] .listen-text {
  position: relative;
  white-space: pre-wrap;
  text-indent: 1.35em;
}

.listen-atmosphere-host[data-display-format="paragraph"]
  .listen-text.listen-text-dialogue::before,
.listen-atmosphere-host[data-display-format="paragraph"]
  .listen-text.listen-text-narration::before {
  content: "";
  display: none;
  position: absolute;
  left: 0.15rem;
  top: 1.15rem;
  bottom: 1.15rem;
  width: 3px;
  border-radius: 999px;
  background: var(--listen-speaker-color, var(--accent));
  pointer-events: none;
}

.listen-atmosphere-host[data-reader-layout="book"][data-display-format="paragraph"][data-book-page="left"]
  .listen-spread-page--current
  .listen-text.listen-text-dialogue::before,
.listen-atmosphere-host[data-reader-layout="book"][data-display-format="paragraph"][data-book-page="left"]
  .listen-spread-page--current
  .listen-text.listen-text-narration::before,
.listen-atmosphere-host[data-reader-layout="book"][data-display-format="paragraph"][data-book-page="right"]
  .listen-spread-page--companion
  .listen-text.listen-text-dialogue::before,
.listen-atmosphere-host[data-reader-layout="book"][data-display-format="paragraph"][data-book-page="right"]
  .listen-spread-page--companion
  .listen-text.listen-text-narration::before,
.listen-atmosphere-host:not([data-reader-layout="book"])[data-display-format="paragraph"]
  .listen-text.listen-text-dialogue::before,
.listen-atmosphere-host:not([data-reader-layout="book"])[data-display-format="paragraph"]
  .listen-text.listen-text-narration::before {
  display: block;
}

.listen-atmosphere-host[data-reader-layout="book"] .listen-spread-page--companion {
  position: relative;
  overflow: hidden;
}

.listen-atmosphere-host[data-reader-layout="book"] .listen-spread-page--companion:not(.listen-spread-page--image-side) .listen-story-image-slot {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding-bottom: 1.85rem;
}

.listen-atmosphere-host[data-reader-layout="book"] .listen-chapter-art,
.listen-atmosphere-host[data-reader-layout="book"] .listen-figure-card {
  flex: 1 1 auto;
  border-bottom: none;
  min-height: 12rem;
}

.listen-atmosphere-host[data-reader-layout="book"] .listen-chapter-art img,
.listen-atmosphere-host[data-reader-layout="book"] .listen-figure-card img {
  max-height: none;
  margin: 0;
}

.listen-atmosphere-host[data-reader-layout="book"] .listen-companion-text-scroll {
  flex: 1 1 auto;
  min-height: 12rem;
  cursor: default;
  padding-bottom: 1.85rem;
}

.listen-atmosphere-host[data-reader-layout="book"] .listen-text-preview {
  opacity: 0.88;
  cursor: default;
  user-select: text;
}

.listen-atmosphere-host[data-reader-layout="book"] .listen-text.listen-book-page-done,
.listen-atmosphere-host[data-reader-layout="book"] .listen-text.listen-book-page-pending {
  opacity: 0.72;
}

.listen-atmosphere-host[data-reader-layout="book"]
  .listen-text.listen-book-page-done
  .listen-word-active,
.listen-atmosphere-host[data-reader-layout="book"]
  .listen-text.listen-book-page-pending
  .listen-word-active {
  background: transparent;
  color: inherit;
  outline: none;
  box-shadow: none;
}

.listen-atmosphere-host[data-reader-layout="book"]
  .listen-text.listen-book-page-done
  .listen-word-trail,
.listen-atmosphere-host[data-reader-layout="book"]
  .listen-text.listen-book-page-pending
  .listen-word-trail {
  opacity: 1;
}

.listen-spread-pages-row.is-book-page-right-active .listen-spread-page--current {
  opacity: 0.82;
}

.listen-spread-pages-row.is-book-page-right-active .listen-spread-page--companion {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent, #4f8cff) 35%, transparent);
}

.listen-spread-pages-row.is-book-page-left-active .listen-spread-page--companion,
.listen-spread-pages-row.is-book-page-left-active
  .listen-spread-page--companion.listen-book-page-pending,
.listen-spread-pages-row.is-book-page-left-active #listen-companion-text-scroll.listen-book-page-pending {
  opacity: 0.72;
}

.listen-spread-pages-row.is-book-page-left-active .listen-spread-page--current {
  opacity: 1;
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin]:not([data-reader-skin="minimal"])
  .listen-spread-pages-row {
  position: relative;
}

/* Themed reader skins — full-height half-spread dim overlays (above text + deco). */
.listen-spread-page-dim {
  display: none;
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin]:not([data-reader-skin="minimal"])
  .listen-spread-page-dim--row {
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
  z-index: 5;
  pointer-events: none;
  background: transparent;
  transition: background 0.35s ease;
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="fantasy-scroll"]
  .listen-spread-page-dim--parchment {
  display: none !important;
}

/* Fantasy stack inside each page: skin/glow (z2) → inactive dim (z4) → text (z5). */
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="fantasy-scroll"]
  .listen-text-scroll,
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="fantasy-scroll"]
  .listen-story-image-slot,
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="fantasy-scroll"]
  .listen-companion-text-scroll,
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="fantasy-scroll"]
  .listen-page-footer {
  z-index: 5;
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="fantasy-scroll"][data-book-spread-active="left"]
  .listen-spread-page--companion::before,
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="fantasy-scroll"]
  .listen-spread-pages-row.is-book-page-left-active
  .listen-spread-page--companion::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background: rgba(8, 5, 2, 0.16);
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="fantasy-scroll"][data-book-spread-active="right"]
  .listen-spread-page--current::before,
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="fantasy-scroll"]
  .listen-spread-pages-row.is-book-page-right-active
  .listen-spread-page--current::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background: rgba(8, 5, 2, 0.16);
}

[data-theme="dark"]
  .listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="fantasy-scroll"][data-book-spread-active="left"]
  .listen-spread-page--companion::before,
[data-theme="dark"]
  .listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="fantasy-scroll"]
  .listen-spread-pages-row.is-book-page-left-active
  .listen-spread-page--companion::before,
[data-theme="dark"]
  .listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="fantasy-scroll"][data-book-spread-active="right"]
  .listen-spread-page--current::before,
[data-theme="dark"]
  .listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="fantasy-scroll"]
  .listen-spread-pages-row.is-book-page-right-active
  .listen-spread-page--current::before {
  background: rgba(0, 0, 0, 0.26);
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="fantasy-scroll"]
  .listen-spread-page-dim--row {
  display: none !important;
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin]:not([data-reader-skin="minimal"])
  .listen-spread-page-dim--left {
  left: 0;
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin]:not([data-reader-skin="minimal"])
  .listen-spread-page-dim--right {
  right: 0;
}

.listen-atmosphere-host[data-reader-layout="book"][data-book-spread-active="right"]
  .listen-spread-page-dim--left,
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin]:not([data-reader-skin="minimal"])
  .listen-spread-pages-row.is-book-page-right-active
  .listen-spread-page-dim--left {
  background: rgba(8, 5, 2, 0.25);
}

.listen-atmosphere-host[data-reader-layout="book"][data-book-spread-active="left"]
  .listen-spread-page-dim--right,
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin]:not([data-reader-skin="minimal"])
  .listen-spread-pages-row.is-book-page-left-active
  .listen-spread-page-dim--right {
  background: rgba(8, 5, 2, 0.30);
}

[data-theme="dark"]
  .listen-atmosphere-host[data-reader-layout="book"][data-book-spread-active="right"]
  .listen-spread-page-dim--left,
[data-theme="dark"]
  .listen-atmosphere-host[data-reader-layout="book"][data-reader-skin]:not([data-reader-skin="minimal"])
  .listen-spread-pages-row.is-book-page-right-active
  .listen-spread-page-dim--left {
  background: rgba(0, 0, 0, 0.38);
}

[data-theme="dark"]
  .listen-atmosphere-host[data-reader-layout="book"][data-book-spread-active="left"]
  .listen-spread-page-dim--right,
[data-theme="dark"]
  .listen-atmosphere-host[data-reader-layout="book"][data-reader-skin]:not([data-reader-skin="minimal"])
  .listen-spread-pages-row.is-book-page-left-active
  .listen-spread-page-dim--right {
  background: rgba(0, 0, 0, 0.44);
}

.listen-atmosphere-host[data-reader-layout="book"][data-companion-mode="image"]
  #listen-companion-text-scroll {
  display: none !important;
}

/* Companion illustration: vertically center within the page column. */
/* Illustrated book spread — stretch pages to art height (companion-mode or illustrated flag). */
.listen-atmosphere-host[data-reader-layout="book"][data-companion-mode="image"]
  .listen-spread-pages-row,
.listen-atmosphere-host[data-reader-layout="book"][data-companion-mode="next"]
  .listen-spread-pages-row,
.listen-atmosphere-host[data-reader-layout="book"][data-illustrated="on"]
  .listen-spread-pages-row {
  align-items: stretch;
}

.listen-atmosphere-host[data-reader-layout="book"][data-companion-mode="image"]
  .listen-spread-page--companion,
.listen-atmosphere-host[data-reader-layout="book"][data-companion-mode="next"]
  .listen-spread-page--companion {
  align-self: stretch;
  display: flex;
  flex-direction: column;
}

.listen-atmosphere-host[data-reader-layout="book"][data-companion-mode="image"]
  .listen-spread-page--companion:not(.listen-spread-page--image-side)
  .listen-story-image-slot {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 0;
}

.listen-atmosphere-host[data-reader-layout="book"][data-companion-mode="image"]
  .listen-spread-page--companion:not(.listen-spread-page--image-side)
  .listen-chapter-art,
.listen-atmosphere-host[data-reader-layout="book"][data-companion-mode="image"]
  .listen-spread-page--companion:not(.listen-spread-page--image-side)
  .listen-figure-card {
  flex: 1 1 auto;
  display: grid;
  place-items: center;
  min-height: 0;
  width: 100%;
  height: 100%;
}

.listen-atmosphere-host[data-reader-layout="book"][data-companion-mode="next"]
  #listen-story-image-slot:not(:has(.listen-story-image:not([hidden]))) {
  display: none;
}

/* Book spread image pages — one slot type (#listen-left-page-image-slot / #listen-right-page-image-slot). */
.listen-atmosphere-host[data-reader-layout="book"] .listen-page-image-slot[hidden] {
  display: none;
}

.listen-atmosphere-host[data-reader-layout="book"] .listen-spread-page--image-side .listen-book-page-body {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
}

.listen-atmosphere-host[data-reader-layout="book"] .listen-spread-page--image-side .listen-page-image-slot {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  overflow: hidden;
}

.listen-atmosphere-host[data-reader-layout="book"] .listen-spread-page--image-side .listen-page-image {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  margin: 0;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
}

.listen-atmosphere-host[data-reader-layout="book"] .listen-spread-page--image-side .listen-page-image img {
  display: block;
  flex: 0 0 auto;
  margin: 0;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center center;
  filter: none;
}

/* Portrait: fill page height. Landscape / square: fill page width. */
.listen-atmosphere-host[data-reader-layout="book"] .listen-page-image.is-portrait img,
.listen-atmosphere-host[data-reader-layout="book"] .listen-page-image-slot.is-portrait img {
  height: 100%;
  width: auto;
  max-height: 100%;
  max-width: none;
}

.listen-atmosphere-host[data-reader-layout="book"] .listen-page-image.is-landscape img,
.listen-atmosphere-host[data-reader-layout="book"] .listen-page-image-slot.is-landscape img {
  width: 100%;
  height: auto;
  max-width: 100%;
  max-height: none;
}

/* Format-override image pages: inset landscape art from the spine; album-style frame. */
.listen-atmosphere-host[data-reader-layout="book"] .listen-spread-page--image-side .listen-page-image img {
  box-sizing: border-box;
  border: 1px solid color-mix(in srgb, var(--listen-skin-muted, var(--muted)) 38%, transparent);
  border-radius: 1px;
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.16),
    inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  background: color-mix(in srgb, var(--panel) 88%, #ebe3d3);
}

.listen-atmosphere-host[data-reader-layout="book"]
  .listen-spread-page--current.listen-spread-page--image-side
  .listen-page-image-slot.is-landscape {
  padding-right: var(--listen-book-page-image-spine-gap, clamp(0.7rem, 5%, 1.4rem));
  padding-left: var(--listen-book-page-image-side-gap, clamp(0.45rem, 3%, 0.9rem));
  padding-top: var(--listen-book-page-image-side-gap, clamp(0.45rem, 3%, 0.9rem));
  padding-bottom: var(--listen-book-page-image-side-gap, clamp(0.45rem, 3%, 0.9rem));
}

.listen-atmosphere-host[data-reader-layout="book"]
  .listen-spread-page--companion.listen-spread-page--image-side
  .listen-page-image-slot.is-landscape {
  padding-left: var(--listen-book-page-image-spine-gap, clamp(0.7rem, 5%, 1.4rem));
  padding-right: var(--listen-book-page-image-side-gap, clamp(0.45rem, 3%, 0.9rem));
  padding-top: var(--listen-book-page-image-side-gap, clamp(0.45rem, 3%, 0.9rem));
  padding-bottom: var(--listen-book-page-image-side-gap, clamp(0.45rem, 3%, 0.9rem));
}

.listen-atmosphere-host[data-reader-layout="book"] .listen-spread-page--image-side .listen-page-image.is-landscape img,
.listen-atmosphere-host[data-reader-layout="book"]
  .listen-spread-page--image-side
  .listen-page-image-slot.is-landscape
  img {
  width: var(--listen-book-page-image-landscape-width, 94%);
  max-width: var(--listen-book-page-image-landscape-width, 94%);
}

/* Full paragraph: format-override images never use companion chapter-art slot. */
.listen-atmosphere-host[data-display-format="paragraph"][data-reader-layout="book"]
  .listen-spread-page--image-side
  .listen-story-image-slot {
  display: none !important;
}

/* Dialog-optimized companion chapter art (not full-paragraph format overrides). */
.listen-atmosphere-host[data-reader-layout="book"]:is([data-companion-mode="image"], [data-illustrated="on"])
  .listen-spread-page--companion:not(.listen-spread-page--image-side)
  .listen-story-image-slot {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 0;
  width: 100%;
  padding-bottom: 0;
}

.listen-atmosphere-host[data-reader-layout="book"]:is([data-companion-mode="image"], [data-illustrated="on"])
  .listen-spread-page--companion:not(.listen-spread-page--image-side)
  .listen-chapter-art,
.listen-atmosphere-host[data-reader-layout="book"]:is([data-companion-mode="image"], [data-illustrated="on"])
  .listen-spread-page--companion:not(.listen-spread-page--image-side)
  .listen-figure-card {
  flex: 1 1 auto;
  display: grid;
  place-items: center;
  min-height: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: transparent;
  border-bottom: none;
}

.listen-atmosphere-host[data-reader-layout="book"]:is([data-companion-mode="image"], [data-illustrated="on"])
  .listen-spread-page--companion:not(.listen-spread-page--image-side)
  .listen-chapter-art::after {
  display: none;
}

.listen-atmosphere-host[data-reader-layout="book"]:is([data-companion-mode="image"], [data-illustrated="on"])
  .listen-spread-page--companion:not(.listen-spread-page--image-side)
  .listen-chapter-art img,
.listen-atmosphere-host[data-reader-layout="book"]:is([data-companion-mode="image"], [data-illustrated="on"])
  .listen-spread-page--companion:not(.listen-spread-page--image-side)
  .listen-figure-card img,
.listen-atmosphere-host[data-reader-layout="book"]:is([data-companion-mode="image"], [data-illustrated="on"])
  .listen-spread-page--current:not(.listen-spread-page--image-side)
  .listen-chapter-art-layer {
  display: block;
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center center;
  filter: none;
  margin: 0;
}

.listen-atmosphere-host[data-reader-layout="book"] .listen-spread-page--image-side .listen-text-scroll,
.listen-atmosphere-host[data-reader-layout="book"] .listen-spread-page--image-side .listen-companion-text-scroll {
  display: none !important;
}

@media (max-width: 720px) {
  .listen-atmosphere-host[data-reader-layout="book"] .listen-spread-pages-row {
    grid-template-columns: 1fr;
  }

  .listen-atmosphere-host[data-reader-layout="book"] .listen-spread-page--current {
    border-right: none;
    border-bottom: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
  }

  .listen-atmosphere-host[data-reader-layout="book"]
    .listen-spread-page--image-side
    .listen-page-image-slot.is-landscape {
    padding-left: var(--listen-book-page-image-side-gap, clamp(0.45rem, 3%, 0.9rem));
    padding-right: var(--listen-book-page-image-side-gap, clamp(0.45rem, 3%, 0.9rem));
  }
}

/* Reader skins — visual themes for the Book view two-page spread.
 * Skins apply only when data-reader-layout="book". Scene mood overlays
 * and word highlights stack above the decorative skin layers. */
.listen-reader-skin-field {
  display: block;
  margin: 0 0 0.65rem;
}

.listen-reader-skin-field label,
.listen-reader-decoration-label {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin: 0 0 0.5rem;
}

.listen-atmosphere-host[data-reader-layout="book"] {
  --listen-skin-parchment-photo: url("/api/reader-skins/asset/textures/parchment.jpg");
  --listen-skin-parchment: url("/api/reader-skins/asset/textures/parchment-tile.svg");
  --listen-skin-notebook: url("/api/reader-skins/asset/textures/notebook-tile.svg");
  --listen-skin-scifi: url("/api/reader-skins/asset/textures/scifi-panel-tile.svg");
  --listen-skin-scifi-frame: url("/api/reader-skins/asset/decorations/scifi-panel-frame.svg");
  --listen-skin-scifi-cast-panel: url("/api/reader-skins/asset/decorations/scifi-panel-frame.svg");
  --listen-skin-roller: url("/api/reader-skins/asset/decorations/scroll-roller.svg");
  --listen-skin-deco-left: url("/api/reader-skins/asset/decorations/hero-winged-staff.svg");
  --listen-skin-deco-right: url("/api/reader-skins/asset/decorations/dragon-flying.svg");
  --listen-skin-dragon: url("/api/reader-skins/asset/decorations/dragon-flying.svg");
  --listen-skin-romance-paper: url("/api/reader-skins/asset/textures/romance-paper-tile.svg");
  --listen-skin-romance-seal: url("/api/reader-skins/asset/decorations/romance-wax-seal.svg");
  --listen-skin-romance-flourish: url("/api/reader-skins/asset/decorations/romance-flourish-corner.svg");
  --listen-skin-romance-petal: url("/api/reader-skins/asset/decorations/romance-petal.svg");
  --listen-skin-romance-rose: url("/api/reader-skins/asset/decorations/romance-rose.svg");
  --listen-skin-romance-hearts: url("/api/reader-skins/asset/decorations/romance-hearts.svg");
  --listen-skin-deco-opacity: 0.22;
  --listen-skin-watermark-opacity: var(--listen-skin-deco-opacity);
  --listen-skin-texture-opacity: 0.92;
  --listen-book-page-image-spine-gap: clamp(0.7rem, 5%, 1.4rem);
  --listen-book-page-image-side-gap: clamp(0.45rem, 3%, 0.9rem);
  --listen-book-page-image-landscape-width: 94%;
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-decoration="off"] {
  --listen-skin-deco-opacity: 0;
  --listen-skin-watermark-opacity: 0;
  --listen-skin-texture-opacity: 0.55;
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-decoration="full"] {
  --listen-skin-deco-opacity: 0.4;
  --listen-skin-watermark-opacity: 0.22;
  --listen-skin-texture-opacity: 1;
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-decoration="off"]
  .listen-spread-pages-row::before,
.listen-atmosphere-host[data-reader-layout="book"][data-reader-decoration="off"]
  .listen-spread-pages-row::after,
.listen-atmosphere-host[data-reader-layout="book"][data-reader-decoration="off"]
  .listen-page-skin-layer::after,
.listen-atmosphere-host[data-reader-layout="book"][data-reader-decoration="off"]
  .listen-spread-page--current
  .listen-page-skin-layer::before,
.listen-atmosphere-host[data-reader-layout="book"][data-reader-decoration="off"]
  .listen-book-page-curl {
  display: none !important;
}

.listen-reader-skin-hint {
  margin: 0.35rem 0 0;
  font-size: 0.75rem;
  line-height: 1.35;
  opacity: 0.85;
}

.listen-atmosphere-host[data-reader-layout="book"] .listen-spread-page {
  position: relative;
  isolation: isolate;
}

.listen-page-skin-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  border-radius: inherit;
}

.listen-atmosphere-host[data-reader-layout="book"] .listen-text-scroll,
.listen-atmosphere-host[data-reader-layout="book"] .listen-story-image-slot,
.listen-atmosphere-host[data-reader-layout="book"] .listen-companion-text-scroll {
  position: relative;
  z-index: 1;
}

/* ---- Minimal paper (default skin) ---- */
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="minimal"] {
  --listen-skin-ink: var(--text);
  --listen-skin-muted: var(--muted);
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="minimal"]
  .listen-spread-page--current
  .listen-page-skin-layer {
  background: linear-gradient(
    165deg,
    color-mix(in srgb, var(--panel) 92%, #fff8ef) 0%,
    var(--panel) 48%,
    color-mix(in srgb, var(--panel) 88%, #e8e0d4) 100%
  );
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--border) 40%, transparent);
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="minimal"]
  .listen-spread-page--companion
  .listen-page-skin-layer {
  background: linear-gradient(
    195deg,
    color-mix(in srgb, var(--panel) 90%, #fff8ef) 0%,
    var(--panel) 52%,
    color-mix(in srgb, var(--panel) 86%, #e8e0d4) 100%
  );
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--border) 35%, transparent);
}

[data-theme="dark"]
  .listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="minimal"]
  .listen-spread-page
  .listen-page-skin-layer {
  background: linear-gradient(
    165deg,
    color-mix(in srgb, var(--panel) 94%, #2a2620) 0%,
    var(--panel) 50%,
    color-mix(in srgb, var(--panel) 90%, #1e1c18) 100%
  );
}

/* Scroll frame — inert wrapper unless Fantasy scroll skin is active. */
.listen-scroll-frame {
  display: contents;
}

.listen-scroll-sheet {
  display: contents;
}

.listen-scroll-parchment,
.listen-scroll-roller,
.listen-scroll-roller-cap,
.listen-scroll-roller-shaft,
.listen-scroll-candle-flame,
.listen-scroll-candle-glow,
.listen-scroll-deco,
.listen-spread-page-dim--parchment,
.listen-book-spine-seam,
.listen-book-page-curl,
.listen-parchment-half {
  display: none;
}

/* Non-fantasy book skins: flatten parchment wrapper so spread layout is unchanged. */
.listen-atmosphere-host[data-reader-layout="book"]:not([data-reader-skin="fantasy-scroll"])
  .listen-scroll-parchment {
  display: contents;
}

.listen-atmosphere-host[data-reader-layout="book"]:not([data-reader-skin="fantasy-scroll"])
  .listen-spread-page-dim--parchment {
  display: none !important;
}

/* ---- Fantasy scroll ---- */
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="fantasy-scroll"] {
  --listen-skin-ink: #0d0805;
  --listen-skin-muted: #4a3828;
  --listen-skin-spoken: #7a6250;
  --listen-scroll-roller-width: 26px;
  --listen-scroll-roller-cap-height: 22px;
  --listen-scroll-cap-overhang: calc(var(--listen-scroll-roller-cap-height) * 0.55);
  --listen-scroll-parchment-overlap: 4px;
  --listen-folio-curl-height: 22px;
  overflow: visible;
  border-color: color-mix(in srgb, #8b6040 45%, var(--border));
  background: #120c06;
  box-shadow:
    0 10px 36px rgba(0, 0, 0, 0.45),
    inset 0 0 0 1px color-mix(in srgb, #8b6040 25%, transparent);
}

[data-theme="dark"]
  .listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="fantasy-scroll"] {
  --listen-skin-ink: #0a0604;
  --listen-skin-muted: #443528;
  --listen-skin-spoken: #8a7060;
  background: #0a0704;
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="fantasy-scroll"]
  .listen-reader-body {
  overflow: visible;
  padding: 0;
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="fantasy-scroll"]
  #listen-in-scene-panel {
  position: relative;
  z-index: 12;
  isolation: isolate;
  overflow: visible;
  margin: 0;
  background: color-mix(in srgb, #3d2814 55%, var(--panel));
  border-bottom: 1px solid color-mix(in srgb, #8b6040 35%, transparent);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28);
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="fantasy-scroll"]
  .listen-scroll-frame {
  display: block;
  position: relative;
  min-height: 0;
  padding-inline: var(--listen-scroll-roller-width);
  overflow: visible;
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="fantasy-scroll"]
  .listen-scroll-sheet {
  display: block;
  position: relative;
  min-height: 0;
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="fantasy-scroll"]
  .listen-scroll-parchment {
  display: block;
  position: relative;
  z-index: 0;
  overflow: hidden;
  border-radius: 2px;
  margin: 0 calc(-1 * var(--listen-scroll-parchment-overlap));
  background-color: transparent;
  background-image: none;
  box-shadow: none;
  contain: paint;
  /* Single spread silhouette — top edge tracks the 22px curl band (not shallow % clips). */
  -webkit-clip-path: polygon(
    0% 18px,
    10% 12px,
    20% 8px,
    25% 6px,
    30% 5px,
    40% 9px,
    50% 22px,
    60% 9px,
    70% 5px,
    75% 6px,
    80% 8px,
    90% 12px,
    100% 18px,
    100% calc(100% - 18px),
    90% calc(100% - 12px),
    80% calc(100% - 8px),
    75% calc(100% - 6px),
    70% calc(100% - 5px),
    60% calc(100% - 9px),
    50% calc(100% - 22px),
    40% calc(100% - 9px),
    30% calc(100% - 5px),
    25% calc(100% - 6px),
    20% calc(100% - 8px),
    10% calc(100% - 12px),
    0% calc(100% - 18px)
  );
  clip-path: polygon(
    0% 18px,
    10% 12px,
    20% 8px,
    25% 6px,
    30% 5px,
    40% 9px,
    50% 22px,
    60% 9px,
    70% 5px,
    75% 6px,
    80% 8px,
    90% 12px,
    100% 18px,
    100% calc(100% - 18px),
    90% calc(100% - 12px),
    80% calc(100% - 8px),
    75% calc(100% - 6px),
    70% calc(100% - 5px),
    60% calc(100% - 9px),
    50% calc(100% - 22px),
    40% calc(100% - 9px),
    30% calc(100% - 5px),
    25% calc(100% - 6px),
    20% calc(100% - 8px),
    10% calc(100% - 12px),
    0% calc(100% - 18px)
  );
}

/* Parchment texture on each half, clipped to the same curve as the pages. */
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="fantasy-scroll"]
  .listen-parchment-half {
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  width: calc(50% + 1px);
  z-index: 0;
  pointer-events: none;
  background-color: #dcc9a3;
  background-image: var(--listen-skin-parchment-photo), var(--listen-skin-parchment);
  background-size: 200% 100%;
  background-position: center;
  box-shadow:
    inset 0 0 48px rgba(60, 40, 20, 0.18),
    inset 0 0 0 1px rgba(120, 90, 50, 0.25);
  contain: paint;
}

/* Open-folio bow: top dips at spine + outer edge, peaks mid-page; bottom mirrors. */
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="fantasy-scroll"]
  .listen-parchment-half--left {
  left: 0;
  background-position: left center;
  -webkit-clip-path: polygon(
    0% 18px,
    20% 10px,
    40% 6px,
    50% 4px,
    60% 6px,
    80% 11px,
    100% 20px,
    100% calc(100% - 20px),
    80% calc(100% - 11px),
    60% calc(100% - 6px),
    50% calc(100% - 4px),
    40% calc(100% - 6px),
    20% calc(100% - 10px),
    0% calc(100% - 18px)
  );
  clip-path: polygon(
    0% 18px,
    20% 10px,
    40% 6px,
    50% 4px,
    60% 6px,
    80% 11px,
    100% 20px,
    100% calc(100% - 20px),
    80% calc(100% - 11px),
    60% calc(100% - 6px),
    50% calc(100% - 4px),
    40% calc(100% - 6px),
    20% calc(100% - 10px),
    0% calc(100% - 18px)
  );
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="fantasy-scroll"]
  .listen-parchment-half--right {
  right: 0;
  background-position: right center;
  -webkit-clip-path: polygon(
    0% 20px,
    20% 11px,
    40% 6px,
    50% 4px,
    60% 5px,
    80% 10px,
    100% 18px,
    100% calc(100% - 18px),
    80% calc(100% - 10px),
    60% calc(100% - 5px),
    50% calc(100% - 4px),
    40% calc(100% - 6px),
    20% calc(100% - 11px),
    0% calc(100% - 20px)
  );
  clip-path: polygon(
    0% 20px,
    20% 11px,
    40% 6px,
    50% 4px,
    60% 5px,
    80% 10px,
    100% 18px,
    100% calc(100% - 18px),
    80% calc(100% - 10px),
    60% calc(100% - 5px),
    50% calc(100% - 4px),
    40% calc(100% - 6px),
    20% calc(100% - 11px),
    0% calc(100% - 20px)
  );
}

/* Warm ambient wash on parchment halves only (not a full-rect overlay above the curves). */
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="fantasy-scroll"]
  .listen-parchment-half::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    transparent 0%,
    transparent 8%,
    rgba(255, 168, 95, 0.08) 16%,
    transparent 42%,
    rgba(40, 28, 16, 0.06) 100%
  );
}

[data-theme="dark"]
  .listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="fantasy-scroll"]
  .listen-parchment-half::after {
  background: linear-gradient(
    180deg,
    transparent 0%,
    transparent 8%,
    rgba(18, 12, 6, 0.1) 16%,
    rgba(28, 20, 12, 0.22) 100%
  );
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="fantasy-scroll"]
  .listen-in-scene-body {
  display: flex;
  flex-direction: row;
  align-items: center;
  position: relative;
  overflow: visible;
  gap: 0.35rem;
  margin: 0;
  padding: 0.45rem 1.65rem 0.5rem 0.55rem;
  border: 1px solid var(--border);
  border-top: none;
  border-radius: 0 0 10px 10px;
  background: color-mix(in srgb, var(--panel) 80%, transparent);
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="fantasy-scroll"]
  .listen-in-scene-toolbar {
  flex: 1 1 auto;
  position: relative;
  min-width: 0;
  overflow: visible;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="fantasy-scroll"]
  .listen-in-scene-panel.is-collapsed
  .listen-in-scene-body {
  display: none !important;
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="fantasy-scroll"]
  #listen-in-scene-panel
  .listen-cast-spotlight {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="fantasy-scroll"]
  .listen-in-scene-toolbar
  .listen-scene-candle:not(.is-floating) {
  position: absolute;
  left: 75%;
  top: 50%;
  z-index: 3;
  transform: translate(-50%, -50%);
  pointer-events: auto;
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="fantasy-scroll"]
  .listen-scene-candle {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 0 0 auto;
  width: 1.45rem;
  margin: 0;
  padding: 0;
  touch-action: none;
}

/* Brass cup + saucer under the wax (hidden for sci-fi holo lamp). */
.listen-scene-candle:not(.is-scifi-lamp) .listen-scene-candle-holder {
  position: relative;
  display: block;
  flex: 0 0 auto;
  width: 1.15rem;
  height: 0.52rem;
  margin: -0.14rem 0 0;
  pointer-events: none;
}

.listen-scene-candle:not(.is-scifi-lamp) .listen-scene-candle-holder::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  width: 0.82rem;
  height: 0.4rem;
  border-radius: 48% 48% 40% 40% / 58% 58% 42% 42%;
  background:
    linear-gradient(
      155deg,
      #f2d48a 0%,
      #c9a227 14%,
      #8b6914 38%,
      #e8c547 52%,
      #6b4a10 72%,
      #b8860b 88%,
      #d4af37 100%
    );
  box-shadow:
    inset 0 2px 3px rgba(255, 236, 180, 0.5),
    inset 0 -3px 5px rgba(35, 20, 6, 0.45),
    inset 0 0 0 1px rgba(90, 58, 14, 0.55),
    0 2px 5px rgba(0, 0, 0, 0.42);
}

.listen-scene-candle:not(.is-scifi-lamp) .listen-scene-candle-holder::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 1.08rem;
  height: 0.15rem;
  border-radius: 50%;
  background: linear-gradient(
    90deg,
    #5a3d0e 0%,
    #a07820 22%,
    #f0d080 48%,
    #a07820 72%,
    #5a3d0e 100%
  );
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.48),
    inset 0 1px 0 rgba(255, 228, 160, 0.42),
    inset 0 -1px 2px rgba(40, 24, 8, 0.35);
}

.listen-scene-candle-flame-controls {
  position: absolute;
  left: calc(100% + 0.2rem);
  top: -0.15rem;
  z-index: 6;
  display: none;
  flex-direction: column;
  gap: 0.2rem;
  pointer-events: auto;
}

.listen-scene-candle-flame-controls {
  display: none !important;
}

.listen-candle-flame-size-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  min-width: 44px;
  min-height: 44px;
  margin: 0;
  padding: 0;
  border: 1px solid color-mix(in srgb, #8b6040 55%, transparent);
  border-radius: 8px;
  font-size: 1.35rem;
  font-weight: 600;
  line-height: 1;
  color: #f5e6c8;
  background: color-mix(in srgb, #3d2814 88%, #1a1008);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.listen-candle-flame-size-btn:active {
  transform: scale(0.94);
  background: color-mix(in srgb, #5a3d22 90%, #1a1008);
}

#listen-in-scene-body > #listen-scene-candle.is-floating .listen-scene-candle-flame-controls {
  position: absolute;
  left: calc(100% + 0.2rem);
  top: -0.15rem;
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="fantasy-scroll"]
  #listen-in-scene-body > .listen-scene-candle.is-floating {
  position: absolute;
  z-index: 12;
  flex: none;
  margin: 0;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.45));
  cursor: grab;
  transform: translateX(-50%);
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="fantasy-scroll"]
  .listen-scene-candle.is-floating.is-dragging {
  cursor: grabbing;
}

#listen-in-scene-body > #listen-scene-candle.is-floating {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 1.45rem;
  padding: 0;
  pointer-events: auto;
  touch-action: none;
}

#listen-in-scene-body > #listen-scene-candle.is-floating.is-dragging {
  cursor: grabbing;
}

#listen-candle-drag-smoke {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 12000;
  overflow: hidden;
}

.listen-candle-drag-smoke-puff {
  position: fixed;
  width: 0.8rem;
  height: 0.8rem;
  margin-left: -0.4rem;
  margin-top: -0.4rem;
  pointer-events: none;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(180, 180, 180, 0.58) 0%, transparent 72%);
  filter: blur(1px);
  animation: listen-candle-smoke-rise 1.35s ease-out forwards;
}

.listen-scifi-spark-puff {
  width: 0.55rem;
  height: 0.55rem;
  margin-left: -0.275rem;
  margin-top: -0.275rem;
  background: radial-gradient(circle, rgba(180, 250, 255, 0.85) 0%, rgba(61, 214, 245, 0.35) 45%, transparent 72%);
  box-shadow: 0 0 8px rgba(61, 214, 245, 0.65);
  animation: listen-scifi-spark-rise 1.1s ease-out forwards;
}

@keyframes listen-scifi-spark-rise {
  0% {
    opacity: 0;
    transform: translateY(0) scale(0.4);
  }
  25% {
    opacity: 0.9;
  }
  100% {
    opacity: 0;
    transform: translateY(-1.1rem) scale(1.1);
  }
}

#listen-scene-candle.is-adjusting-flame .listen-scene-candle-flame,
#listen-in-scene-body > #listen-scene-candle.is-adjusting-flame .listen-scene-candle-flame {
  animation: none !important;
  transition: none !important;
}

.listen-atmosphere-host.is-adjusting-candle-flame .listen-scroll-candle-glow {
  transition: opacity 0.06s ease, transform 0.06s ease, filter 0.06s ease !important;
}

/* Legacy portal host (unused when candle is direct child of body). */
.listen-candle-portal-host {
  display: none;
}

#listen-in-scene-body > #listen-scene-candle.is-floating:not(.is-scifi-lamp) .listen-scene-candle-flame {
  display: block;
  position: relative;
  z-index: 2;
  width: 0.52rem;
  height: 1.2rem;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 50% 50% 42% 42%;
  cursor: pointer;
  background:
    radial-gradient(circle at 50% 85%, #ffe080 0%, #ffb040 35%, #ff6010 58%, transparent 78%);
  box-shadow:
    0 0 5px rgba(255, 200, 80, 1),
    0 0 14px rgba(255, 140, 40, 0.75),
    0 0 24px rgba(255, 100, 20, 0.35);
  transform-origin: 50% 92%;
}

#listen-in-scene-body > #listen-scene-candle.is-floating:not(.is-scifi-lamp) .listen-scene-candle-stick {
  display: block;
  position: relative;
  z-index: 1;
  width: 0.42rem;
  height: 1.05rem;
  margin: -0.08rem 0 0;
  padding: 0;
  border: none;
  border-radius: 1px;
  cursor: grab;
  background: linear-gradient(90deg, #e8e4dc 0%, #ffffff 42%, #d8d4cc 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    0 1px 2px rgba(0, 0, 0, 0.35);
}

#listen-in-scene-body > #listen-scene-candle.is-floating .listen-scene-candle-smoke {
  position: absolute;
  top: -0.15rem;
  left: 50%;
  width: 0.65rem;
  height: 0.65rem;
  margin-left: -0.325rem;
  pointer-events: none;
  opacity: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(180, 180, 180, 0.55) 0%, transparent 72%);
  filter: blur(1px);
}

#listen-in-scene-body > #listen-scene-candle.is-floating:not(.is-scifi-lamp).is-snuffed .listen-scene-candle-flame {
  opacity: 0;
  transform: scale(0.15);
  pointer-events: none;
  animation: none !important;
  box-shadow: none;
}

#listen-in-scene-body > #listen-scene-candle.is-floating:not(.is-scifi-lamp).is-snuffing .listen-scene-candle-flame {
  animation: listen-candle-snuff 0.55s ease forwards !important;
}

#listen-in-scene-body > #listen-scene-candle.is-floating:not(.is-scifi-lamp).is-relighting .listen-scene-candle-flame {
  animation: listen-candle-relight 0.42s ease-out forwards !important;
}

#listen-in-scene-body > #listen-scene-candle.is-floating:not(.is-scifi-lamp).is-snuffing .listen-scene-candle-smoke {
  animation: listen-candle-smoke-rise 1.75s ease-out forwards;
}

@media (prefers-reduced-motion: no-preference) {
  #listen-in-scene-panel
    > #listen-scene-candle.is-floating:not(.is-scifi-lamp):not(.is-snuffed):not(.is-snuffing):not(.is-relighting)
    .listen-scene-candle-flame {
    transition:
      opacity 0.24s ease-in-out,
      transform 0.28s ease-in-out,
      filter 0.3s ease-in-out,
      box-shadow 0.3s ease-in-out;
  }
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="fantasy-scroll"]
  .listen-scene-candle-stick {
  cursor: grab;
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="fantasy-scroll"]
  .listen-scene-candle[hidden] {
  display: none !important;
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="fantasy-scroll"]
  .listen-scene-candle-flame {
  display: block;
  position: relative;
  z-index: 2;
  width: 0.52rem;
  height: 1.2rem;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 50% 50% 42% 42%;
  cursor: pointer;
  background:
    radial-gradient(circle at 50% 85%, #ffe080 0%, #ffb040 35%, #ff6010 58%, transparent 78%);
  box-shadow:
    0 0 5px rgba(255, 200, 80, 1),
    0 0 14px rgba(255, 140, 40, 0.75),
    0 0 24px rgba(255, 100, 20, 0.35);
  transform-origin: 50% 92%;
}

@media (prefers-reduced-motion: no-preference) {
  .listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="fantasy-scroll"][data-candle-flicker="js"]
    .listen-scene-candle:not(.is-snuffed):not(.is-snuffing):not(.is-relighting)
    .listen-scene-candle-flame {
    transition:
      opacity 0.24s ease-in-out,
      transform 0.28s ease-in-out,
      filter 0.3s ease-in-out,
      box-shadow 0.3s ease-in-out;
  }

  .listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="fantasy-scroll"][data-candle-flicker="js"]
    .listen-scroll-candle-glow {
    transition:
      opacity 0.55s ease-in-out,
      transform 0.65s ease-in-out,
      filter 0.7s ease-in-out;
    transform-origin: 78% 10%;
  }

  .listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="fantasy-scroll"][data-candle-flicker="js"][data-candle-glow-user="1"]
    .listen-scroll-candle-glow {
    transform-origin: calc(var(--listen-candle-glow-x, 78) * 1%) calc(var(--listen-candle-glow-y, 10) * 1%);
  }
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="fantasy-scroll"]
  .listen-scene-candle-stick {
  display: block;
  position: relative;
  z-index: 1;
  width: 0.42rem;
  height: 1.05rem;
  margin: -0.08rem 0 0;
  padding: 0;
  border: none;
  border-radius: 1px;
  cursor: pointer;
  background: linear-gradient(
    90deg,
    #e8e4dc 0%,
    #ffffff 42%,
    #d8d4cc 100%
  );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    0 1px 2px rgba(0, 0, 0, 0.35);
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="fantasy-scroll"]
  .listen-scene-candle-stick:not(:disabled) {
  cursor: pointer;
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="fantasy-scroll"]
  .listen-scene-candle.is-snuffed
  .listen-scene-candle-flame {
  opacity: 0;
  transform: scale(0.15);
  pointer-events: none;
  animation: none !important;
  box-shadow: none;
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="fantasy-scroll"]
  .listen-scene-candle.is-snuffing
  .listen-scene-candle-flame {
  animation: listen-candle-snuff 0.55s ease forwards !important;
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="fantasy-scroll"]
  .listen-scene-candle.is-relighting
  .listen-scene-candle-flame {
  animation: listen-candle-relight 0.42s ease-out forwards !important;
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="fantasy-scroll"]
  .listen-scene-candle-smoke {
  position: absolute;
  top: -0.15rem;
  left: 50%;
  width: 0.65rem;
  height: 0.65rem;
  margin-left: -0.325rem;
  pointer-events: none;
  opacity: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(180, 180, 180, 0.55) 0%, transparent 72%);
  filter: blur(1px);
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="fantasy-scroll"]
  .listen-scene-candle.is-snuffing
  .listen-scene-candle-smoke {
  animation: listen-candle-smoke-rise 1.75s ease-out forwards;
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="fantasy-scroll"]
  .listen-scene-candle:not(.is-snuffed):not(.is-dragging)
  .listen-scene-candle-smoke.is-wisping {
  animation: listen-candle-smoke-rise 1.45s ease-out forwards;
}

#listen-in-scene-body > #listen-scene-candle.is-floating:not(.is-snuffed):not(.is-dragging)
  .listen-scene-candle-smoke.is-wisping {
  animation: listen-candle-smoke-rise 1.45s ease-out forwards;
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="fantasy-scroll"]
  .listen-scroll-candle-glow {
  display: block;
  position: absolute;
  inset: -8%;
  z-index: 2;
  pointer-events: none;
  opacity: 0.54;
  transition: opacity 0.45s ease, filter 0.55s ease-in-out;
  background:
    radial-gradient(
      ellipse 95% 85% at 78% 10%,
      rgba(255, 210, 120, 0.38) 0%,
      rgba(255, 175, 75, 0.17) 28%,
      rgba(255, 145, 50, 0.06) 48%,
      transparent 72%
    ),
    radial-gradient(
      ellipse 110% 75% at 48% 22%,
      rgba(255, 185, 90, 0.12) 0%,
      rgba(255, 150, 60, 0.04) 40%,
      transparent 68%
    ),
    radial-gradient(
      ellipse 90% 70% at 18% 28%,
      rgba(255, 160, 70, 0.08) 0%,
      rgba(255, 130, 50, 0.03) 35%,
      transparent 62%
    );
}

/* User-moved candle: pool follows the flame across the spread. */
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="fantasy-scroll"][data-candle-glow-user="1"]
  .listen-scroll-candle-glow {
  inset: -12%;
  opacity: calc(0.64 * var(--listen-candle-glow-strength, 1));
  transform: scale(var(--listen-candle-glow-spread, 1));
  transition: opacity 0.45s ease, transform 0.45s ease, filter 0.55s ease-in-out;
  transform-origin: calc(var(--listen-candle-glow-x, 78) * 1%) calc(var(--listen-candle-glow-y, 10) * 1%);
  background:
    radial-gradient(
      ellipse 118% 95% at
        calc(var(--listen-candle-glow-x, 78) * 1%)
        calc(var(--listen-candle-glow-y, 10) * 1%),
      rgba(255, 168, 72, 0.48) 0%,
      rgba(255, 132, 48, 0.26) 26%,
      rgba(255, 98, 22, 0.1) 50%,
      transparent 78%
    ),
    radial-gradient(
      ellipse 130% 88% at
        calc((var(--listen-candle-glow-x, 78) - 28) * 1%)
        calc((var(--listen-candle-glow-y, 10) + 10) * 1%),
      rgba(255, 148, 58, 0.18) 0%,
      rgba(255, 112, 32, 0.07) 38%,
      transparent 72%
    ),
    radial-gradient(
      ellipse 105% 82% at
        calc((var(--listen-candle-glow-x, 78) - 55) * 1%)
        calc((var(--listen-candle-glow-y, 10) + 16) * 1%),
      rgba(255, 125, 42, 0.12) 0%,
      rgba(255, 92, 18, 0.04) 36%,
      transparent 68%
    ),
    radial-gradient(
      ellipse 140% 100% at
        calc((var(--listen-candle-glow-x, 78) - 12) * 1%)
        calc((var(--listen-candle-glow-y, 10) + 22) * 1%),
      rgba(255, 138, 52, 0.06) 0%,
      rgba(255, 102, 28, 0.02) 42%,
      transparent 76%
    );
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="fantasy-scroll"][data-candle-lit="0"]
  .listen-scroll-candle-glow {
  opacity: 0.06;
  animation: none !important;
}

[data-theme="dark"]
  .listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="fantasy-scroll"]
  .listen-scroll-candle-glow {
  opacity: 0.58;
  background:
    radial-gradient(
      ellipse 95% 85% at 78% 10%,
      rgba(255, 195, 100, 0.36) 0%,
      rgba(255, 155, 60, 0.16) 28%,
      rgba(255, 120, 40, 0.06) 48%,
      transparent 72%
    ),
    radial-gradient(
      ellipse 110% 75% at 48% 22%,
      rgba(255, 170, 80, 0.12) 0%,
      rgba(255, 130, 50, 0.05) 40%,
      transparent 68%
    ),
    radial-gradient(
      ellipse 90% 70% at 18% 28%,
      rgba(255, 140, 60, 0.08) 0%,
      rgba(255, 110, 40, 0.03) 35%,
      transparent 62%
    );
}

[data-theme="dark"]
  .listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="fantasy-scroll"][data-candle-glow-user="1"]
  .listen-scroll-candle-glow {
  opacity: calc(0.68 * var(--listen-candle-glow-strength, 1));
  background:
    radial-gradient(
      ellipse 118% 95% at
        calc(var(--listen-candle-glow-x, 78) * 1%)
        calc(var(--listen-candle-glow-y, 10) * 1%),
      rgba(255, 155, 62, 0.38) 0%,
      rgba(255, 118, 38, 0.2) 26%,
      rgba(255, 88, 18, 0.07) 50%,
      transparent 78%
    ),
    radial-gradient(
      ellipse 130% 88% at
        calc((var(--listen-candle-glow-x, 78) - 28) * 1%)
        calc((var(--listen-candle-glow-y, 10) + 10) * 1%),
      rgba(255, 132, 48, 0.16) 0%,
      rgba(255, 98, 24, 0.06) 38%,
      transparent 72%
    ),
    radial-gradient(
      ellipse 105% 82% at
        calc((var(--listen-candle-glow-x, 78) - 55) * 1%)
        calc((var(--listen-candle-glow-y, 10) + 16) * 1%),
      rgba(255, 115, 38, 0.1) 0%,
      rgba(255, 82, 14, 0.04) 36%,
      transparent 68%
    ),
    radial-gradient(
      ellipse 140% 100% at
        calc((var(--listen-candle-glow-x, 78) - 12) * 1%)
        calc((var(--listen-candle-glow-y, 10) + 22) * 1%),
      rgba(255, 125, 45, 0.05) 0%,
      rgba(255, 92, 18, 0.02) 42%,
      transparent 76%
    );
}

[data-theme="dark"]
  .listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="fantasy-scroll"][data-candle-lit="0"]
  .listen-scroll-candle-glow {
  opacity: 0.05;
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="fantasy-scroll"]
  .listen-scroll-deco {
  display: block;
  position: absolute;
  z-index: 8;
  pointer-events: none;
  opacity: var(--listen-skin-watermark-opacity);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="fantasy-scroll"]
  .listen-scroll-deco--hero {
  left: 3%;
  bottom: 2%;
  width: min(22%, 5.5rem);
  height: min(30%, 7rem);
  background-image: var(--listen-skin-deco-left);
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="fantasy-scroll"]
  .listen-scroll-deco--dragon {
  right: 3%;
  bottom: 2%;
  z-index: 8;
  width: min(26%, 6.5rem);
  height: min(26%, 6rem);
  background-image: var(--listen-skin-deco-right);
}

[data-theme="dark"]
  .listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="fantasy-scroll"]
  .listen-scroll-deco {
  filter: brightness(0) invert(1);
  opacity: calc(var(--listen-skin-watermark-opacity) * 0.8);
}

@media (prefers-reduced-motion: no-preference) {
  .listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="fantasy-scroll"][data-candle-flicker="js"]
    .listen-scene-candle.is-relighting
    .listen-scene-candle-flame {
    animation: listen-candle-relight 0.42s ease-out forwards;
  }

  .listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="fantasy-scroll"][data-reader-decoration="full"]
    .listen-scroll-deco--dragon {
    animation: listen-skin-dragon-breathe 8s ease-in-out infinite;
  }
}

@keyframes listen-candle-snuff {
  0% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
    filter: brightness(1);
  }
  45% {
    opacity: 0.55;
    transform: scale(0.55) rotate(6deg);
    filter: brightness(0.7);
  }
  100% {
    opacity: 0;
    transform: scale(0.12) rotate(-4deg);
    filter: brightness(0.4);
  }
}

@keyframes listen-candle-relight {
  0% {
    opacity: 0;
    transform: scale(0.15) rotate(-3deg);
    filter: brightness(0.5);
  }
  55% {
    opacity: 1;
    transform: scale(1.18) rotate(3deg);
    filter: brightness(1.25);
  }
  100% {
    opacity: 0.92;
    transform: scale(1) rotate(-2deg);
    filter: brightness(1);
  }
}

@keyframes listen-candle-smoke-rise {
  0% {
    opacity: 0;
    transform: translateY(0) scale(0.5);
  }
  18% {
    opacity: 0.65;
    transform: translateY(-0.2rem) scale(0.85);
  }
  100% {
    opacity: 0;
    transform: translateY(-1.35rem) scale(1.35);
  }
}

@keyframes listen-skin-dragon-breathe {
  0%,
  100% {
    opacity: calc(var(--listen-skin-watermark-opacity) * 0.85);
  }
  50% {
    opacity: calc(var(--listen-skin-watermark-opacity) * 1.15);
  }
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="fantasy-scroll"]
  .listen-scroll-roller {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: absolute;
  top: calc(-1 * var(--listen-scroll-cap-overhang));
  bottom: calc(-1 * var(--listen-scroll-cap-overhang));
  width: var(--listen-scroll-roller-width);
  z-index: 13;
  pointer-events: none;
  filter: drop-shadow(2px 0 10px rgba(0, 0, 0, 0.5));
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="fantasy-scroll"]
  .listen-scroll-roller-cap {
  display: block;
  flex: 0 0 var(--listen-scroll-roller-cap-height);
  width: 100%;
  background: var(--listen-skin-roller-cap) center / contain no-repeat;
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="fantasy-scroll"]
  .listen-scroll-roller-cap--bottom {
  transform: scaleY(-1);
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="fantasy-scroll"]
  .listen-scroll-roller-shaft {
  display: block;
  flex: 1 1 auto;
  width: 72%;
  min-height: 0.5rem;
  background: var(--listen-skin-roller-shaft) center top / 100% auto repeat-y;
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="fantasy-scroll"]
  .listen-scroll-roller--left {
  left: 0;
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="fantasy-scroll"]
  .listen-scroll-roller--right {
  right: 0;
  transform: scaleX(-1);
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="fantasy-scroll"]
  .listen-spread-pages-row {
  display: grid;
  position: relative;
  z-index: 3;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  min-height: 0;
  background: transparent;
  perspective: 1400px;
  perspective-origin: 50% 42%;
}

/* Open-folio fore-edge shadow only — no top/bottom center fill (that leaked above the curves). */
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="fantasy-scroll"]
  .listen-spread-pages-row::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background:
    radial-gradient(ellipse 9% 92% at 0% 50%, rgba(18, 10, 4, 0.1) 0%, transparent 68%),
    radial-gradient(ellipse 9% 92% at 100% 50%, rgba(18, 10, 4, 0.1) 0%, transparent 68%);
}

/* Center binding gutter — stitched leather/brass seam between pages. */
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="fantasy-scroll"]
  .listen-book-spine-seam {
  display: block;
  position: absolute;
  top: -1px;
  bottom: -1px;
  left: 50%;
  transform: translateX(-50%);
  width: 1.15rem;
  z-index: 6;
  pointer-events: none;
  background:
    linear-gradient(
      90deg,
      rgba(12, 7, 3, 0) 0%,
      rgba(18, 10, 4, 0.42) 12%,
      rgba(52, 32, 14, 0.72) 28%,
      rgba(18, 10, 4, 0.92) 49%,
      rgba(110, 78, 34, 0.55) 50%,
      rgba(18, 10, 4, 0.92) 51%,
      rgba(52, 32, 14, 0.72) 72%,
      rgba(18, 10, 4, 0.42) 88%,
      rgba(12, 7, 3, 0) 100%
    );
  box-shadow:
    inset 3px 0 8px rgba(0, 0, 0, 0.28),
    inset -3px 0 8px rgba(0, 0, 0, 0.28),
    0 0 10px rgba(0, 0, 0, 0.12);
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="fantasy-scroll"]
  .listen-book-spine-seam::before {
  content: "";
  position: absolute;
  inset: 8% 42%;
  border-radius: 2px;
  background: repeating-linear-gradient(
    180deg,
    rgba(180, 140, 60, 0.22) 0 3px,
    rgba(40, 24, 10, 0.35) 3px 5px
  );
  box-shadow:
    inset 0 0 4px rgba(0, 0, 0, 0.35),
    0 0 1px rgba(220, 180, 90, 0.35);
  opacity: 0.85;
}

[data-theme="dark"]
  .listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="fantasy-scroll"]
  .listen-book-spine-seam {
  background:
    linear-gradient(
      90deg,
      rgba(0, 0, 0, 0) 0%,
      rgba(8, 5, 2, 0.5) 12%,
      rgba(28, 18, 8, 0.78) 28%,
      rgba(6, 4, 2, 0.95) 49%,
      rgba(90, 62, 28, 0.45) 50%,
      rgba(6, 4, 2, 0.95) 51%,
      rgba(28, 18, 8, 0.78) 72%,
      rgba(8, 5, 2, 0.5) 88%,
      rgba(0, 0, 0, 0) 100%
    );
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="fantasy-scroll"]
  .listen-spread-page {
  align-self: start;
  height: auto;
  min-height: 0;
  background: transparent !important;
  backface-visibility: hidden;
}

.listen-atmosphere-host[data-reader-layout="book"]:not([data-reader-skin="fantasy-scroll"])
  .listen-book-page-body {
  display: contents;
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="fantasy-scroll"]
  .listen-book-page-body {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  width: 100%;
  overflow: hidden;
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="fantasy-scroll"]
  .listen-spread-page--current {
  transform: rotateY(2deg);
  transform-origin: 100% 46%;
  border-right: none;
  box-shadow: inset -10px 0 16px -6px rgba(28, 16, 8, 0.24);
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="fantasy-scroll"]
  .listen-spread-page--companion {
  transform: rotateY(-2deg);
  transform-origin: 0% 46%;
  box-shadow: inset 10px 0 16px -6px rgba(28, 16, 8, 0.24);
}

/* Curved page silhouette on inner body (not on transform parent — avoids clip bugs). */
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="fantasy-scroll"]
  .listen-spread-page--current
  .listen-book-page-body {
  -webkit-clip-path: polygon(
    0% 18px,
    20% 10px,
    40% 6px,
    50% 4px,
    60% 6px,
    80% 11px,
    100% 20px,
    100% calc(100% - 20px),
    80% calc(100% - 11px),
    60% calc(100% - 6px),
    50% calc(100% - 4px),
    40% calc(100% - 6px),
    20% calc(100% - 10px),
    0% calc(100% - 18px)
  );
  clip-path: polygon(
    0% 18px,
    20% 10px,
    40% 6px,
    50% 4px,
    60% 6px,
    80% 11px,
    100% 20px,
    100% calc(100% - 20px),
    80% calc(100% - 11px),
    60% calc(100% - 6px),
    50% calc(100% - 4px),
    40% calc(100% - 6px),
    20% calc(100% - 10px),
    0% calc(100% - 18px)
  );
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="fantasy-scroll"]
  .listen-spread-page--companion
  .listen-book-page-body {
  -webkit-clip-path: polygon(
    0% 20px,
    20% 11px,
    40% 6px,
    50% 4px,
    60% 5px,
    80% 10px,
    100% 18px,
    100% calc(100% - 18px),
    80% calc(100% - 10px),
    60% calc(100% - 5px),
    50% calc(100% - 4px),
    40% calc(100% - 6px),
    20% calc(100% - 11px),
    0% calc(100% - 20px)
  );
  clip-path: polygon(
    0% 20px,
    20% 11px,
    40% 6px,
    50% 4px,
    60% 5px,
    80% 10px,
    100% 18px,
    100% calc(100% - 18px),
    80% calc(100% - 10px),
    60% calc(100% - 5px),
    50% calc(100% - 4px),
    40% calc(100% - 6px),
    20% calc(100% - 11px),
    0% calc(100% - 20px)
  );
}

/* Full-width stacked fore-edges on each page half. */
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="fantasy-scroll"]
  .listen-book-page-curl {
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  height: 22px;
  z-index: 9;
  pointer-events: none;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="fantasy-scroll"]
  .listen-book-page-curl--top {
  top: 0;
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="fantasy-scroll"]
  .listen-book-page-curl--bottom {
  bottom: 0;
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="fantasy-scroll"]
  .listen-spread-page--current
  .listen-book-page-curl--top {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 22' preserveAspectRatio='none'%3E%3Cpath d='M0 10 Q25 3.5 50 2.8 Q75 4.2 100 13' fill='none' stroke='%231a1008' stroke-width='1.35' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M0 12 Q25 5.5 50 4.8 Q75 6.2 100 15' fill='none' stroke='%23ebe0c8' stroke-width='1.15' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M0 14 Q25 7.5 50 6.8 Q75 8.2 100 17' fill='none' stroke='%233a2414' stroke-width='1' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M0 16 Q25 9.5 50 8.8 Q75 10.2 100 19' fill='none' stroke='%23dcc9a3' stroke-width='0.95' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M0 18 Q25 11.5 50 10.8 Q75 12.2 100 21' fill='none' stroke='%23281810' stroke-width='0.85' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="fantasy-scroll"]
  .listen-spread-page--current
  .listen-book-page-curl--bottom {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 22' preserveAspectRatio='none'%3E%3Cpath d='M0 12 Q25 18.5 50 19.2 Q75 17.8 100 9' fill='none' stroke='%231a1008' stroke-width='1.35' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M0 10 Q25 16.5 50 17.2 Q75 15.8 100 7' fill='none' stroke='%23ebe0c8' stroke-width='1.15' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M0 8 Q25 14.5 50 15.2 Q75 13.8 100 5' fill='none' stroke='%233a2414' stroke-width='1' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M0 6 Q25 12.5 50 13.2 Q75 11.8 100 3' fill='none' stroke='%23dcc9a3' stroke-width='0.95' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M0 4 Q25 10.5 50 11.2 Q75 9.8 100 1' fill='none' stroke='%23281810' stroke-width='0.85' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="fantasy-scroll"]
  .listen-spread-page--companion
  .listen-book-page-curl--top {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 22' preserveAspectRatio='none'%3E%3Cpath d='M0 13 Q25 4.2 50 2.8 Q75 3.5 100 10' fill='none' stroke='%231a1008' stroke-width='1.35' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M0 15 Q25 6.2 50 4.8 Q75 5.5 100 12' fill='none' stroke='%23ebe0c8' stroke-width='1.15' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M0 17 Q25 8.2 50 6.8 Q75 7.5 100 14' fill='none' stroke='%233a2414' stroke-width='1' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M0 19 Q25 10.2 50 8.8 Q75 9.5 100 16' fill='none' stroke='%23dcc9a3' stroke-width='0.95' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M0 21 Q25 12.2 50 10.8 Q75 11.5 100 18' fill='none' stroke='%23281810' stroke-width='0.85' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="fantasy-scroll"]
  .listen-spread-page--companion
  .listen-book-page-curl--bottom {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 22' preserveAspectRatio='none'%3E%3Cpath d='M0 9 Q25 17.8 50 19.2 Q75 18.5 100 12' fill='none' stroke='%231a1008' stroke-width='1.35' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M0 7 Q25 15.8 50 17.2 Q75 16.5 100 10' fill='none' stroke='%23ebe0c8' stroke-width='1.15' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M0 5 Q25 13.8 50 15.2 Q75 14.5 100 8' fill='none' stroke='%233a2414' stroke-width='1' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M0 3 Q25 11.8 50 13.2 Q75 12.5 100 6' fill='none' stroke='%23dcc9a3' stroke-width='0.95' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M0 1 Q25 9.8 50 11.2 Q75 10.5 100 4' fill='none' stroke='%23281810' stroke-width='0.85' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
}

[data-theme="dark"]
  .listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="fantasy-scroll"]
  .listen-spread-page--current
  .listen-book-page-curl--top {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 22' preserveAspectRatio='none'%3E%3Cpath d='M0 10 Q25 3.5 50 2.8 Q75 4.2 100 13' fill='none' stroke='%230e0804' stroke-width='1.35' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M0 12 Q25 5.5 50 4.8 Q75 6.2 100 15' fill='none' stroke='%23c9b088' stroke-width='1.15' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M0 14 Q25 7.5 50 6.8 Q75 8.2 100 17' fill='none' stroke='%2316100a' stroke-width='1' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M0 16 Q25 9.5 50 8.8 Q75 10.2 100 19' fill='none' stroke='%23b89868' stroke-width='0.95' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M0 18 Q25 11.5 50 10.8 Q75 12.2 100 21' fill='none' stroke='%230c0602' stroke-width='0.85' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
}

[data-theme="dark"]
  .listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="fantasy-scroll"]
  .listen-spread-page--current
  .listen-book-page-curl--bottom {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 22' preserveAspectRatio='none'%3E%3Cpath d='M0 12 Q25 18.5 50 19.2 Q75 17.8 100 9' fill='none' stroke='%230e0804' stroke-width='1.35' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M0 10 Q25 16.5 50 17.2 Q75 15.8 100 7' fill='none' stroke='%23c9b088' stroke-width='1.15' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M0 8 Q25 14.5 50 15.2 Q75 13.8 100 5' fill='none' stroke='%2316100a' stroke-width='1' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M0 6 Q25 12.5 50 13.2 Q75 11.8 100 3' fill='none' stroke='%23b89868' stroke-width='0.95' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M0 4 Q25 10.5 50 11.2 Q75 9.8 100 1' fill='none' stroke='%230c0602' stroke-width='0.85' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
}

[data-theme="dark"]
  .listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="fantasy-scroll"]
  .listen-spread-page--companion
  .listen-book-page-curl--top {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 22' preserveAspectRatio='none'%3E%3Cpath d='M0 13 Q25 4.2 50 2.8 Q75 3.5 100 10' fill='none' stroke='%230e0804' stroke-width='1.35' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M0 15 Q25 6.2 50 4.8 Q75 5.5 100 12' fill='none' stroke='%23c9b088' stroke-width='1.15' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M0 17 Q25 8.2 50 6.8 Q75 7.5 100 14' fill='none' stroke='%2316100a' stroke-width='1' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M0 19 Q25 10.2 50 8.8 Q75 9.5 100 16' fill='none' stroke='%23b89868' stroke-width='0.95' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M0 21 Q25 12.2 50 10.8 Q75 11.5 100 18' fill='none' stroke='%230c0602' stroke-width='0.85' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
}

[data-theme="dark"]
  .listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="fantasy-scroll"]
  .listen-spread-page--companion
  .listen-book-page-curl--bottom {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 22' preserveAspectRatio='none'%3E%3Cpath d='M0 9 Q25 17.8 50 19.2 Q75 18.5 100 12' fill='none' stroke='%230e0804' stroke-width='1.35' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M0 7 Q25 15.8 50 17.2 Q75 16.5 100 10' fill='none' stroke='%23c9b088' stroke-width='1.15' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M0 5 Q25 13.8 50 15.2 Q75 14.5 100 8' fill='none' stroke='%2316100a' stroke-width='1' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M0 3 Q25 11.8 50 13.2 Q75 12.5 100 6' fill='none' stroke='%23b89868' stroke-width='0.95' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M0 1 Q25 9.8 50 11.2 Q75 10.5 100 4' fill='none' stroke='%230c0602' stroke-width='0.85' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
}

/* Fantasy scroll + chapter art / next-page preview: equal page heights (footer, dim, curls). */
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="fantasy-scroll"][data-companion-mode="image"]
  .listen-spread-pages-row,
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="fantasy-scroll"][data-companion-mode="next"]
  .listen-spread-pages-row {
  align-items: stretch;
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="fantasy-scroll"][data-companion-mode="image"]
  .listen-spread-page,
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="fantasy-scroll"][data-companion-mode="next"]
  .listen-spread-page,
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="fantasy-scroll"][data-illustrated="on"]
  .listen-spread-page {
  align-self: stretch;
  height: auto;
  min-height: 14rem;
}

/* Full-paragraph folio: fixed spread row — page columns must fill height (curls, footer, dim). */
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="fantasy-scroll"][data-display-format="paragraph"]
  .listen-spread-pages-row {
  align-items: stretch;
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="fantasy-scroll"][data-display-format="paragraph"]
  .listen-spread-page {
  align-self: stretch;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="fantasy-scroll"][data-display-format="paragraph"]
  .listen-spread-page:not(.listen-spread-page--image-side)
  .listen-book-page-body,
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="fantasy-scroll"][data-display-format="paragraph"]
  .listen-book-page-flip
  .listen-book-page-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="fantasy-scroll"][data-display-format="paragraph"]
  .listen-spread-page:not(.listen-spread-page--image-side)
  .listen-text-scroll,
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="fantasy-scroll"][data-display-format="paragraph"]
  .listen-companion-text-scroll {
  flex: 1 1 auto !important;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding-bottom: 6.25rem;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="fantasy-scroll"][data-display-format="paragraph"]
  .listen-spread-page:not(.listen-spread-page--image-side)
  .listen-text-scroll::-webkit-scrollbar,
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="fantasy-scroll"][data-display-format="paragraph"]
  .listen-companion-text-scroll::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="fantasy-scroll"][data-companion-mode="image"]
  .listen-spread-page--companion:not(.listen-spread-page--image-side)
  .listen-story-image-slot {
  flex: 1 1 auto;
  align-self: stretch;
  justify-content: stretch;
  min-height: 0;
  padding-bottom: 0;
  background: transparent;
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="fantasy-scroll"][data-companion-mode="image"]
  .listen-spread-page--companion:not(.listen-spread-page--image-side)
  .listen-chapter-art,
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="fantasy-scroll"][data-companion-mode="image"]
  .listen-spread-page--companion:not(.listen-spread-page--image-side)
  .listen-figure-card {
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  border-bottom: none;
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="fantasy-scroll"][data-companion-mode="image"]
  .listen-spread-page--companion:not(.listen-spread-page--image-side)
  .listen-chapter-art::after {
  display: none;
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="fantasy-scroll"][data-companion-mode="image"]
  .listen-spread-page--companion:not(.listen-spread-page--image-side)
  .listen-chapter-art img,
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="fantasy-scroll"][data-companion-mode="image"]
  .listen-spread-page--companion:not(.listen-spread-page--image-side)
  .listen-figure-card img,
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="fantasy-scroll"][data-companion-mode="image"]
  .listen-spread-page--current:not(.listen-spread-page--image-side)
  .listen-chapter-art-layer {
  grid-area: 1 / 1;
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  margin: 0;
  object-fit: contain;
  object-position: center center;
  filter: none;
  background: transparent;
}

/* Full-paragraph image pages inherit .listen-spread-page--image-side sizing above. */

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="fantasy-scroll"]:not([data-display-format="paragraph"])
  .listen-spread-page--current
  .listen-text-scroll {
  flex: 0 1 auto;
  min-height: 0;
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="fantasy-scroll"]
  .listen-text-scroll,
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="fantasy-scroll"]
  .listen-companion-text-scroll {
  min-height: 0;
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="fantasy-scroll"]
  .listen-spread-page
  .listen-page-skin-layer {
  background: transparent;
  box-shadow: none;
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="fantasy-scroll"]
  .listen-spread-page--current {
  border-right: none;
}

/* Text panels must stay transparent so parchment + candle show through both pages. */
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="fantasy-scroll"]
  .listen-text-scroll,
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="fantasy-scroll"]
  .listen-companion-text-scroll,
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="fantasy-scroll"]
  .listen-dialogue-panel {
  background: transparent !important;
  box-shadow: none !important;
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="fantasy-scroll"][data-reader-decoration="off"]
  .listen-scroll-roller,
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="fantasy-scroll"][data-reader-decoration="off"]
  .listen-scroll-candle-glow,
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="fantasy-scroll"][data-reader-decoration="off"]
  .listen-scene-candle,
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="fantasy-scroll"][data-reader-decoration="off"]
  .listen-scroll-deco,
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="fantasy-scroll"][data-reader-decoration="off"]
  .listen-book-spine-seam,
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="fantasy-scroll"][data-reader-decoration="off"]
  .listen-parchment-half {
  display: none !important;
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="fantasy-scroll"][data-reader-decoration="off"]
  .listen-scroll-parchment {
  background-color: #dcc9a3;
  background-image: var(--listen-skin-parchment-photo, var(--listen-skin-parchment));
  background-size: cover;
  background-position: center;
  clip-path: none;
  -webkit-clip-path: none;
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="fantasy-scroll"][data-reader-decoration="off"]
  .listen-spread-page--current
  .listen-book-page-body,
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="fantasy-scroll"][data-reader-decoration="off"]
  .listen-spread-page--companion
  .listen-book-page-body {
  clip-path: none;
  -webkit-clip-path: none;
}

/* ---- Demo book close: right page flip + back cover + “The End” ---- */
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="fantasy-scroll"]
  .listen-spread-pages-row {
  position: relative;
  transform-style: preserve-3d;
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="fantasy-scroll"]
  .listen-spread-page--companion {
  perspective: 1200px;
  transform-style: preserve-3d;
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="fantasy-scroll"]
  .listen-book-page-flip {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
}

.listen-atmosphere-host[data-reader-layout="book"]:not([data-reader-skin="fantasy-scroll"])
  .listen-book-page-flip {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
}

.listen-atmosphere-host[data-reader-layout="book"]:not([data-reader-skin="fantasy-scroll"])
  .listen-book-page-face--back,
.listen-atmosphere-host[data-reader-layout="book"]:not([data-reader-skin="fantasy-scroll"])
  .listen-book-closed-overlay {
  display: none !important;
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="fantasy-scroll"]
  .listen-book-page-face {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="fantasy-scroll"]
  .listen-book-page-face--front {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  transform: rotateY(0deg);
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="fantasy-scroll"]
  .listen-book-page-face--back {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.85rem 0.65rem;
  transform: rotateY(180deg);
  background:
    linear-gradient(145deg, #2a1810 0%, #1a0f08 42%, #120904 100%);
  box-shadow: inset 0 0 0 1px rgba(180, 140, 60, 0.22);
}

.listen-book-back-cover,
.listen-book-closed-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  width: 100%;
  max-width: 14rem;
  text-align: center;
}

.listen-book-back-cover-art {
  display: block;
  width: min(72%, 9rem);
  height: auto;
  max-height: 8.5rem;
  object-fit: cover;
  border-radius: 4px;
  box-shadow:
    0 6px 18px rgba(0, 0, 0, 0.45),
    inset 0 0 0 1px rgba(220, 180, 90, 0.25);
}

.listen-book-back-cover-title {
  margin: 0.35rem 0 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(0.92rem, 2.4vw, 1.15rem);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: 0.04em;
  color: #f5e6c8;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
}

.listen-book-back-cover-author {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.35;
  color: rgba(220, 190, 140, 0.88);
}

.listen-book-back-cover-tagline {
  margin: 0.15rem 0 0;
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(180, 150, 100, 0.72);
}

.listen-book-closed-overlay {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 18;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.1rem;
  padding: 1.25rem;
  pointer-events: none;
  background:
    radial-gradient(ellipse 85% 70% at 50% 58%, rgba(8, 4, 2, 0.52) 0%, rgba(8, 4, 2, 0.08) 55%, transparent 100%);
  opacity: 0;
}

.listen-book-closed-overlay:not([hidden]) {
  display: flex;
}

.listen-book-the-end {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2rem, 7vw, 3.35rem);
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-indent: 0.14em;
  color: #f8edd4;
  text-shadow:
    0 2px 12px rgba(0, 0, 0, 0.55),
    0 0 28px rgba(255, 200, 120, 0.22);
  opacity: 0;
  transform: scale(0.82) translateY(16px);
}

.listen-atmosphere-host.is-demo-book-closing[data-reader-skin="fantasy-scroll"]
  .listen-book-page-flip {
  transform-origin: left center;
  animation: listen-demo-book-page-close 1.4s cubic-bezier(0.42, 0.02, 0.18, 1) forwards;
}

.listen-atmosphere-host.is-demo-book-closing[data-reader-skin="fantasy-scroll"]
  .listen-spread-page--current {
  animation: listen-demo-book-left-dim 1.4s ease forwards;
}

.listen-atmosphere-host.is-demo-book-closed[data-reader-skin="fantasy-scroll"]
  .listen-book-page-flip {
  transform: rotateY(-178deg);
  filter: brightness(0.78);
}

/* Closed book: brown back cover on the left, transparent right half. */
.listen-atmosphere-host.is-book-closed[data-reader-layout="book"] .listen-spread-page--current,
.listen-atmosphere-host.is-demo-book-closed[data-reader-layout="book"] .listen-spread-page--current {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
}

.listen-atmosphere-host.is-book-closed[data-reader-layout="book"]
  .listen-spread-page--current
  .listen-book-page-body,
.listen-atmosphere-host.is-demo-book-closed[data-reader-layout="book"]
  .listen-spread-page--current
  .listen-book-page-body {
  background:
    linear-gradient(148deg, #4a3220 0%, #2f1e12 36%, #1a0f08 68%, #120904 100%);
  box-shadow:
    inset 0 0 0 1px rgba(180, 140, 60, 0.22),
    inset -6px 0 14px rgba(0, 0, 0, 0.28);
}

.listen-atmosphere-host.is-book-closed[data-reader-layout="book"]
  .listen-spread-page--current
  .listen-text-scroll,
.listen-atmosphere-host.is-book-closed[data-reader-layout="book"]
  .listen-spread-page--current
  .listen-page-footer,
.listen-atmosphere-host.is-book-closed[data-reader-layout="book"]
  .listen-spread-page--current
  .listen-book-page-curl,
.listen-atmosphere-host.is-book-closed[data-reader-layout="book"]
  .listen-spread-page--current
  .listen-page-skin-layer,
.listen-atmosphere-host.is-demo-book-closed[data-reader-layout="book"]
  .listen-spread-page--current
  .listen-text-scroll,
.listen-atmosphere-host.is-demo-book-closed[data-reader-layout="book"]
  .listen-spread-page--current
  .listen-page-footer,
.listen-atmosphere-host.is-demo-book-closed[data-reader-layout="book"]
  .listen-spread-page--current
  .listen-book-page-curl,
.listen-atmosphere-host.is-demo-book-closed[data-reader-layout="book"]
  .listen-spread-page--current
  .listen-page-skin-layer {
  visibility: hidden !important;
}

.listen-atmosphere-host.is-book-closed[data-reader-layout="book"] .listen-spread-page--companion,
.listen-atmosphere-host.is-demo-book-closed[data-reader-layout="book"] .listen-spread-page--companion {
  opacity: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  pointer-events: none !important;
}

.listen-atmosphere-host.is-book-closed[data-reader-layout="book"] .listen-spread-page--companion *,
.listen-atmosphere-host.is-demo-book-closed[data-reader-layout="book"] .listen-spread-page--companion * {
  visibility: hidden !important;
}

.listen-atmosphere-host.is-book-closed[data-reader-layout="book"] .listen-spread-page-dim--right,
.listen-atmosphere-host.is-demo-book-closed[data-reader-layout="book"] .listen-spread-page-dim--right,
.listen-atmosphere-host.is-book-closed[data-reader-layout="book"] .listen-parchment-half--right,
.listen-atmosphere-host.is-demo-book-closed[data-reader-layout="book"] .listen-parchment-half--right,
.listen-atmosphere-host.is-book-closed[data-reader-layout="book"] .listen-parchment-half--left,
.listen-atmosphere-host.is-demo-book-closed[data-reader-layout="book"] .listen-parchment-half--left,
.listen-atmosphere-host.is-book-closed[data-reader-layout="book"] .listen-scroll-deco,
.listen-atmosphere-host.is-demo-book-closed[data-reader-layout="book"] .listen-scroll-deco {
  opacity: 0 !important;
}

.listen-atmosphere-host.is-book-closed[data-reader-layout="book"] .listen-spread-page--current,
.listen-atmosphere-host.is-demo-book-closed[data-reader-layout="book"] .listen-spread-page--current {
  animation: none !important;
}

.listen-atmosphere-host.is-book-closed[data-reader-layout="book"] .listen-book-closed-overlay,
.listen-atmosphere-host.is-demo-book-closed[data-reader-layout="book"] .listen-book-closed-overlay {
  display: none !important;
}

/* Opening ceremony: left half empty (atmosphere only); cover art on right page slot. */
.listen-atmosphere-host.is-book-opening[data-reader-layout="book"] .listen-book-closed-overlay {
  display: none !important;
}

/* Left column = environment only. Clip all book/parchment chrome to the right half. */
.listen-atmosphere-host.is-book-opening[data-reader-layout="book"][data-reader-skin="fantasy-scroll"],
.listen-atmosphere-host.is-book-opening-flip[data-reader-layout="book"][data-reader-skin="fantasy-scroll"] {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  overflow: visible;
}

.listen-atmosphere-host.is-book-opening[data-reader-skin="fantasy-scroll"] .listen-scroll-parchment,
.listen-atmosphere-host.is-book-opening-flip[data-reader-skin="fantasy-scroll"] .listen-scroll-parchment {
  clip-path: inset(0 0 0 50%) !important;
  -webkit-clip-path: inset(0 0 0 50%) !important;
}

.listen-atmosphere-host.is-book-opening[data-reader-layout="book"] .listen-spread-page--current,
.listen-atmosphere-host.is-book-opening-flip[data-reader-layout="book"] .listen-spread-page--current {
  visibility: hidden !important;
  pointer-events: none !important;
}

.listen-atmosphere-host.is-book-opening[data-reader-skin="fantasy-scroll"] .listen-scroll-roller--left,
.listen-atmosphere-host.is-book-opening[data-reader-skin="fantasy-scroll"]
  .listen-spread-page-dim--left,
.listen-atmosphere-host.is-book-opening[data-reader-skin="fantasy-scroll"]
  .listen-parchment-half--left,
.listen-atmosphere-host.is-book-opening-flip[data-reader-skin="fantasy-scroll"] .listen-scroll-roller--left,
.listen-atmosphere-host.is-book-opening-flip[data-reader-skin="fantasy-scroll"]
  .listen-spread-page-dim--left,
.listen-atmosphere-host.is-book-opening-flip[data-reader-skin="fantasy-scroll"]
  .listen-parchment-half--left {
  opacity: 0 !important;
  visibility: hidden !important;
}

.listen-atmosphere-host.is-book-opening[data-reader-layout="book"] .listen-spread-page--companion {
  pointer-events: none;
}

.listen-atmosphere-host.is-book-opening-flip[data-reader-layout="book"][data-reader-skin="fantasy-scroll"]
  .listen-book-page-flip {
  transform-origin: left center;
  animation: listen-book-opening-page-turn 1.4s cubic-bezier(0.42, 0.02, 0.18, 1) forwards;
}

/* One-way page sweep (0 -> -178): cover fades as the page turns; spread is already painted underneath. */
.listen-atmosphere-host.is-book-opening-flip[data-reader-layout="book"]
  .listen-spread-page--opening-cover
  .listen-book-page-body {
  animation: listen-book-opening-body-reveal 1.4s cubic-bezier(0.42, 0.02, 0.18, 1) forwards;
}

.listen-atmosphere-host.is-book-opening-flip[data-reader-layout="book"]
  .listen-spread-page--opening-cover
  #listen-right-page-image-slot {
  transform-style: flat;
  animation:
    listen-book-opening-cover-fade 1.4s cubic-bezier(0.42, 0.02, 0.18, 1) forwards,
    listen-book-opening-cover-counter 1.4s cubic-bezier(0.42, 0.02, 0.18, 1) forwards;
}

.listen-atmosphere-host.is-book-opening-flip[data-reader-layout="book"]
  .listen-spread-page--opening-cover
  #listen-right-page-image-slot
  .listen-page-image,
.listen-atmosphere-host.is-book-opening-flip[data-reader-layout="book"]
  .listen-spread-page--opening-cover
  #listen-right-page-image-slot
  .listen-page-image
  img {
  transform: none !important;
}

.listen-atmosphere-host.is-book-opening[data-reader-layout="book"]
  .listen-spread-page--opening-cover
  .listen-page-image,
.listen-atmosphere-host.is-book-opening-flip[data-reader-layout="book"]
  .listen-spread-page--opening-cover
  #listen-right-page-image-slot
  .listen-page-image {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 0;
}

.listen-atmosphere-host.is-book-opening[data-reader-layout="book"]
  .listen-spread-page--opening-cover
  .listen-page-image img,
.listen-atmosphere-host.is-book-opening-flip[data-reader-layout="book"]
  .listen-spread-page--opening-cover
  #listen-right-page-image-slot
  .listen-page-image img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center center;
}

.listen-atmosphere-host.is-book-opening[data-reader-layout="book"]
  .listen-spread-page--opening-cover
  .listen-page-image.is-portrait
  img,
.listen-atmosphere-host.is-book-opening-flip[data-reader-layout="book"]
  .listen-spread-page--opening-cover
  #listen-right-page-image-slot
  .listen-page-image.is-portrait
  img {
  height: 100%;
  width: auto;
  max-height: 100%;
}

.listen-atmosphere-host.is-book-opening[data-reader-layout="book"]
  .listen-spread-page--opening-cover
  .listen-page-image.is-landscape
  img,
.listen-atmosphere-host.is-book-opening-flip[data-reader-layout="book"]
  .listen-spread-page--opening-cover
  #listen-right-page-image-slot
  .listen-page-image.is-landscape
  img {
  width: 100%;
  height: auto;
  max-width: 100%;
}

.listen-atmosphere-host.is-book-opening-flip[data-reader-layout="book"]
  .listen-spread-page--opening-cover
  .listen-companion-text-scroll,
.listen-atmosphere-host.is-book-opening-flip[data-reader-layout="book"]
  .listen-spread-page--opening-cover
  .listen-page-footer {
  visibility: visible !important;
  animation: listen-book-opening-spread-fade 1.4s cubic-bezier(0.42, 0.02, 0.18, 1) forwards;
}

.listen-atmosphere-host.is-book-opening-flip[data-reader-skin="fantasy-scroll"] .listen-book-spine-seam,
.listen-atmosphere-host.is-book-opening-flip[data-reader-skin="fantasy-scroll"]
  .listen-spread-pages-row::before {
  opacity: 1;
  transition: opacity 0.35s ease;
}

/* Closed-book shell on the right: brown cover board with art layered above. */
.listen-atmosphere-host.is-book-opening[data-reader-layout="book"]
  .listen-spread-page--opening-cover
  .listen-book-page-body {
  position: relative;
  background:
    linear-gradient(152deg, #4a3220 0%, #2f1e12 36%, #1a0f08 68%, #120904 100%);
  box-shadow:
    inset 0 0 0 1px rgba(180, 140, 60, 0.22),
    inset 6px 0 14px rgba(0, 0, 0, 0.28);
}

.listen-atmosphere-host.is-book-opening[data-reader-layout="book"]
  .listen-spread-page--opening-cover
  .listen-page-image-slot,
.listen-atmosphere-host.is-book-opening-flip[data-reader-layout="book"]
  .listen-spread-page--opening-cover
  #listen-right-page-image-slot {
  visibility: visible !important;
  display: flex !important;
  position: absolute;
  inset: 0;
  z-index: 4;
  flex: none !important;
  align-items: center;
  justify-content: center;
  min-height: 0;
  width: auto !important;
  padding: 0.5rem 0.65rem;
  box-sizing: border-box;
  transform-origin: left center;
}

.listen-atmosphere-host.is-book-opening[data-reader-layout="book"] .listen-book-the-end,
.listen-atmosphere-host.is-book-opening-flip[data-reader-layout="book"] .listen-book-the-end,
.listen-atmosphere-host.is-book-opening[data-reader-layout="book"] .listen-book-cover-the-end,
.listen-atmosphere-host.is-book-opening-flip[data-reader-layout="book"] .listen-book-cover-the-end {
  display: none !important;
}

.listen-atmosphere-host.is-book-opening[data-reader-layout="book"]
  .listen-spread-page--current
  .listen-text-scroll,
.listen-atmosphere-host.is-book-opening[data-reader-layout="book"]
  .listen-spread-page--current
  .listen-page-footer,
.listen-atmosphere-host.is-book-opening[data-reader-layout="book"]
  .listen-spread-page--current
  .listen-book-page-curl,
.listen-atmosphere-host.is-book-opening[data-reader-layout="book"]
  .listen-spread-page--current
  .listen-page-skin-layer,
.listen-atmosphere-host.is-book-opening:not(.is-book-opening-flip)[data-reader-layout="book"]
  .listen-spread-page--companion
  .listen-text-scroll,
.listen-atmosphere-host.is-book-opening:not(.is-book-opening-flip)[data-reader-layout="book"]
  .listen-spread-page--companion
  .listen-page-footer,
.listen-atmosphere-host.is-book-opening:not(.is-book-opening-flip)[data-reader-layout="book"]
  .listen-spread-page--companion:not(.listen-spread-page--opening-cover)
  .listen-book-page-curl,
.listen-atmosphere-host.is-book-opening:not(.is-book-opening-flip)[data-reader-layout="book"]
  .listen-spread-page--companion
  .listen-page-skin-layer,
.listen-atmosphere-host.is-book-opening:not(.is-book-opening-flip)[data-reader-layout="book"]
  .listen-spread-page--companion
  .listen-story-image-slot {
  visibility: hidden !important;
}

.listen-atmosphere-host.is-book-opening[data-reader-layout="book"] .listen-spread-page-dim--left,
.listen-atmosphere-host.is-book-opening[data-reader-layout="book"] .listen-scroll-deco {
  opacity: 0 !important;
}

.listen-atmosphere-host.is-book-opening[data-reader-skin="fantasy-scroll"] .listen-book-spine-seam,
.listen-atmosphere-host.is-book-opening[data-reader-skin="fantasy-scroll"]
  .listen-spread-pages-row::before {
  opacity: 0;
  transition: opacity 0.35s ease;
}

.listen-atmosphere-host.is-book-opening-flip[data-reader-layout="book"]
  .listen-spread-page--companion
  .listen-book-page-body {
  animation: none;
}

@keyframes listen-book-opening-overlay-in {
  0% {
    opacity: 0;
    transform: scale(0.96);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes listen-book-opening-overlay-out {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(1.02);
  }
}

@keyframes listen-book-opening-pages-reveal {
  0% {
    filter: brightness(0.72);
  }
  100% {
    filter: brightness(1);
  }
}

.listen-book-cover-the-end {
  display: none;
  position: absolute;
  top: 40%;
  left: 0;
  right: 0;
  width: 100%;
  height: auto;
  margin: 0;
  padding: 1.1rem 0 0;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  text-align: center;
  z-index: 8;
  pointer-events: none;
  overflow: visible;
  opacity: 0;
  transform: translateY(calc(-50% + 14px)) scale(0.82);
  filter: blur(3px);
}

.listen-book-cover-the-end__text {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  margin: 0 auto;
  padding: 0.2em 0 0.05em;
  transform: translateX(-3.5%);
  box-sizing: border-box;
  font-family: "Great Vibes", "Segoe Script", "Palatino Linotype", cursive;
  font-size: clamp(2.4rem, 6.5vw, 4.25rem);
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: 0.02em;
  background: linear-gradient(
    112deg,
    #8f5f12 0%,
    #e8c56a 22%,
    #fff8dc 42%,
    #f0d878 52%,
    #fffce8 58%,
    #c9972e 72%,
    #fff4c8 88%,
    #8f5f12 100%
  );
  background-size: 240% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.55))
    drop-shadow(0 0 16px rgba(255, 196, 96, 0.2));
}

.listen-book-cover-the-end__sparkles {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 88%;
  height: 120%;
  transform: translate(-50%, -50%);
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  background-image:
    radial-gradient(circle, rgba(255, 248, 210, 0.95) 0 1px, transparent 2.5px),
    radial-gradient(circle, rgba(255, 220, 130, 0.85) 0 1.2px, transparent 3px),
    radial-gradient(circle, rgba(255, 255, 255, 0.75) 0 0.8px, transparent 2px);
  background-size: 72px 58px, 96px 74px, 54px 48px;
  background-position:
    14% 46%,
    72% 38%,
    48% 62%,
    86% 54%,
    28% 28%,
    58% 72%,
    8% 68%,
    92% 22%;
  mask-image: radial-gradient(ellipse 88% 72% at 50% 48%, #000 28%, transparent 78%);
}

.listen-atmosphere-host.is-book-closed[data-reader-layout="book"] .listen-book-cover-the-end,
.listen-atmosphere-host.is-demo-book-closed[data-reader-layout="book"] .listen-book-cover-the-end {
  display: flex;
  animation: listen-the-end-cover-reveal 1.45s cubic-bezier(0.22, 1, 0.32, 1) 0.4s forwards;
}

.listen-atmosphere-host.is-book-closed[data-reader-layout="book"]
  .listen-book-cover-the-end__text,
.listen-atmosphere-host.is-demo-book-closed[data-reader-layout="book"]
  .listen-book-cover-the-end__text {
  animation:
    listen-the-end-text-glow 2.8s ease-in-out 1.55s infinite,
    listen-the-end-shimmer 4.2s ease-in-out 1.7s infinite;
}

.listen-atmosphere-host.is-book-closed[data-reader-layout="book"]
  .listen-book-cover-the-end__sparkles,
.listen-atmosphere-host.is-demo-book-closed[data-reader-layout="book"]
  .listen-book-cover-the-end__sparkles {
  animation: listen-the-end-sparkles-life 5.5s ease-in-out 0.95s forwards;
}

.listen-atmosphere-host.is-book-closed[data-reader-layout="book"] .listen-book-the-end,
.listen-atmosphere-host.is-demo-book-closed[data-reader-layout="book"] .listen-book-the-end {
  display: none !important;
}

.listen-atmosphere-host.is-ending-candle-out .listen-scroll-candle-glow,
.listen-atmosphere-host.is-ending-candle-out .listen-scifi-spread-glow {
  opacity: 0 !important;
  transition: opacity 0.12s ease-out;
}

.listen-scene-candle.is-instant-snuff .listen-scene-candle-flame {
  opacity: 0 !important;
  transform: scale(0.05) translateY(4px) !important;
  filter: blur(1px) !important;
  transition: none !important;
  animation: none !important;
}

.listen-scene-candle.is-instant-snuff.is-snuffing .listen-scene-candle-smoke {
  opacity: 1;
  animation: listen-candle-smoke-rise 2.1s ease-out forwards;
}

.listen-atmosphere-host.is-demo-book-closing[data-reader-skin="fantasy-scroll"]
  .listen-book-spine-seam,
.listen-atmosphere-host.is-demo-book-closed[data-reader-skin="fantasy-scroll"]
  .listen-book-spine-seam,
.listen-atmosphere-host.is-demo-book-closing[data-reader-skin="fantasy-scroll"]
  .listen-spread-pages-row::before,
.listen-atmosphere-host.is-demo-book-closed[data-reader-skin="fantasy-scroll"]
  .listen-spread-pages-row::before {
  opacity: 0;
  transition: opacity 0.35s ease;
}

.listen-atmosphere-host.is-demo-book-closed[data-reader-skin="fantasy-scroll"]
  .listen-spread-pages-row,
.listen-atmosphere-host.is-demo-book-closing[data-reader-skin="fantasy-scroll"]
  .listen-spread-pages-row {
  pointer-events: none;
}

.listen-atmosphere-host.is-demo-book-closed[data-reader-skin="fantasy-scroll"]
  .listen-book-closed-overlay {
  animation: listen-demo-book-closed-in 0.85s ease forwards;
}

.listen-atmosphere-host.is-demo-book-closed[data-reader-skin="fantasy-scroll"]
  .listen-book-the-end {
  animation:
    listen-demo-the-end-in 1.35s cubic-bezier(0.22, 1, 0.32, 1) forwards,
    listen-demo-the-end-glow 2.6s ease-in-out 1.85s infinite;
  animation-delay: 0.55s, 1.85s;
}

@keyframes listen-demo-book-page-close {
  0% {
    transform: rotateY(0deg);
    filter: brightness(1);
  }
  55% {
    filter: brightness(0.92);
  }
  100% {
    transform: rotateY(-178deg);
    filter: brightness(0.78);
  }
}

@keyframes listen-demo-book-page-open {
  0% {
    transform: rotateY(0deg);
    filter: brightness(1);
  }
  55% {
    filter: brightness(0.9);
  }
  100% {
    transform: rotateY(-178deg);
    filter: brightness(0.78);
  }
}

@keyframes listen-book-opening-page-turn {
  0% {
    transform: rotateY(0deg);
    filter: brightness(1);
  }
  55% {
    filter: brightness(0.9);
  }
  100% {
    transform: rotateY(-92deg);
    filter: brightness(0.86);
  }
}

/* ---- Spread swipe / trackpad page turn ---- */
.listen-atmosphere-host.is-book-spread-swipe-dragging[data-reader-layout="book"][data-reader-skin="fantasy-scroll"]
  .listen-spread-pages-row,
.listen-atmosphere-host.is-book-spread-turn-active[data-reader-layout="book"][data-reader-skin="fantasy-scroll"]
  .listen-spread-pages-row {
  perspective: 1400px;
}

.listen-atmosphere-host.is-book-spread-swipe-dragging[data-reader-layout="book"]
  .listen-spread-page--companion
  .listen-book-page-curl,
.listen-atmosphere-host.is-book-spread-swipe-dragging[data-reader-layout="book"]
  .listen-spread-page--current
  .listen-book-page-curl,
.listen-atmosphere-host.is-book-spread-turn-active[data-reader-layout="book"]
  .listen-spread-page--companion
  .listen-book-page-curl,
.listen-atmosphere-host.is-book-spread-turn-active[data-reader-layout="book"]
  .listen-spread-page--current
  .listen-book-page-curl {
  opacity: 1;
  filter: brightness(1.12);
  transition: filter 120ms ease;
}

.listen-atmosphere-host.is-book-spread-swipe-dragging.is-book-spread-swipe-next[data-reader-layout="book"][data-reader-skin="fantasy-scroll"]
  .listen-spread-page--companion
  .listen-book-page-flip,
.listen-atmosphere-host.is-book-spread-turn-next[data-reader-layout="book"][data-reader-skin="fantasy-scroll"]
  .listen-spread-page--companion
  .listen-book-page-flip {
  transform-origin: left center;
  transform: rotateY(calc(var(--listen-spread-turn-deg, 0) * 1deg));
}

.listen-atmosphere-host.is-book-spread-swipe-dragging.is-book-spread-swipe-prev[data-reader-layout="book"][data-reader-skin="fantasy-scroll"]
  .listen-spread-page--current
  .listen-book-page-body,
.listen-atmosphere-host.is-book-spread-turn-prev[data-reader-layout="book"][data-reader-skin="fantasy-scroll"]
  .listen-spread-page--current
  .listen-book-page-body {
  transform-origin: right center;
  transform: rotateY(calc(var(--listen-spread-turn-deg, 0) * 1deg));
}

.listen-atmosphere-host.is-book-spread-turn-next[data-reader-layout="book"][data-reader-skin="fantasy-scroll"]
  .listen-spread-page--companion
  .listen-book-page-flip {
  animation: listen-book-spread-turn-next 520ms cubic-bezier(0.42, 0.02, 0.18, 1) forwards;
}

.listen-atmosphere-host.is-book-spread-turn-prev[data-reader-layout="book"][data-reader-skin="fantasy-scroll"]
  .listen-spread-page--current
  .listen-book-page-body {
  animation: listen-book-spread-turn-prev 520ms cubic-bezier(0.42, 0.02, 0.18, 1) forwards;
}

.listen-atmosphere-host.is-book-spread-turn-next[data-reader-layout="book"]:not([data-reader-skin="fantasy-scroll"])
  .listen-spread-page--companion,
.listen-atmosphere-host.is-book-spread-turn-prev[data-reader-layout="book"]:not([data-reader-skin="fantasy-scroll"])
  .listen-spread-page--current {
  animation: listen-book-spread-turn-fade 420ms ease forwards;
}

@keyframes listen-book-spread-turn-next {
  from {
    transform: rotateY(calc(var(--listen-spread-turn-deg, 0) * 1deg));
    filter: brightness(1);
  }
  to {
    transform: rotateY(-92deg);
    filter: brightness(0.86);
  }
}

@keyframes listen-book-spread-turn-prev {
  from {
    transform: rotateY(calc(var(--listen-spread-turn-deg, 0) * 1deg));
    filter: brightness(1);
  }
  to {
    transform: rotateY(92deg);
    filter: brightness(0.86);
  }
}

@keyframes listen-book-spread-turn-fade {
  0% {
    opacity: 1;
  }
  45% {
    opacity: 0.35;
  }
  100% {
    opacity: 1;
  }
}

@keyframes listen-book-opening-cover-fade {
  0%,
  36% {
    opacity: 1;
  }
  52%,
  100% {
    opacity: 0;
    visibility: hidden;
  }
}

@keyframes listen-book-opening-cover-counter {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(92deg);
  }
}

@keyframes listen-book-opening-body-reveal {
  0%,
  34% {
    background:
      linear-gradient(152deg, #4a3220 0%, #2f1e12 36%, #1a0f08 68%, #120904 100%);
    box-shadow:
      inset 0 0 0 1px rgba(180, 140, 60, 0.22),
      inset 6px 0 14px rgba(0, 0, 0, 0.28);
  }
  46%,
  100% {
    background: transparent;
    box-shadow: none;
  }
}

@keyframes listen-book-opening-spread-fade {
  0%,
  18% {
    opacity: 0;
  }
  32%,
  100% {
    opacity: 1;
  }
}

@keyframes listen-demo-book-left-dim {
  0% {
    opacity: 1;
    transform: rotateY(2deg);
  }
  100% {
    opacity: 0.35;
    transform: rotateY(4deg) scale(0.985);
  }
}

@keyframes listen-demo-book-closed-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes listen-the-end-cover-reveal {
  0% {
    opacity: 0;
    transform: translateY(calc(-50% + 18px)) scale(0.78);
    filter: blur(4px);
  }
  45% {
    opacity: 0.72;
    filter: blur(1px);
  }
  100% {
    opacity: 1;
    transform: translateY(-50%) scale(1);
    filter: blur(0);
  }
}

@keyframes listen-the-end-shimmer {
  0%,
  100% {
    background-position: 100% 50%;
  }
  50% {
    background-position: 0% 50%;
  }
}

@keyframes listen-the-end-text-glow {
  0%,
  100% {
    filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.55))
      drop-shadow(0 0 14px rgba(255, 196, 96, 0.18));
  }
  50% {
    filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.48))
      drop-shadow(0 0 28px rgba(255, 214, 130, 0.42))
      drop-shadow(0 0 44px rgba(255, 180, 80, 0.16));
  }
}

@keyframes listen-the-end-sparkles-life {
  0% {
    opacity: 0;
    filter: brightness(0.85);
  }
  12% {
    opacity: 0.55;
  }
  28% {
    opacity: 1;
    filter: brightness(1.25);
  }
  42% {
    opacity: 0.75;
    filter: brightness(1);
  }
  55% {
    opacity: 1;
    filter: brightness(1.4);
  }
  68% {
    opacity: 0.7;
    filter: brightness(1.05);
  }
  82% {
    opacity: 0.35;
    filter: brightness(0.95);
  }
  100% {
    opacity: 0;
    filter: brightness(0.9);
  }
}

@keyframes listen-demo-the-end-in {
  0% {
    opacity: 0;
    transform: scale(0.82) translateY(16px);
    filter: blur(2px);
  }
  55% {
    opacity: 1;
    filter: blur(0);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
    filter: blur(0);
  }
}

@keyframes listen-demo-the-end-glow {
  0%,
  100% {
    text-shadow:
      0 2px 12px rgba(0, 0, 0, 0.55),
      0 0 28px rgba(255, 200, 120, 0.22);
  }
  50% {
    text-shadow:
      0 2px 16px rgba(0, 0, 0, 0.5),
      0 0 42px rgba(255, 210, 130, 0.42),
      0 0 64px rgba(255, 180, 90, 0.18);
  }
}

@media (prefers-reduced-motion: reduce) {
  .listen-atmosphere-host.is-demo-book-closing[data-reader-skin="fantasy-scroll"]
    .listen-book-page-flip,
  .listen-atmosphere-host.is-demo-book-closing[data-reader-skin="fantasy-scroll"]
    .listen-spread-page--current {
    animation: none !important;
  }

  .listen-atmosphere-host.is-demo-book-closed[data-reader-skin="fantasy-scroll"]
    .listen-book-closed-overlay,
  .listen-atmosphere-host.is-demo-book-closed[data-reader-skin="fantasy-scroll"]
    .listen-book-the-end,
  .listen-atmosphere-host.is-book-closed[data-reader-layout="book"]
    .listen-book-cover-the-end,
  .listen-atmosphere-host.is-demo-book-closed[data-reader-layout="book"]
    .listen-book-cover-the-end {
    animation: none !important;
    opacity: 1 !important;
    transform: translateY(-50%) !important;
    filter: none !important;
  }

  .listen-atmosphere-host.is-book-closed[data-reader-layout="book"]
    .listen-book-cover-the-end__text,
  .listen-atmosphere-host.is-demo-book-closed[data-reader-layout="book"]
    .listen-book-cover-the-end__text,
  .listen-atmosphere-host.is-book-closed[data-reader-layout="book"]
    .listen-book-cover-the-end__sparkles,
  .listen-atmosphere-host.is-demo-book-closed[data-reader-layout="book"]
    .listen-book-cover-the-end__sparkles {
    animation: none !important;
    opacity: 1 !important;
  }
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="fantasy-scroll"]
  .listen-text,
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="fantasy-scroll"]
  .listen-text-preview {
  color: var(--listen-skin-ink);
  text-shadow: none;
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="fantasy-scroll"]
  .listen-text
  .listen-word:not(.listen-word-spoken):not(.listen-word-active) {
  color: var(--listen-skin-ink);
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="fantasy-scroll"]
  .listen-text
  .listen-word-spoken {
  color: var(--listen-skin-spoken);
  opacity: 1;
}

/* Inactive page: dim parchment only — keep unread ink at full strength. */
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="fantasy-scroll"]
  .listen-text.listen-book-page-done,
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="fantasy-scroll"]
  .listen-text.listen-book-page-pending,
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="fantasy-scroll"]
  #listen-companion-text-scroll.listen-book-page-pending {
  opacity: 1;
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="fantasy-scroll"]
  .listen-spread-pages-row.is-book-page-right-active
  .listen-spread-page--current,
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="fantasy-scroll"]
  .listen-spread-pages-row.is-book-page-left-active
  .listen-spread-page--companion,
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="fantasy-scroll"]
  .listen-spread-pages-row.is-book-page-left-active
  .listen-spread-page--companion.listen-book-page-pending {
  opacity: 1;
}

[data-theme="dark"]
  .listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="fantasy-scroll"]
  .listen-text,
[data-theme="dark"]
  .listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="fantasy-scroll"]
  .listen-text-preview {
  text-shadow: none;
}

[data-theme="dark"]
  .listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="fantasy-scroll"]
  .listen-text
  .listen-word-spoken {
  color: var(--listen-skin-spoken);
  opacity: 1;
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="fantasy-scroll"]
  .listen-text-translation {
  color: var(--listen-skin-muted);
  border-top-color: color-mix(in srgb, var(--listen-skin-muted) 35%, transparent);
}

@media (prefers-reduced-motion: reduce) {
  .listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="fantasy-scroll"]
    .listen-scene-candle-flame,
  .listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="fantasy-scroll"]
    .listen-scroll-candle-glow,
  .listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="fantasy-scroll"]
    .listen-scroll-deco--dragon {
    animation: none;
  }
}

@media (max-width: 480px) {
  .listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="fantasy-scroll"] {
    --listen-scroll-roller-width: 20px;
    --listen-scroll-roller-cap-height: 18px;
  }

  .listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="fantasy-scroll"]
    .listen-spread-pages-row {
    grid-template-columns: 1fr;
  }
}

/* ---- Academic notebook ---- */
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="academic"] {
  --listen-skin-ink: #1a2332;
  --listen-skin-muted: #4a5568;
}

[data-theme="dark"]
  .listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="academic"] {
  --listen-skin-ink: #d8dee8;
  --listen-skin-muted: #9aa3b0;
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="academic"]
  .listen-spread-page
  .listen-page-skin-layer {
  background-color: #faf8f4;
  background-image: var(--listen-skin-notebook);
  background-size: 256px 256px;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #8a9098 25%, transparent);
}

[data-theme="dark"]
  .listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="academic"]
  .listen-spread-page
  .listen-page-skin-layer {
  background-color: #1c1f24;
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="academic"]
  .listen-spread-page--current
  .listen-page-skin-layer::before {
  content: "";
  position: absolute;
  left: 0.55rem;
  top: 1.2rem;
  bottom: 1.2rem;
  width: 0.55rem;
  background:
    radial-gradient(circle at 50% 0.45rem, rgba(80, 90, 110, 0.35) 0 0.22rem, transparent 0.25rem),
    radial-gradient(circle at 50% 50%, rgba(80, 90, 110, 0.35) 0 0.22rem, transparent 0.25rem),
    radial-gradient(circle at 50% calc(100% - 0.45rem), rgba(80, 90, 110, 0.35) 0 0.22rem, transparent 0.25rem);
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="academic"]
  .listen-text,
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="academic"]
  .listen-text-preview {
  color: var(--listen-skin-ink);
  padding-left: 0.15rem;
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="academic"]
  .listen-text-translation {
  color: var(--listen-skin-muted);
}

/* ---- Romance letter ---- */
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="romance"] {
  --listen-skin-ink: #3a2018;
  --listen-skin-muted: #8a5c58;
  --listen-skin-spoken: #a07870;
  --listen-romance-accent: #c42840;
  --listen-romance-accent-deep: #8b1830;
  --listen-romance-blush: #fff0ee;
  --listen-skin-deco-opacity: 0.52;
  background: #2a1014;
  border-color: color-mix(in srgb, var(--listen-romance-accent) 42%, var(--border));
  box-shadow:
    0 10px 36px rgba(0, 0, 0, 0.38),
    inset 0 0 0 1px color-mix(in srgb, var(--listen-romance-accent) 28%, transparent);
}

[data-theme="dark"]
  .listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="romance"] {
  --listen-skin-ink: #3a2018;
  --listen-skin-muted: #8a5c58;
  --listen-skin-spoken: #a07870;
  background: #1e080c;
}

/* Red blush mood — not the default purple/orange director wash. */
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="romance"][data-mood="romance"]
  .listen-atmosphere-overlay {
  background: radial-gradient(
    ellipse 120% 80% at 50% 0%,
    rgba(220, 60, 80, 0.12) 0%,
    transparent 65%
  );
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="romance"]
  #listen-in-scene-panel {
  margin: 0;
  background:
    linear-gradient(180deg, rgba(220, 60, 80, 0.16) 0%, transparent 48%),
    color-mix(in srgb, #4a1420 62%, var(--panel));
  border-bottom: 1px solid color-mix(in srgb, var(--listen-romance-accent) 38%, transparent);
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="romance"]
  .listen-in-scene-body {
  border-color: color-mix(in srgb, var(--listen-romance-accent) 28%, var(--border));
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="romance"]
  .listen-spread-pages-row {
  position: relative;
  align-items: stretch;
  background: #fff8f5;
}

/* Kill generic row/parchment dims — they were washing the spread purple/dark. */
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="romance"]
  .listen-spread-page-dim--row,
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="romance"]
  .listen-spread-page-dim--left,
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="romance"]
  .listen-spread-page-dim--right {
  display: none !important;
}

/* Soft rose light across the spread (below page skin, above row bg). */
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="romance"][data-reader-decoration="subtle"]
  .listen-spread-pages-row::before,
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="romance"][data-reader-decoration="full"]
  .listen-spread-pages-row::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(
      ellipse 92% 68% at 50% 6%,
      rgba(255, 120, 130, 0.22) 0%,
      rgba(255, 90, 105, 0.08) 40%,
      transparent 72%
    ),
    radial-gradient(
      ellipse 70% 50% at 88% 12%,
      rgba(255, 80, 95, 0.1) 0%,
      transparent 62%
    );
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="romance"][data-reader-decoration="full"]
  .listen-spread-pages-row::before {
  animation: listen-romance-blush-breathe 7s ease-in-out infinite;
}

@keyframes listen-romance-blush-breathe {
  0%,
  100% {
    opacity: 0.9;
  }
  50% {
    opacity: 1;
  }
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="romance"]
  .listen-page-skin-layer {
  z-index: 3;
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="romance"]
  .listen-text-scroll,
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="romance"]
  .listen-story-image-slot,
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="romance"]
  .listen-companion-text-scroll,
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="romance"]
  .listen-page-footer {
  z-index: 5;
  background: transparent !important;
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="romance"]
  .listen-spread-page {
  align-self: stretch;
  min-height: 14rem;
  background: transparent;
  overflow: hidden;
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="romance"]
  .listen-spread-page
  .listen-page-skin-layer {
  background-color: #fff8f5;
  background-image: var(--listen-skin-romance-paper);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  box-shadow:
    inset 0 0 0 1px rgba(220, 120, 120, 0.28),
    inset 0 0 40px rgba(255, 180, 175, 0.14);
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="romance"][data-book-spread-active="left"]
  .listen-spread-page--current
  .listen-page-skin-layer,
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="romance"][data-book-spread-active="right"]
  .listen-spread-page--companion
  .listen-page-skin-layer {
  box-shadow:
    inset 0 0 0 1px rgba(196, 40, 56, 0.34),
    inset 0 0 52px rgba(255, 140, 130, 0.2);
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="romance"][data-book-spread-active="left"]
  .listen-spread-page--companion::before,
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="romance"]
  .listen-spread-pages-row.is-book-page-left-active
  .listen-spread-page--companion::before,
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="romance"][data-book-spread-active="right"]
  .listen-spread-page--current::before,
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="romance"]
  .listen-spread-pages-row.is-book-page-right-active
  .listen-spread-page--current::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background: rgba(180, 80, 88, 0.1);
}

[data-theme="dark"]
  .listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="romance"][data-book-spread-active="left"]
  .listen-spread-page--companion::before,
[data-theme="dark"]
  .listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="romance"]
  .listen-spread-pages-row.is-book-page-left-active
  .listen-spread-page--companion::before,
[data-theme="dark"]
  .listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="romance"][data-book-spread-active="right"]
  .listen-spread-page--current::before,
[data-theme="dark"]
  .listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="romance"]
  .listen-spread-pages-row.is-book-page-right-active
  .listen-spread-page--current::before {
  background: rgba(140, 50, 58, 0.14);
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="romance"]
  .listen-spread-page--current {
  border-right: 1px solid rgba(196, 40, 56, 0.22);
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="romance"]
  .listen-page-number {
  color: color-mix(in srgb, var(--listen-romance-accent) 62%, var(--listen-skin-muted));
  opacity: 0.88;
}

/* Rose on active page (Subtle + Full). */
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="romance"][data-reader-decoration="subtle"][data-book-spread-active="left"]
  .listen-spread-page--current
  .listen-page-skin-layer::before,
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="romance"][data-reader-decoration="subtle"][data-book-spread-active="right"]
  .listen-spread-page--companion
  .listen-page-skin-layer::before,
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="romance"][data-reader-decoration="full"][data-book-spread-active="left"]
  .listen-spread-page--current
  .listen-page-skin-layer::before,
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="romance"][data-reader-decoration="full"][data-book-spread-active="right"]
  .listen-spread-page--companion
  .listen-page-skin-layer::before {
  content: "";
  position: absolute;
  left: 0.55rem;
  bottom: 2rem;
  width: 3.25rem;
  height: 3.25rem;
  pointer-events: none;
  background: var(--listen-skin-romance-rose) left bottom / contain no-repeat;
  opacity: calc(var(--listen-skin-deco-opacity) + 0.08);
}

/* Hearts on inactive page (Subtle + Full). */
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="romance"][data-reader-decoration="subtle"][data-book-spread-active="left"]
  .listen-spread-page--companion::after,
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="romance"][data-reader-decoration="subtle"][data-book-spread-active="right"]
  .listen-spread-page--current::after,
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="romance"][data-reader-decoration="full"][data-book-spread-active="left"]
  .listen-spread-page--companion::after,
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="romance"][data-reader-decoration="full"][data-book-spread-active="right"]
  .listen-spread-page--current::after {
  content: "";
  position: absolute;
  top: 0.65rem;
  right: 0.55rem;
  width: 2.25rem;
  height: 2.25rem;
  z-index: 4;
  pointer-events: none;
  background: var(--listen-skin-romance-hearts) center / contain no-repeat;
  opacity: calc(var(--listen-skin-deco-opacity) * 0.72);
}

/* Wax seal on inactive page (Subtle + Full). */
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="romance"][data-reader-decoration="subtle"][data-book-spread-active="left"]
  .listen-spread-page--companion
  .listen-page-skin-layer::after,
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="romance"][data-reader-decoration="subtle"][data-book-spread-active="right"]
  .listen-spread-page--current
  .listen-page-skin-layer::after,
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="romance"][data-reader-decoration="full"][data-book-spread-active="left"]
  .listen-spread-page--companion
  .listen-page-skin-layer::after,
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="romance"][data-reader-decoration="full"][data-book-spread-active="right"]
  .listen-spread-page--current
  .listen-page-skin-layer::after {
  content: "";
  position: absolute;
  right: 0.55rem;
  bottom: 2rem;
  width: 3.5rem;
  height: 3.5rem;
  pointer-events: none;
  background: var(--listen-skin-romance-seal) right bottom / contain no-repeat;
  opacity: calc(var(--listen-skin-deco-opacity) * 0.72);
}

/* Red letter frame + extra roses on active page (Full). */
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="romance"][data-reader-decoration="full"][data-book-spread-active="left"]
  .listen-spread-page--current::after,
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="romance"][data-reader-decoration="full"][data-book-spread-active="right"]
  .listen-spread-page--companion::after {
  content: "";
  position: absolute;
  inset: 0.35rem 0.35rem 1.55rem;
  z-index: 4;
  pointer-events: none;
  border: 1px solid rgba(196, 40, 56, 0.36);
  border-radius: 3px;
  background-image:
    var(--listen-skin-romance-flourish),
    var(--listen-skin-romance-flourish),
    var(--listen-skin-romance-flourish),
    var(--listen-skin-romance-flourish),
    var(--listen-skin-romance-hearts);
  background-size: 3.2rem 3.2rem, 3.2rem 3.2rem, 3.2rem 3.2rem, 3.2rem 3.2rem, 2.4rem 2.4rem;
  background-repeat: no-repeat;
  background-position:
    left top,
    right top,
    left bottom,
    right bottom,
    92% 18%;
  opacity: calc(var(--listen-skin-deco-opacity) + 0.22);
}

@media (prefers-reduced-motion: no-preference) {
  .listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="romance"][data-reader-decoration="full"][data-book-spread-active="left"]
    .listen-spread-page--current
    .listen-page-skin-layer::before,
  .listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="romance"][data-reader-decoration="full"][data-book-spread-active="right"]
    .listen-spread-page--companion
    .listen-page-skin-layer::before {
    animation: listen-romance-petal-float 9s ease-in-out infinite;
  }
}

@keyframes listen-romance-petal-float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-0.3rem);
  }
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="romance"]
  .listen-text,
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="romance"]
  .listen-text-preview {
  color: var(--listen-skin-ink);
  text-shadow: none;
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="romance"]
  .listen-text
  .listen-word:not(.listen-word-spoken):not(.listen-word-active) {
  color: var(--listen-skin-ink);
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="romance"]
  .listen-text
  .listen-word-spoken {
  color: var(--listen-skin-spoken);
  opacity: 1;
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="romance"]
  .listen-text.listen-book-page-done,
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="romance"]
  .listen-text.listen-book-page-pending,
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="romance"]
  #listen-companion-text-scroll.listen-book-page-pending {
  opacity: 1;
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="romance"]
  .listen-spread-pages-row.is-book-page-right-active
  .listen-spread-page--current,
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="romance"]
  .listen-spread-pages-row.is-book-page-left-active
  .listen-spread-page--companion,
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="romance"]
  .listen-spread-pages-row.is-book-page-left-active
  .listen-spread-page--companion.listen-book-page-pending {
  opacity: 1;
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="romance"]
  .listen-text-translation {
  color: var(--listen-skin-muted);
  border-top-color: color-mix(in srgb, var(--listen-romance-accent) 32%, transparent);
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="romance"][data-reader-decoration="off"]
  .listen-spread-pages-row::before {
  display: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="romance"]
    .listen-spread-pages-row::before,
  .listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="romance"]
    .listen-page-skin-layer::before {
    animation: none !important;
  }
}

/* ---- Sci-fi display ---- */
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="sci-fi"] {
  --listen-skin-ink: #d8f4ff;
  --listen-skin-muted: #7eb8cc;
  --listen-skin-spoken: #9ee8ff;
  --listen-skin-deco-opacity: 0.42;
  --listen-scifi-accent: #3dd6f5;
  --listen-scifi-accent-dim: #1a7a94;
  background: #060a0e;
  border-color: color-mix(in srgb, var(--listen-scifi-accent) 40%, var(--border));
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--listen-scifi-accent) 28%, transparent),
    0 0 32px color-mix(in srgb, var(--listen-scifi-accent) 10%, transparent);
}

[data-theme="light"]
  .listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="sci-fi"] {
  --listen-skin-ink: #0a2838;
  --listen-skin-muted: #3a6070;
  --listen-skin-spoken: #0d5c78;
  --listen-skin-deco-opacity: 0.35;
  background: #dce8f0;
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="sci-fi"]
  #listen-in-scene-panel {
  position: relative;
  z-index: 12;
  isolation: isolate;
  overflow: visible;
  margin: 0;
  background:
    linear-gradient(180deg, rgba(61, 214, 245, 0.12) 0%, transparent 42%),
    color-mix(in srgb, #0e1820 92%, var(--panel));
  border-bottom: 1px solid color-mix(in srgb, var(--listen-scifi-accent) 35%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--listen-scifi-accent) 18%, transparent);
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="sci-fi"]
  #listen-in-scene-panel::before {
  display: none;
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="sci-fi"]
  .listen-in-scene-toggle {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="sci-fi"]
  .listen-in-scene-toggle::after {
  content: "SYS · READ";
  margin-left: auto;
  margin-right: 0.15rem;
  padding: 0.12rem 0.45rem;
  font-size: 0.65rem;
  font-family: Consolas, "Courier New", monospace;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: none;
  color: #c8f8ff;
  background: color-mix(in srgb, #0a1820 75%, transparent);
  border: 1px solid color-mix(in srgb, var(--listen-scifi-accent) 55%, transparent);
  border-radius: 3px;
  box-shadow: 0 0 10px color-mix(in srgb, var(--listen-scifi-accent) 25%, transparent);
  opacity: 0.92;
  pointer-events: none;
  flex-shrink: 0;
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="sci-fi"]
  .listen-in-scene-body {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.35rem;
  position: relative;
  margin: 0;
  padding: 0.45rem 1.65rem 0.5rem 0.55rem;
  border: 1px solid color-mix(in srgb, var(--listen-scifi-accent) 22%, transparent);
  border-top: none;
  border-radius: 0 0 10px 10px;
  background: color-mix(in srgb, #0a1218 75%, transparent);
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="sci-fi"]
  .listen-in-scene-toolbar {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="sci-fi"]
  .listen-in-scene-panel.is-collapsed
  .listen-in-scene-body {
  display: none !important;
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="sci-fi"]
  #listen-in-scene-panel
  .listen-cast-spotlight {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="sci-fi"]
  .listen-in-scene-toggle-label {
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 0.72rem;
  color: color-mix(in srgb, var(--listen-scifi-accent) 75%, var(--text));
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="sci-fi"]
  .listen-spread-pages-row.is-book-page-right-active
  .listen-spread-page--current,
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="sci-fi"]
  .listen-spread-pages-row.is-book-page-left-active
  .listen-spread-page--companion {
  opacity: 1;
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="sci-fi"]
  .listen-spread-pages-row {
  align-items: stretch;
  border-top: 1px solid color-mix(in srgb, var(--listen-scifi-accent) 20%, transparent);
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="sci-fi"]
  .listen-spread-page {
  align-self: stretch;
  min-height: 14rem;
  background: transparent;
}

/* Sci-fi stack inside each page: skin (z3) → inactive dim (z4) → text (z5). */
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="sci-fi"]:not([data-reader-skin="minimal"])
  .listen-spread-page-dim--row {
  display: none !important;
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="sci-fi"]
  .listen-page-skin-layer {
  z-index: 3;
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="sci-fi"]
  .listen-text-scroll,
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="sci-fi"]
  .listen-story-image-slot,
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="sci-fi"]
  .listen-companion-text-scroll,
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="sci-fi"]
  .listen-page-footer {
  z-index: 5;
}

/* Inactive half-spread dim (above hex grid, below text). */
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="sci-fi"][data-book-spread-active="left"]
  .listen-spread-page--companion::before,
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="sci-fi"][data-book-spread-active="right"]
  .listen-spread-page--current::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background: rgba(4, 12, 18, 0.55);
}

[data-theme="dark"]
  .listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="sci-fi"][data-book-spread-active="left"]
  .listen-spread-page--companion::before,
[data-theme="dark"]
  .listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="sci-fi"][data-book-spread-active="right"]
  .listen-spread-page--current::before {
  background: rgba(0, 0, 0, 0.58);
}

/* Inactive spread page only: hex grid. */
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="sci-fi"][data-book-spread-active="right"]
  .listen-spread-page--current
  .listen-page-skin-layer,
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="sci-fi"][data-book-spread-active="left"]
  .listen-spread-page--companion
  .listen-page-skin-layer {
  background-color: #0a1016;
  background-image:
    linear-gradient(180deg, rgba(61, 214, 245, 0.04) 0%, transparent 20%),
    var(--listen-skin-scifi);
  background-size: auto, 256px 256px;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--listen-scifi-accent) 14%, transparent);
}

/* Active reading page: flat panel (no hex grid). */
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="sci-fi"][data-book-spread-active="left"]
  .listen-spread-page--current
  .listen-page-skin-layer,
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="sci-fi"][data-book-spread-active="right"]
  .listen-spread-page--companion
  .listen-page-skin-layer {
  background-color: #0a1218;
  background-image:
    linear-gradient(180deg, rgba(61, 214, 245, 0.06) 0%, transparent 18%),
    radial-gradient(ellipse 85% 55% at 50% 0%, rgba(61, 214, 245, 0.12) 0%, transparent 52%);
  background-size: auto, auto;
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--listen-scifi-accent) 28%, transparent),
    inset 0 0 36px color-mix(in srgb, var(--listen-scifi-accent) 6%, transparent);
}

/* HUD frame on active page — full column top to page number (::after; ::before = inactive dim). */
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="sci-fi"][data-reader-decoration="full"][data-book-spread-active="left"]
  .listen-spread-page--current::after,
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="sci-fi"][data-reader-decoration="full"][data-book-spread-active="right"]
  .listen-spread-page--companion::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0.35rem;
  bottom: 1.55rem;
  left: 0.35rem;
  z-index: 4;
  pointer-events: none;
  border: 1px solid rgba(61, 214, 245, 0.68);
  border-radius: 2px;
  background-color: rgba(4, 10, 16, 0.46);
  background-image:
    radial-gradient(circle, rgba(61, 214, 245, 0.95) 0 38%, transparent 42%),
    radial-gradient(circle, rgba(61, 214, 245, 0.95) 0 38%, transparent 42%),
    radial-gradient(circle, rgba(61, 214, 245, 0.95) 0 38%, transparent 42%),
    radial-gradient(circle, rgba(61, 214, 245, 0.95) 0 38%, transparent 42%);
  background-size: 9px 9px, 9px 9px, 9px 9px, 9px 9px;
  background-position: left 5px top 5px, right 5px top 5px, left 5px bottom 5px, right 5px bottom 5px;
  background-repeat: no-repeat;
  box-shadow:
    inset 0 0 28px rgba(4, 12, 18, 0.42),
    0 0 12px rgba(61, 214, 245, 0.08);
  animation: none;
  transform: none;
  width: auto;
  height: auto;
  opacity: 1;
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="sci-fi"]
  .listen-spread-page
  .listen-text-scroll,
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="sci-fi"]
  .listen-spread-page
  .listen-companion-text-scroll {
  flex: 1 1 auto;
  align-self: stretch;
  width: 100%;
  min-height: 0;
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="sci-fi"]
  .listen-text-scroll
  .listen-dialogue-panel,
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="sci-fi"]
  .listen-text-scroll
  .listen-text-translation,
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="sci-fi"]
  .listen-text-scroll
  .listen-attribution-metrics {
  position: relative;
  z-index: 2;
}

/* HUD targeting reticle on inactive page only (bottom-right, above text). */
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="sci-fi"][data-reader-decoration="full"][data-book-spread-active="left"]
  .listen-spread-page--companion::after,
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="sci-fi"][data-reader-decoration="full"][data-book-spread-active="right"]
  .listen-spread-page--current::after {
  content: "";
  position: absolute;
  right: 0.75rem;
  bottom: 0.65rem;
  left: auto;
  top: auto;
  width: 3rem;
  height: 3rem;
  transform: none;
  background-image: var(--listen-skin-scifi-reticle);
  background-size: contain;
  background-repeat: no-repeat;
  border: none;
  box-shadow: none;
  opacity: 0.82;
  pointer-events: none;
  z-index: 8;
  animation: listen-scifi-reticle-pulse 4s ease-in-out infinite;
}

[data-theme="light"]
  .listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="sci-fi"][data-book-spread-active="right"]
  .listen-spread-page--current
  .listen-page-skin-layer,
[data-theme="light"]
  .listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="sci-fi"][data-book-spread-active="left"]
  .listen-spread-page--companion
  .listen-page-skin-layer {
  background-color: #dce8f0;
  background-image:
    linear-gradient(180deg, rgba(61, 214, 245, 0.08) 0%, transparent 20%),
    var(--listen-skin-scifi);
  background-size: auto, 256px 256px;
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--listen-scifi-accent) 22%, transparent);
}

[data-theme="light"]
  .listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="sci-fi"][data-book-spread-active="left"]
  .listen-spread-page--current
  .listen-page-skin-layer,
[data-theme="light"]
  .listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="sci-fi"][data-book-spread-active="right"]
  .listen-spread-page--companion
  .listen-page-skin-layer {
  background-color: #e8f2f8;
  background-image:
    linear-gradient(180deg, rgba(61, 214, 245, 0.1) 0%, transparent 20%),
    radial-gradient(ellipse 85% 55% at 50% 0%, rgba(61, 214, 245, 0.14) 0%, transparent 52%);
  background-size: auto, auto;
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--listen-scifi-accent) 24%, transparent),
    inset 0 0 28px color-mix(in srgb, var(--listen-scifi-accent) 6%, transparent);
}

[data-theme="light"]
  .listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="sci-fi"]
  .listen-in-scene-body {
  background: color-mix(in srgb, #e8f2f8 88%, transparent);
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="sci-fi"]
  .listen-spread-page--current {
  box-shadow: inset -1px 0 0 color-mix(in srgb, var(--listen-scifi-accent) 30%, transparent);
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="sci-fi"]
  .listen-text-scroll::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent 0,
    transparent 3px,
    rgba(61, 214, 245, 0.03) 3px,
    rgba(61, 214, 245, 0.03) 4px
  );
  opacity: 0.55;
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="sci-fi"]
  .listen-text,
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="sci-fi"]
  .listen-text-preview {
  color: var(--listen-skin-ink);
  text-shadow: 0 0 20px color-mix(in srgb, var(--listen-scifi-accent) 14%, transparent);
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="sci-fi"]
  .listen-text
  .listen-word-spoken {
  color: var(--listen-skin-spoken);
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="sci-fi"]
  .listen-text
  .listen-word-active {
  color: #fff;
  text-shadow:
    0 0 12px color-mix(in srgb, var(--listen-scifi-accent) 65%, transparent),
    0 0 24px color-mix(in srgb, var(--listen-scifi-accent) 35%, transparent);
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="sci-fi"]
  .listen-text-translation {
  color: var(--listen-skin-muted);
  border-top-color: color-mix(in srgb, var(--listen-scifi-accent) 25%, transparent);
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="sci-fi"]
  .listen-page-number {
  color: color-mix(in srgb, var(--listen-scifi-accent) 55%, var(--listen-skin-muted));
  opacity: 0.8;
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="sci-fi"][data-reader-decoration="off"]
  .listen-spread-page--current::after,
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="sci-fi"][data-reader-decoration="off"]
  .listen-spread-page--companion::after,
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="sci-fi"][data-reader-decoration="off"]
  .listen-spread-page--current
  .listen-page-skin-layer::before,
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="sci-fi"][data-reader-decoration="off"]
  .listen-spread-page--current
  .listen-page-skin-layer::after,
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="sci-fi"][data-reader-decoration="off"]
  .listen-spread-page--companion
  .listen-page-skin-layer::before,
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="sci-fi"][data-reader-decoration="off"]
  .listen-spread-page--companion
  .listen-page-skin-layer::after,
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="sci-fi"][data-reader-decoration="off"]
  .listen-dialogue-panel::before,
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="sci-fi"][data-reader-decoration="off"]
  .listen-text-scroll::before,
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="sci-fi"][data-reader-decoration="off"]
  .listen-in-scene-toggle::after,
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="sci-fi"][data-reader-decoration="off"]
  .listen-text-scroll::after,
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="sci-fi"][data-reader-decoration="off"]
  .listen-scifi-spread-glow {
  display: none !important;
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="sci-fi"][data-reader-decoration="subtle"]
  .listen-spread-page--companion::after,
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="sci-fi"][data-reader-decoration="subtle"][data-book-spread-active="right"]
  .listen-spread-page--current::after {
  animation: none;
  opacity: 0.45;
}

@keyframes listen-scifi-reticle-pulse {
  0%,
  100% {
    opacity: calc(var(--listen-skin-deco-opacity) * 0.55);
    transform: scale(1);
  }
  50% {
    opacity: calc(var(--listen-skin-deco-opacity) * 0.95);
    transform: scale(1.06);
  }
}

@media (prefers-reduced-motion: reduce) {
  .listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="sci-fi"]
    .listen-spread-page--companion::after,
  .listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="sci-fi"][data-book-spread-active="right"]
    .listen-spread-page--current::after {
    animation: none;
  }

  .listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="sci-fi"]
    .listen-spread-pages-row::after {
    animation: none;
    opacity: 0.12;
  }
}

/* Sci-fi spread glow (replaces parchment candle wash). */
.listen-scifi-spread-glow {
  display: none;
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="sci-fi"]
  .listen-scifi-spread-glow {
  display: block;
  position: absolute;
  inset: -8%;
  z-index: 1;
  pointer-events: none;
  opacity: calc(1.02 * var(--listen-candle-glow-strength, 1));
  transform: scale(var(--listen-candle-glow-spread, 1));
  transition: opacity 0.45s ease, transform 0.45s ease;
  background:
    radial-gradient(
      ellipse 118% 95% at
        calc(var(--listen-candle-glow-x, 50) * 1%)
        calc(var(--listen-candle-glow-y, 12) * 1%),
      rgba(100, 230, 255, 0.55) 0%,
      rgba(61, 214, 245, 0.28) 28%,
      rgba(40, 160, 200, 0.1) 52%,
      transparent 76%
    ),
    radial-gradient(
      ellipse 130% 88% at
        calc((var(--listen-candle-glow-x, 50) - 22) * 1%)
        calc((var(--listen-candle-glow-y, 12) + 14) * 1%),
      rgba(61, 214, 245, 0.2) 0%,
      rgba(45, 180, 220, 0.08) 40%,
      transparent 70%
    );
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="sci-fi"][data-candle-lit="0"]
  .listen-scifi-spread-glow {
  opacity: 0.08;
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="sci-fi"]
  .listen-spread-pages-row {
  position: relative;
  overflow: hidden;
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="sci-fi"]:not([data-reader-decoration="off"])
  .listen-spread-pages-row::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 8;
  pointer-events: none;
  opacity: 0.09;
  background-image: var(--listen-skin-scifi-watermark);
  background-size: 200px 120px;
  background-repeat: repeat;
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="sci-fi"]:not([data-reader-decoration="off"])
  .listen-spread-pages-row::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -120%;
  height: 38%;
  z-index: 4;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(61, 214, 245, 0.06) 38%,
    rgba(120, 240, 255, 0.35) 50%,
    rgba(61, 214, 245, 0.06) 62%,
    transparent 100%
  );
  filter: blur(0.5px);
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="sci-fi"]
  .listen-spread-pages-row.is-scifi-scan-play::after {
  opacity: 1;
  animation: listen-scifi-scan-sweep 4.5s ease-in-out 1 forwards;
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="sci-fi"][data-reader-decoration="off"]
  .listen-spread-pages-row::before,
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="sci-fi"][data-reader-decoration="off"]
  .listen-spread-pages-row::after,
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="sci-fi"][data-reader-decoration="off"]
  .listen-in-scene-toggle::after,
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="sci-fi"][data-reader-decoration="off"]
  .listen-scifi-spread-glow {
  display: none !important;
}

/* Holo emitter (reuses scene light drag / glow logic). */
.listen-scene-candle.is-scifi-lamp {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  flex: 0 0 auto;
  width: 2.35rem;
  min-width: 2.35rem;
  min-height: 2.35rem;
  margin: 0;
  padding: 0.15rem 0.35rem 0.1rem;
  touch-action: none;
  cursor: pointer;
}

.listen-scene-candle.is-scifi-lamp .listen-scene-candle-flame-controls {
  display: none !important;
}

.listen-scene-candle.is-scifi-lamp .listen-scene-candle-smoke,
.listen-scene-candle.is-scifi-lamp.is-snuffing .listen-scene-candle-smoke {
  display: none !important;
  animation: none !important;
}

.listen-scene-candle.is-scifi-lamp .listen-scene-candle-holder {
  display: none !important;
}

.listen-scene-candle.is-scifi-lamp .listen-scene-candle-stick {
  width: 0.55rem;
  height: 0.5rem;
  margin-top: 0;
  border-radius: 2px;
  cursor: inherit;
  background: linear-gradient(180deg, #4a5568 0%, #2a3540 55%, #1a2228 100%);
  box-shadow:
    inset 0 1px 0 rgba(180, 220, 240, 0.25),
    0 0 6px rgba(61, 214, 245, 0.35);
}

.listen-scene-candle.is-scifi-lamp .listen-scene-candle-flame {
  width: 0.72rem;
  height: 0.72rem;
  margin-bottom: -0.12rem;
  border-radius: 50%;
  cursor: inherit;
  background:
    radial-gradient(circle at 42% 38%, #e8fcff 0%, #7ee8ff 28%, #3dd6f5 52%, #1a8aaa 78%, transparent 100%);
  box-shadow:
    0 0 8px rgba(120, 240, 255, 0.95),
    0 0 18px rgba(61, 214, 245, 0.75),
    0 0 32px rgba(61, 214, 245, 0.4);
  animation: listen-scifi-core-pulse 2.8s ease-in-out infinite;
}

.listen-scene-candle.is-scifi-lamp .listen-scene-candle-flame::after {
  content: "";
  position: absolute;
  inset: -0.35rem;
  border-radius: 50%;
  border: 1px solid rgba(120, 240, 255, 0.45);
  animation: listen-scifi-core-ring 2.8s ease-in-out infinite;
}

.listen-scene-candle.is-scifi-lamp.is-snuffed .listen-scene-candle-flame {
  opacity: 0.2;
  transform: scale(0.5);
  animation: none;
  box-shadow: 0 0 4px rgba(61, 214, 245, 0.2);
}

.listen-scene-candle.is-scifi-lamp.is-snuffed .listen-scene-candle-flame::after {
  opacity: 0.15;
  animation: none;
}

#listen-in-scene-body > #listen-scene-candle.is-scifi-lamp .listen-scene-candle-flame,
#listen-in-scene-body > #listen-scene-candle.is-scifi-lamp.is-floating .listen-scene-candle-flame {
  display: block !important;
  width: 0.78rem !important;
  height: 0.78rem !important;
  margin-bottom: -0.1rem !important;
  border-radius: 50% !important;
  background:
    radial-gradient(circle at 42% 38%, #e8fcff 0%, #7ee8ff 28%, #3dd6f5 52%, #1a8aaa 78%, transparent 100%) !important;
  box-shadow:
    0 0 10px rgba(120, 240, 255, 0.95),
    0 0 22px rgba(61, 214, 245, 0.8),
    0 0 36px rgba(61, 214, 245, 0.45) !important;
  transform-origin: 50% 50% !important;
  animation: listen-scifi-core-pulse 2.8s ease-in-out infinite !important;
}

#listen-in-scene-body > #listen-scene-candle.is-scifi-lamp .listen-scene-candle-stick,
#listen-in-scene-body > #listen-scene-candle.is-scifi-lamp.is-floating .listen-scene-candle-stick {
  display: block !important;
  width: 0.55rem !important;
  height: 0.5rem !important;
  margin-top: 0 !important;
  border-radius: 2px !important;
  background: linear-gradient(180deg, #5a6a78 0%, #2a3540 55%, #151c22 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(180, 220, 240, 0.3),
    0 0 8px rgba(61, 214, 245, 0.4) !important;
}

@keyframes listen-scifi-scan-sweep {
  0% {
    top: -120%;
  }
  100% {
    top: 120%;
  }
}

@keyframes listen-scifi-core-pulse {
  0%,
  100% {
    filter: brightness(1);
    transform: scale(1);
  }
  50% {
    filter: brightness(1.15);
    transform: scale(1.06);
  }
}

@keyframes listen-scifi-core-ring {
  0%,
  100% {
    opacity: 0.35;
    transform: scale(1);
  }
  50% {
    opacity: 0.75;
    transform: scale(1.12);
  }
}

@media (prefers-reduced-motion: reduce) {
  .listen-scene-candle.is-scifi-lamp .listen-scene-candle-flame,
  .listen-scene-candle.is-scifi-lamp .listen-scene-candle-flame::after {
    animation: none;
  }
}

/* Tier 4 #15 — illustrated mode chapter art (foreground header).
 *
 * The image is rendered as a real <img> with `object-fit: contain` so
 * the *entire* picture is always visible at full clarity. The container
 * gets a max-height capped by viewport so tall portraits don't eat the
 * screen, and a centered letterbox background so off-aspect images
 * still look intentional rather than cropped. Sits above the reading
 * text in document order, so the panel grows downward to accommodate it.
 */
/* Single illustration slot — chapter art OR inline figure, never both. */
.listen-story-image-slot {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
}

.listen-story-image-slot .listen-story-image[hidden] {
  display: none;
}

.listen-chapter-art {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* Subtle letterbox background for the (rare) off-ratio image. */
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.12) 0%,
    rgba(0, 0, 0, 0) 100%
  );
  border-bottom: 1px solid var(--border);
  overflow: hidden;
  position: relative;
  z-index: 2; /* above atmosphere overlay, below stinger curtain (z=4) */
}

/* IMPORTANT: must override the `display: flex` above. Class+attribute has
 * higher specificity than just the class, so this wins over the base
 * rule and lets `figure.hidden = true` actually hide the figure (rather
 * than leaving the broken <img> visible with its alt text). */
.listen-chapter-art[hidden] {
  display: none;
}

.listen-chapter-art img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  /* Cap height for tall portrait art so the image never pushes the
   * reading area off the screen. ~45% of viewport works well on
   * laptop + tablet; mobile drops to a tighter cap via the @media. */
  max-height: min(45vh, 28rem);
  object-fit: contain;
  background: rgba(0, 0, 0, 0.05);
  /* Cinematic dim: the image is the *atmosphere*, not the focus, so
   * pull brightness + saturation down. Combined with the gradient
   * overlay below, this matches the chapter-stinger look. */
  filter: brightness(0.7) saturate(0.85);
}

/* Cinematic gradient overlay sitting on top of the image: dark at the
 * top (echoing the stinger's `rgba(8, 12, 20, 0.82)` wash), translucent
 * through the middle so the subject reads, and fades back to dark at
 * the very bottom so the image hands off smoothly into the panel
 * underneath. Plus a soft radial vignette to round out the corners. */
.listen-chapter-art::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(
      ellipse 90% 80% at center,
      transparent 35%,
      rgba(8, 12, 20, 0.45) 100%
    ),
    linear-gradient(
      180deg,
      rgba(8, 12, 20, 0.65) 0%,
      rgba(8, 12, 20, 0.25) 22%,
      rgba(8, 12, 20, 0.1) 55%,
      rgba(8, 12, 20, 0.45) 100%
    );
}

@media (max-width: 720px) {
  .listen-chapter-art img {
    max-height: min(35vh, 20rem);
  }

  .listen-atmosphere-host[data-demo-sample="1"][data-reader-layout="book"][data-companion-mode="image"]
    .listen-chapter-art img,
  .listen-atmosphere-host[data-demo-sample="1"][data-reader-layout="book"][data-illustrated="on"]
    .listen-chapter-art img,
  .listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="fantasy-scroll"][data-companion-mode="image"]
    .listen-chapter-art img,
  .listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="fantasy-scroll"][data-illustrated="on"]
    .listen-chapter-art img {
    max-height: none;
  }
}

[data-theme="light"] .listen-chapter-art {
  background: linear-gradient(
    180deg,
    rgba(15, 23, 42, 0.06) 0%,
    rgba(15, 23, 42, 0) 100%
  );
}

[data-theme="light"] .listen-chapter-art img {
  background: rgba(15, 23, 42, 0.03);
  /* Light theme keeps the cinematic dim but loses the deep blacks of
   * the dark theme — the panel beneath is white, so the gradient
   * blends to white rather than dark navy. */
  filter: brightness(0.85) saturate(0.88);
}

/* Demo — crossfade companion art; stacked grid layers share one cell height. */
.listen-atmosphere-host[data-demo-sample="1"] .listen-chapter-art {
  position: relative;
  overflow: hidden;
  display: grid;
  width: 100%;
}

.listen-atmosphere-host[data-demo-sample="1"][data-reader-layout="book"][data-companion-mode="image"]
  .listen-spread-page--companion
  .listen-chapter-art img,
.listen-atmosphere-host[data-demo-sample="1"] .listen-chapter-art-layer {
  grid-area: 1 / 1;
  display: block;
  width: 100%;
  height: auto;
  max-height: none;
  margin: 0;
  object-fit: cover;
  object-position: center center;
  filter: none;
  pointer-events: none;
}

.listen-atmosphere-host[data-demo-sample="1"] .listen-chapter-art-layer,
.listen-atmosphere-host[data-demo-sample="1"][data-reader-layout="book"][data-reader-skin="fantasy-scroll"]
  .listen-chapter-art-layer {
  opacity: 0;
  transition: opacity 1.4s ease;
}

.listen-atmosphere-host[data-demo-sample="1"] .listen-chapter-art img.listen-chapter-art-layer.is-active,
.listen-atmosphere-host[data-demo-sample="1"] .listen-chapter-art-layer.is-active,
.listen-atmosphere-host[data-demo-sample="1"][data-reader-layout="book"][data-reader-skin="fantasy-scroll"]
  .listen-chapter-art img.listen-chapter-art-layer.is-active,
.listen-atmosphere-host[data-demo-sample="1"][data-reader-layout="book"][data-reader-skin="fantasy-scroll"]
  .listen-chapter-art-layer.is-active {
  opacity: 1;
  pointer-events: auto;
  z-index: 1;
}

.listen-atmosphere-host[data-demo-sample="1"] .listen-chapter-art-layer:not(.is-active),
.listen-atmosphere-host[data-demo-sample="1"][data-reader-layout="book"][data-reader-skin="fantasy-scroll"]
  .listen-chapter-art-layer:not(.is-active) {
  z-index: 0;
}

.listen-atmosphere-host[data-demo-sample="1"] .listen-chapter-art.is-crossfading
  .listen-chapter-art-layer,
.listen-atmosphere-host[data-demo-sample="1"][data-reader-layout="book"][data-reader-skin="fantasy-scroll"]
  .listen-chapter-art.is-crossfading
  .listen-chapter-art-layer {
  transition-duration: 1.4s;
}

.listen-atmosphere-host[data-demo-sample="1"] .listen-chapter-art.is-instant-swap
  .listen-chapter-art-layer,
.listen-atmosphere-host[data-demo-sample="1"][data-reader-layout="book"][data-reader-skin="fantasy-scroll"]
  .listen-chapter-art.is-instant-swap
  .listen-chapter-art-layer {
  transition: none !important;
}

/* Demo — slow candle ignition after the opening splash. */
.listen-atmosphere-host[data-demo-sample="1"].is-demo-candle-warming
  .listen-scroll-candle-glow {
  opacity: 0;
  animation: listen-demo-candle-glow-warm var(--listen-demo-candle-ignite-duration, 2.8s) ease forwards;
}

@keyframes listen-demo-candle-glow-warm {
  0% {
    opacity: 0;
  }
  35% {
    opacity: 0.08;
  }
  100% {
    opacity: 0.54;
  }
}

[data-theme="dark"]
  .listen-atmosphere-host[data-demo-sample="1"].is-demo-candle-warming
  .listen-scroll-candle-glow {
  animation-name: listen-demo-candle-glow-warm-dark;
}

@keyframes listen-demo-candle-glow-warm-dark {
  0% {
    opacity: 0;
  }
  35% {
    opacity: 0.1;
  }
  100% {
    opacity: 0.58;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .listen-atmosphere-host[data-demo-sample="1"]
    .listen-scene-candle.is-slow-relighting.is-snuffed
    .listen-scene-candle-flame {
    display: block;
    opacity: 0;
    pointer-events: none;
    animation: listen-candle-slow-relight var(--listen-demo-candle-ignite-duration, 2.8s) ease forwards !important;
  }

  .listen-atmosphere-host[data-demo-sample="1"]
    .listen-scene-candle.is-slow-relighting.is-snuffed
    .listen-scene-candle-stick {
    opacity: 1;
  }
}

@keyframes listen-candle-slow-relight {
  0% {
    opacity: 0;
    transform: scale(0.12) rotate(-4deg);
    filter: brightness(0.45);
    box-shadow: none;
  }
  28% {
    opacity: 0.35;
    transform: scale(0.42) rotate(-2deg);
    filter: brightness(0.62);
    box-shadow:
      0 0 2px rgba(255, 180, 70, 0.35),
      0 0 6px rgba(255, 130, 40, 0.18);
  }
  62% {
    opacity: 0.88;
    transform: scale(0.92) rotate(2deg);
    filter: brightness(0.95);
    box-shadow:
      0 0 4px rgba(255, 200, 80, 0.75),
      0 0 12px rgba(255, 140, 40, 0.45);
  }
  100% {
    opacity: 0.92;
    transform: scale(1) rotate(-1deg);
    filter: brightness(1);
    box-shadow:
      0 0 5px rgba(255, 200, 80, 1),
      0 0 14px rgba(255, 140, 40, 0.75),
      0 0 24px rgba(255, 100, 20, 0.35);
  }
}

[data-theme="light"] .listen-chapter-art::after {
  background:
    radial-gradient(
      ellipse 90% 80% at center,
      transparent 35%,
      rgba(15, 23, 42, 0.18) 100%
    ),
    linear-gradient(
      180deg,
      rgba(15, 23, 42, 0.25) 0%,
      rgba(15, 23, 42, 0.08) 22%,
      rgba(15, 23, 42, 0.05) 55%,
      rgba(15, 23, 42, 0.18) 100%
    );
}

/* Legacy soft-tint background. Now hidden by default; controlled via
 * `hidden` attribute on the element. Kept in CSS in case we re-enable
 * a future "atmospheric wash" sub-mode. */
.listen-illustration-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: brightness(0.9);
  opacity: 0;
  transition: opacity 0.6s ease;
}

.listen-illustration-bg[hidden] {
  display: none;
}

/* Tier 4 #15 — inline figure (same slot as chapter art; only one visible). */
.listen-figure-card {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.12) 0%,
    rgba(0, 0, 0, 0) 100%
  );
  border-bottom: 1px solid var(--border);
  overflow: hidden;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.45s ease, transform 0.45s ease;
}
.listen-figure-card[hidden] {
  display: none;
}
.listen-figure-card.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.listen-figure-card img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: min(45vh, 28rem);
  object-fit: contain;
  background: rgba(0, 0, 0, 0.05);
  filter: brightness(0.7) saturate(0.85);
}
@media (max-width: 720px) {
  .listen-figure-card img {
    max-height: min(35vh, 20rem);
  }
}
.listen-figure-caption {
  margin: 0;
  padding: 0.55rem 0.85rem 0.7rem;
  font-size: 0.85rem;
  font-style: italic;
  color: var(--muted);
}
.listen-figure-caption[hidden] {
  display: none;
}
@media (prefers-reduced-motion: reduce) {
  .listen-figure-card {
    transition: opacity 0.15s linear;
    transform: none;
  }
}

/* Tier 4 #18 — bilingual translation line.
 * Rendered under the original line in a softer color and italic. Hidden
 * by default; .listen-text-translation:not([hidden]) reveals it.
 */
/* Per-line heuristic / LLM / validator attribution (Listen debug). */
.listen-attribution-metrics {
  margin: 0.85rem 0 0;
  padding: 0.75rem 0.9rem;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--muted);
  background: var(--panel-2, rgba(0, 0, 0, 0.2));
  border: 1px solid var(--border);
  border-radius: 10px;
}
.listen-attribution-metrics[hidden] {
  display: none;
}
.listen-attribution-metrics p {
  margin: 0 0 0.45rem;
}
.listen-attribution-metrics p:last-child {
  margin-bottom: 0;
}
.listen-attribution-agreed {
  color: var(--text);
  font-size: 0.88rem;
}
.listen-attribution-list {
  margin: 0 0 0.5rem;
  padding-left: 1.15rem;
}
.listen-attribution-list li {
  margin-bottom: 0.25rem;
}
.listen-attribution-winner {
  color: var(--text);
  border-top: 1px solid var(--border);
  padding-top: 0.45rem;
  margin-top: 0.35rem !important;
  margin-bottom: 0.2rem !important;
}
.listen-attribution-why {
  margin: 0 0 0.5rem !important;
  padding-left: 0.15rem;
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--text-muted, var(--text));
  opacity: 0.92;
}
.listen-attribution-metrics .meta {
  opacity: 0.85;
  font-size: 0.78rem;
}
.listen-attribution-metrics-empty {
  font-style: italic;
  opacity: 0.9;
}
.listen-attribution-summary {
  margin-bottom: 0.65rem;
  padding-bottom: 0.55rem;
  border-bottom: 1px solid var(--border);
}
.listen-attribution-summary-heading {
  margin: 0 0 0.4rem;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text);
}
.listen-attribution-line-heading {
  margin-top: 0.15rem;
}
.listen-attribution-summary-line {
  margin: 0 0 0.35rem;
  color: var(--text);
  font-size: 0.84rem;
  line-height: 1.45;
}
.listen-attribution-summary-line:last-child {
  margin-bottom: 0;
}
.listen-attribution-validator {
  margin-top: 0.35rem;
  padding-top: 0.35rem;
  border-top: 1px dashed var(--border);
}

.listen-attribution-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem 0.75rem;
  margin-top: 0.55rem;
  padding-top: 0.55rem;
  border-top: 1px solid var(--border);
}

.listen-attribution-apply-btn {
  font-size: 0.82rem;
  padding: 0.35rem 0.85rem;
}

.listen-attribution-apply-hint {
  flex: 1 1 12rem;
}

.listen-ai-watermark-hint {
  margin: 0.55rem 0 0;
  font-size: 0.78rem;
  line-height: 1.45;
  font-style: italic;
  opacity: 0.9;
}

.listen-ai-watermark-hint[hidden] {
  display: none;
}

.listen-text-translation {
  margin: 0.6rem 0 0;
  font-size: 0.96rem;
  line-height: 1.55;
  font-style: italic;
  color: var(--muted);
  border-top: 1px dashed rgba(255, 255, 255, 0.08);
  padding-top: 0.55rem;
}
.listen-text-translation[hidden] {
  display: none;
}
[data-theme="light"] .listen-text-translation {
  border-top-color: rgba(0, 0, 0, 0.12);
}

.listen-atmosphere-host[data-mood="tension"] {
  box-shadow: inset 0 0 0 1px rgba(100, 140, 200, 0.2);
}

.listen-atmosphere-host[data-mood="tension"] .listen-atmosphere-overlay {
  background: linear-gradient(
    180deg,
    rgba(40, 70, 120, 0.12) 0%,
    transparent 45%,
    rgba(20, 35, 60, 0.08) 100%
  );
}

.listen-atmosphere-host[data-mood="tension"] .listen-text {
  line-height: 1.58;
  letter-spacing: 0.01em;
}

.listen-atmosphere-host[data-mood="romance"] .listen-atmosphere-overlay {
  background: radial-gradient(
    ellipse 120% 80% at 50% 0%,
    rgba(220, 140, 80, 0.14) 0%,
    transparent 65%
  );
}

.listen-atmosphere-host[data-mood="action"] .listen-atmosphere-overlay {
  background: linear-gradient(
    90deg,
    rgba(200, 60, 60, 0.06) 0%,
    transparent 40%,
    rgba(200, 60, 60, 0.06) 100%
  );
}

.listen-atmosphere-host[data-mood="mystery"] .listen-atmosphere-overlay,
.listen-atmosphere-host[data-ambience="night"] .listen-atmosphere-overlay {
  background: linear-gradient(
    180deg,
    rgba(30, 25, 55, 0.2) 0%,
    transparent 55%
  );
}

.listen-atmosphere-host[data-ambience="storm"] .listen-atmosphere-overlay::before,
.listen-atmosphere-host[data-ambience="rain_heavy"] .listen-atmosphere-overlay::before,
.listen-atmosphere-host[data-ambience="rain_light"] .listen-atmosphere-overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    105deg,
    transparent 0,
    transparent 5px,
    rgba(180, 210, 240, 0.14) 5px,
    rgba(180, 210, 240, 0.14) 6px
  );
  animation: listen-rain-drift 2.6s linear infinite;
  opacity: 0.85;
}

/* Cinema uses full-screen particle rain — hide the book-local stripe layer that
 * drifts as a visible rectangle over the spread. */
.listen-atmosphere-host[data-immersion-level="cinema"][data-ambience="storm"]
  .listen-atmosphere-overlay::before,
.listen-atmosphere-host[data-immersion-level="cinema"][data-ambience="rain_heavy"]
  .listen-atmosphere-overlay::before,
.listen-atmosphere-host[data-immersion-level="cinema"][data-ambience="rain_light"]
  .listen-atmosphere-overlay::before {
  content: none;
  animation: none;
}

[data-theme="light"] .listen-atmosphere-host[data-ambience="storm"] .listen-atmosphere-overlay::before,
[data-theme="light"] .listen-atmosphere-host[data-ambience="rain_heavy"] .listen-atmosphere-overlay::before,
[data-theme="light"] .listen-atmosphere-host[data-ambience="rain_light"] .listen-atmosphere-overlay::before {
  background-image: repeating-linear-gradient(
    105deg,
    transparent 0,
    transparent 5px,
    rgba(70, 110, 160, 0.2) 5px,
    rgba(70, 110, 160, 0.2) 6px
  );
}

.listen-atmosphere-host[data-ambience="rain_heavy"] .listen-atmosphere-overlay::before,
.listen-atmosphere-host[data-ambience="storm"] .listen-atmosphere-overlay::before {
  animation-duration: 1.7s;
  opacity: 1;
}

.listen-atmosphere-host[data-ambience="storm"] .listen-atmosphere-overlay {
  animation: listen-storm-drift 14s ease-in-out infinite;
}

@keyframes listen-rain-drift {
  from {
    transform: translate3d(0, -28%, 0);
  }
  to {
    transform: translate3d(-12%, 28%, 0);
  }
}

@keyframes listen-storm-drift {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(6px);
  }
}

.listen-atmosphere-host.listen-shake {
  animation: listen-action-shake 0.32s ease-out;
}

@keyframes listen-action-shake {
  0%,
  100% {
    transform: translate(0, 0);
  }
  20% {
    transform: translate(-4px, 2px);
  }
  40% {
    transform: translate(4px, -2px);
  }
  60% {
    transform: translate(-3px, -2px);
  }
  80% {
    transform: translate(3px, 2px);
  }
}

.listen-scrub.listen-scrub-pulse {
  animation: listen-scrub-pulse 1.2s ease-in-out infinite;
}

@keyframes listen-scrub-pulse {
  0%,
  100% {
    filter: brightness(1);
  }
  50% {
    filter: brightness(1.15);
  }
}

/* Dialogue vs narration — shared inset so the accent bar never shifts layout */
.listen-text.listen-text-dialogue,
.listen-text.listen-text-narration {
  font-style: normal;
  padding-left: 1.1rem;
  border-left: 3px solid var(--listen-speaker-color, var(--accent));
}

.listen-text.listen-text-narration {
  --listen-speaker-color: hsl(220 10% 52%);
}

.listen-text.listen-text-dialogue .listen-word-active {
  background: var(--listen-word-active-bg, rgba(79, 140, 255, 0.38));
}

.listen-text.listen-sync-precise .listen-word-active {
  background: var(--listen-word-active-bg, rgba(72, 187, 120, 0.35));
}

/* Chapter stinger curtain */
.listen-stinger-curtain {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  padding: 1.5rem;
  text-align: center;
  background: rgba(8, 12, 20, 0.82);
  opacity: 0;
  transition: opacity 0.45s ease;
  pointer-events: none;
}

.listen-stinger-curtain.is-visible {
  opacity: 1;
}

.listen-stinger-spotlight {
  position: absolute;
  top: -20%;
  left: 50%;
  width: 140%;
  height: 70%;
  transform: translateX(-50%);
  background: radial-gradient(
    ellipse 50% 60% at 50% 100%,
    color-mix(in srgb, var(--spotlight) 55%, transparent) 0%,
    transparent 70%
  );
  opacity: 0.85;
  pointer-events: none;
}

.listen-stinger-kicker {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--spotlight);
  position: relative;
  z-index: 1;
}

.listen-stinger-title {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.25;
  max-width: 100%;
  position: relative;
  z-index: 1;
}

.listen-stinger-cast {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.45rem;
  position: relative;
  z-index: 1;
}

.listen-stinger-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  color: #fff;
  animation: listen-stinger-avatar-in 0.5s ease backwards;
}

.listen-stinger-avatar:nth-child(2) {
  animation-delay: 0.08s;
}
.listen-stinger-avatar:nth-child(3) {
  animation-delay: 0.16s;
}
.listen-stinger-avatar:nth-child(4) {
  animation-delay: 0.24s;
}

@keyframes listen-stinger-avatar-in {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.85);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.listen-scene-line {
  margin: 0 0 0.25rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--spotlight);
  letter-spacing: 0.02em;
  min-height: 1.1em;
}

@media (prefers-reduced-motion: reduce) {
  .listen-atmosphere-host[data-ambience="storm"] .listen-atmosphere-overlay,
  .listen-atmosphere-host[data-ambience="rain_heavy"] .listen-atmosphere-overlay::before,
  .listen-atmosphere-host[data-ambience="rain_light"] .listen-atmosphere-overlay::before,
  .listen-atmosphere-host.listen-shake,
  .listen-scrub.listen-scrub-pulse,
  .listen-stinger-avatar {
    animation: none !important;
  }
}

body.listen-scene-motion-off .listen-atmosphere-host.listen-shake,
body.listen-scene-motion-off .listen-scrub.listen-scrub-pulse {
  animation: none !important;
}

.listen-atmosphere-host .listen-text-scroll {
  position: relative;
  background: var(--panel);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

/* Sci-fi book spread: keep text panels transparent so hex grid + HUD frame show through. */
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="sci-fi"]
  .listen-spread-page
  .listen-text-scroll,
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="sci-fi"]
  .listen-spread-page
  .listen-companion-text-scroll,
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="sci-fi"]
  .listen-spread-page
  .listen-story-image-slot {
  background: transparent;
  box-shadow: none;
}

.listen-dialogue-panel {
  --listen-dialogue-pad-x: 1.25rem;
}

/* Speaker header + dialogue share one accent bar and horizontal inset */
.listen-dialogue-panel:has(.listen-speaker-bubble:not([hidden])) {
  border-left: 3px solid var(--listen-speaker-color, var(--accent));
  padding: 1.05rem var(--listen-dialogue-pad-x) 1.35rem
    calc(var(--listen-dialogue-pad-x) - 3px);
}

.listen-dialogue-panel:has(.listen-speaker-bubble:not([hidden])) .listen-text.listen-text-dialogue {
  border-left: none;
  padding: 0.4rem 0 0;
  min-height: 3.5rem;
}

.listen-speaker-bubble {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0;
  padding: 0;
  pointer-events: none;
}

.listen-speaker-bubble[hidden] {
  display: none;
}

.listen-speaker-bubble-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1.65rem;
  height: 1.65rem;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  color: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}

.listen-speaker-bubble-name {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0.01em;
}

.listen-text-scroll .listen-text {
  pointer-events: auto;
}

/* Format-override inline emphasis (b/i/u in page text overrides). */
.listen-text-scroll .listen-text b,
.listen-companion-text-scroll .listen-text b {
  font-weight: 700;
}

.listen-text-scroll .listen-text i,
.listen-companion-text-scroll .listen-text i {
  font-style: italic;
}

.listen-text-scroll .listen-text u,
.listen-companion-text-scroll .listen-text u {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.listen-text {
  min-height: 5rem;
  margin: 0;
  padding: 1.35rem 1.25rem;
  line-height: 1.65;
  font-size: 1.05rem;
  cursor: text;
  user-select: text;
}

.listen-text:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.listen-text.listen-text-paused {
  cursor: text;
}

.listen-text .listen-word-spoken,
.listen-text .listen-word-gap.listen-word-spoken {
  color: var(--muted, #9aa3b2);
  opacity: 0.82;
}

/* Fantasy scroll: parchment stays light — same warm ink on both pages. */
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="fantasy-scroll"]
  .listen-text
  .listen-word-spoken {
  color: var(--listen-skin-spoken);
  opacity: 1;
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="fantasy-scroll"]
  .listen-text
  .listen-word:not(.listen-word-spoken):not(.listen-word-active) {
  color: var(--listen-skin-ink);
}

/* Romance letter: cream paper stays light in every app theme. */
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="romance"]
  .listen-text
  .listen-word-spoken {
  color: var(--listen-skin-spoken);
  opacity: 1;
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="romance"]
  .listen-text
  .listen-word:not(.listen-word-spoken):not(.listen-word-active) {
  color: var(--listen-skin-ink);
}

.listen-text .listen-word-active {
  background: var(--listen-word-active-bg, rgba(79, 140, 255, 0.38));
  color: inherit;
  opacity: 1;
  border-radius: 3px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.listen-text.listen-sync-precise .listen-word-active {
  background: var(--listen-word-active-bg, rgba(72, 187, 120, 0.35));
}

.scrub {
  width: 100%;
  margin-top: 1rem;
}

#step-7 .scrub:not(.listen-toolbar-scrub) {
  margin-top: 1rem;
}

.listen-sleep-hint {
  margin: 0.35rem 0 0.5rem;
  line-height: 1.4;
}

.listen-sleep-timer-status {
  margin: 0.25rem 0 0;
  font-size: 0.82rem;
  line-height: 1.35;
}

/* Legacy wrapper — kept for rollback reference; compact layout uses .listen-transport-row */
.listen-skip-time-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  margin: 0 0 0.65rem;
  flex-wrap: wrap;
}

.listen-skip-time {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 0.45rem;
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
}

.listen-master-volume {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.45rem;
  flex: 0 1 auto;
  margin-left: auto;
}

.listen-master-volume-slider {
  width: min(7.5rem, 28vw);
  min-width: 4.5rem;
  margin: 0;
  accent-color: var(--accent);
}

.listen-mute-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  cursor: pointer;
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease;
}

.listen-mute-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--accent);
}

.listen-mute-btn.is-muted {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
  background: rgba(79, 140, 255, 0.12);
}

.listen-mute-icon {
  width: 1.15rem;
  height: 1.15rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.listen-mute-icon--off {
  display: none;
}

.listen-mute-btn.is-muted .listen-mute-icon--on {
  display: none;
}

.listen-mute-btn.is-muted .listen-mute-icon--off {
  display: block;
}

.listen-skip-time-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 3.25rem;
  padding: 0.4rem 0.65rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease;
}

.listen-skip-time-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--accent);
  color: var(--text);
}

.listen-text-dyslexia {
  font-family: "Comic Sans MS", "Segoe UI", "Arial", sans-serif;
  letter-spacing: 0.04em;
  word-spacing: 0.12em;
  line-height: 1.7;
}

.step1-clipboard-row {
  margin: 0.5rem 0 0;
}

.listen-jump-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
  margin: 0;
}

.listen-nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  padding: 0.55rem 0.95rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease,
    transform 0.12s ease;
}

.listen-nav-btn svg {
  width: 1.05rem;
  height: 1.05rem;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.listen-nav-btn:hover:not(:disabled) {
  background: rgba(79, 140, 255, 0.12);
  border-color: rgba(79, 140, 255, 0.45);
  color: #fff;
}

.listen-nav-btn:active:not(:disabled) {
  transform: scale(0.97);
}

.listen-nav-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.listen-nav-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.listen-nav-btn--compact {
  border-radius: 8px;
  font-size: 0.85rem;
}

[data-theme="light"] .listen-nav-btn {
  background: rgba(26, 26, 46, 0.04);
}

[data-theme="light"] .listen-nav-btn:hover:not(:disabled) {
  background: rgba(58, 111, 214, 0.1);
  border-color: rgba(58, 111, 214, 0.35);
}

.listen-jump-bar button {
  max-width: 100%;
}

.listen-dialog-block {
  text-align: center;
  margin: 0.25rem 0 0.5rem;
}

.listen-controls {
  justify-content: center;
}

.meta {
  color: var(--muted);
  font-size: 0.9rem;
}

.process-hint {
  margin: 0 0 0.75rem;
  line-height: 1.45;
  max-width: 42rem;
}

.process-controls {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin: 1rem 0 0.5rem;
}

.status {
  text-align: center;
  color: var(--muted);
  font-size: 0.875rem;
  line-height: 1.45;
  margin-top: 0.75rem;
}

/* Fixed footer — avoids layout/scrollbar jumps when status text appears briefly. */
#global-status.status {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9000;
  margin: 0;
  padding: 0.55rem 1rem calc(0.55rem + env(safe-area-inset-bottom, 0px));
  background: color-mix(in srgb, var(--bg) 94%, transparent);
  border-top: 1px solid transparent;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transform: translateY(110%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    transform 0.18s ease,
    opacity 0.18s ease,
    visibility 0.18s ease,
    border-color 0.18s ease;
}

#global-status.status.is-visible {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
  border-top-color: var(--border);
}

.status.is-ok {
  color: var(--success);
}

.review-panel {
  margin-top: 1rem;
  padding: 1rem;
  background: var(--panel);
  border-radius: 8px;
  max-height: 280px;
  overflow-y: auto;
  font-size: 0.85rem;
}

.review-list {
  margin: 0.5rem 0 0;
  padding-left: 0;
  list-style: none;
}

.review-list li {
  margin: 0;
  padding: 0;
}

.review-queue-item {
  display: block;
  width: 100%;
  margin: 0 0 0.35rem;
  padding: 0.5rem 0.65rem;
  text-align: left;
  font: inherit;
  font-size: 0.85rem;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
}

.review-queue-item:hover {
  border-color: var(--accent);
  background: rgba(90, 156, 255, 0.08);
}

.review-queue-item:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.review-queue-anomaly {
  margin-bottom: 0.65rem;
}

.review-queue-anomaly-card {
  padding: 0.65rem 0.75rem;
  border: 1px solid rgba(255, 180, 80, 0.45);
  border-radius: 8px;
  background: rgba(255, 180, 80, 0.06);
}

.review-queue-anomaly-label {
  margin: 0 0 0.35rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #ffb450;
}

.review-queue-anomaly-text {
  margin: 0 0 0.35rem;
  font-size: 0.9rem;
}

.review-queue-anomaly-hint {
  margin: 0 0 0.55rem;
}

.review-queue-anomaly-guess {
  margin: 0 0 0.55rem;
  color: var(--accent);
}

.review-queue-anomaly-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.review-assign-quote {
  font-style: italic;
}

.dev-test-scope {
  margin-top: 1rem;
  padding: 0.75rem 1rem;
  border: 1px dashed var(--border);
  border-radius: 8px;
  background: rgba(90, 156, 255, 0.04);
}

.dev-test-scope legend {
  font-size: 0.85rem;
  font-weight: 600;
  padding: 0 0.25rem;
}

.dev-test-metrics-body {
  margin: 0;
  line-height: 1.45;
}

.dev-test-compare-list {
  margin: 0.5rem 0 0;
  padding-left: 1.2rem;
}

.dev-test-metrics-inline {
  margin: 0 0 0.5rem;
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
  background: rgba(90, 156, 255, 0.08);
  border: 1px solid var(--border);
}

.narrator-row {
  position: relative;
  z-index: 5;
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-width: 0;
}

.narrator-label {
  display: block;
  font-size: 0.85rem;
  color: var(--muted);
  margin-bottom: 0;
}

.narrator-controls {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
}

.narrator-controls .narrator-voice-select,
.narrator-row select {
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
  padding: 0.5rem;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
}

.narrator-preview {
  margin-top: 0;
  flex-shrink: 0;
}

.cast-item .name {
  font-weight: 600;
}

.cast-item .stats {
  font-size: 0.8rem;
  color: var(--muted);
  margin-top: 0.2rem;
}

.tag {
  display: inline-block;
  padding: 0.2rem 0.5rem;
  margin: 0.15rem 0.25rem 0 0;
  background: var(--bg);
  border-radius: 4px;
  font-size: 0.75rem;
  color: var(--muted);
}

.sample-lines blockquote {
  margin: 0.5rem 0;
  padding-left: 0.75rem;
  border-left: 3px solid var(--accent);
  color: var(--muted);
}

.cast-detail-header {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 0.45rem;
}

.cast-detail-heading {
  flex: 1 1 auto;
  min-width: 0;
}

.cast-detail-title-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

.cast-detail-title-row h3 {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
  font-size: 1.2rem;
  line-height: 1.3;
}

.cast-detail-mentions {
  flex: 0 0 auto;
  font-size: 0.8rem;
  color: var(--muted);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.cast-detail-debut {
  margin: 0.2rem 0 0;
  font-size: 0.8rem;
  color: var(--muted);
  line-height: 1.35;
  font-variant-numeric: tabular-nums;
}

.cast-detail-debut strong {
  font-weight: 600;
  color: var(--text);
}

.trait-fields-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.55rem 0.85rem;
  margin: 0.45rem 0 0.65rem;
}

.trait-field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.82rem;
  color: var(--muted);
  min-width: 0;
}

.trait-field-half {
  min-width: 0;
}

.traits-display {
  margin-bottom: 0.4rem;
}

.traits-display-discovered {
  margin-top: 0.35rem;
}

.traits-discovered-collapsible {
  margin-bottom: 0.5rem;
}

.traits-display .tag.muted {
  color: var(--muted);
  font-style: italic;
}

.director-preset-row {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin-bottom: 0;
  font-size: 0.85rem;
  color: var(--muted);
}

.director-preset-row select {
  width: 100%;
}

.acting-notes-fields {
  margin: 0;
  padding: 0.5rem 0 0;
  border: none;
  border-radius: 0;
  background: transparent;
}

.acting-delivery-row {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin: 0;
  font-size: 0.82rem;
  color: var(--muted);
}

.acting-params-grid {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-top: 0.55rem;
}

.acting-param-row {
  display: grid;
  grid-template-columns: 6.85rem 1fr;
  gap: 0.75rem 1.25rem;
  align-items: center;
  margin: 0;
  cursor: default;
}

.acting-param-label {
  font-size: 0.82rem;
  color: var(--muted);
}

.acting-pan-hint {
  margin: 0.45rem 0 0;
  font-size: 0.78rem;
  line-height: 1.35;
}

.cast-voice-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 0.5rem 0.75rem;
  align-items: center;
  margin: 0.65rem 0 0.35rem;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.08);
}

.cast-voice-label {
  margin: 0;
  font-size: 0.85rem;
  white-space: nowrap;
}

.cast-voice-preview {
  margin: 0;
  gap: 0;
  flex-wrap: nowrap;
}

.cast-voice-preview .cast-icon-btn {
  width: 2.15rem;
  height: 2.15rem;
}

.cast-detail-collapsible {
  margin-top: 0.5rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.45rem 0.65rem 0.55rem;
  background: rgba(0, 0, 0, 0.08);
}

.cast-detail-collapsible summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 0.88rem;
  list-style: none;
  user-select: none;
}

.cast-detail-collapsible summary .meta {
  font-weight: 500;
}

.cast-detail-collapsible summary::-webkit-details-marker {
  display: none;
}

.cast-detail-collapsible summary::before {
  content: "▸ ";
  color: var(--muted);
}

.cast-detail-collapsible[open] summary::before {
  content: "▾ ";
}

.acting-notes-collapsible {
  margin-bottom: 0;
}

.sample-lines-body {
  margin-top: 0.45rem;
  max-height: 9rem;
  overflow-y: auto;
}

.listen-immersion-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
  margin: 0.75rem 0;
}

.listen-ambience-controls {
  margin: 0.5rem 0 0.75rem;
  padding: 0.75rem;
  background: var(--panel);
  border-radius: 8px;
  border: 1px solid var(--border);
  max-width: 42rem;
}

.listen-ambience-controls.is-disabled {
  opacity: 0.5;
  pointer-events: none;
}

.listen-ambience-volume-label {
  display: block;
  margin-bottom: 0.5rem;
}

.listen-ambience-controls .listen-ambience-test-hint {
  margin: 0.5rem 0 0;
}

.listen-ambience-test-status {
  margin: 0.35rem 0 0;
  color: var(--accent, #4f8cff);
}

.listen-ambience-controls .preview-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.listen-speed label,
.listen-highlight-sync label {
  display: block;
  margin: 0.5rem 0;
}

.listen-highlight-toggle {
  display: block;
  margin: 0.75rem 0 0.35rem;
}

.listen-highlight-sync.is-disabled {
  opacity: 0.55;
  pointer-events: none;
}

.listen-highlight-hint {
  margin: 0 0 0.5rem;
  max-width: 42rem;
}

.voice-rec-list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-bottom: 0.45rem;
}

.voice-rec-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.45rem 0.5rem;
  border-radius: 6px;
  background: var(--bg);
}

.voice-rec-item.current {
  outline: 1px solid var(--accent);
}

.voice-rec-info {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.voice-rec-info .meta {
  font-size: 0.75rem;
}

.best-match {
  color: var(--accent);
  cursor: help;
}

.voice-quality-badge {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: 0.12rem 0.4rem;
  border-radius: 4px;
  margin-left: 0.35rem;
  vertical-align: middle;
}

.voice-quality-badge.voice-quality-premium {
  background: rgba(99, 179, 237, 0.2);
  color: #7ec8ff;
}

.voice-quality-badge.voice-quality-neural {
  background: rgba(72, 187, 120, 0.18);
  color: #86efac;
}

.voice-quality-badge.voice-quality-legacy {
  background: rgba(160, 174, 192, 0.15);
  color: #94a3b8;
}

.voice-quality-badge.voice-preview-shared {
  background: rgba(251, 191, 36, 0.15);
  color: #fbbf24;
}

.voice-quality-badge.voice-quality-restricted {
  background: rgba(248, 113, 113, 0.18);
  color: #fca5a5;
}

.cast-preview-engine-note {
  font-size: 0.85rem;
  color: #fbbf24;
  background: rgba(251, 191, 36, 0.08);
  border: 1px solid rgba(251, 191, 36, 0.25);
  border-radius: 8px;
  padding: 0.55rem 0.75rem;
  margin: 0;
  line-height: 1.45;
}

.cast-preview-engine-note[hidden] {
  display: none;
}

.voice-rec-info .voice-quality-badge {
  margin-left: 0;
  margin-top: 0.2rem;
}

.voice-rec-actions {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.35rem;
  flex-shrink: 0;
}

#btn-refresh-voice-rec {
  font-size: 0.85rem;
}

.app-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}

.app-modal[hidden] {
  display: none !important;
}

.app-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
}

.app-modal-panel {
  position: relative;
  width: min(28rem, 100%);
  padding: 1.35rem 1.5rem 1.25rem;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
}

.app-modal-title {
  margin: 0 0 0.65rem;
  font-size: 1.15rem;
}

.app-modal-message {
  margin: 0 0 1.25rem;
  color: var(--muted);
  line-height: 1.5;
  white-space: pre-line;
}

.app-modal-ai-bulk .app-modal-panel {
  width: min(34rem, 100%);
}

.app-modal-ai-bulk .app-modal-title {
  margin-bottom: 0.5rem;
}

.app-modal-ai-bulk .app-modal-message {
  margin-bottom: 0.85rem;
  color: var(--text);
  font-size: 1.02rem;
}

.app-ai-bulk-update-hint {
  margin: 0 0 1.15rem;
}

.app-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.65rem;
  flex-wrap: wrap;
}

.app-modal-actions--triple {
  justify-content: stretch;
}

.app-modal-actions--triple button {
  flex: 1 1 auto;
  min-width: 5.5rem;
}

.app-modal-panel--compact {
  max-width: 26rem;
}

.app-modal-actions button.danger {
  background: var(--error);
  color: #fff;
}

.app-modal-actions button.danger:hover {
  filter: brightness(1.08);
}

.sidebar-section {
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.sidebar-library-group {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
}

.sidebar-section--library {
  border-bottom: none;
}

.sidebar-section-header-row {
  display: flex;
  align-items: stretch;
}

.sidebar-section-header-row .sidebar-section-toggle {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
}

.sidebar-section--purchases {
  flex-shrink: 0;
  border-bottom: 1px solid var(--border);
}

.sidebar-bottom-stack {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--border);
}

.sidebar-account-footer {
  padding: 0.65rem 0.75rem 0.5rem;
  border-bottom: 1px solid var(--border);
}

.sidebar-account-footer[hidden] {
  display: none !important;
}

.sidebar-account-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.35rem;
}

.sidebar-account-identity {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.sidebar-usage-pills {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin: 0.45rem 0 0.65rem;
}

.sidebar-usage-pill {
  display: block;
  padding: 0.35rem 0.5rem;
  border-radius: 8px;
  font-size: 0.72rem;
  line-height: 1.35;
  color: var(--muted);
  background: color-mix(in srgb, var(--text) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--text) 10%, transparent);
}

.sidebar-usage-pill.is-warn {
  color: var(--text);
  border-color: color-mix(in srgb, var(--warning, #d4a017) 45%, transparent);
  background: color-mix(in srgb, var(--warning, #d4a017) 14%, transparent);
}

.sidebar-usage-pill-label {
  font-weight: 600;
  color: var(--text);
}

/* Book slot status — locked (gold/warn), grace (accent), pending (neutral) */
.slot-status-chip {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  padding: 0.14rem 0.45rem;
  border-radius: 6px;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  line-height: 1.3;
  text-transform: uppercase;
}

.slot-status-chip.is-locked {
  color: var(--text);
  border: 1px solid color-mix(in srgb, var(--warning, #d4a017) 45%, transparent);
  background: color-mix(in srgb, var(--warning, #d4a017) 14%, transparent);
}

.slot-status-chip.is-grace {
  color: var(--text);
  border: 1px solid color-mix(in srgb, var(--accent) 42%, transparent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}

.slot-status-chip.is-pending {
  color: var(--muted);
  border: 1px solid color-mix(in srgb, var(--text) 12%, transparent);
  background: color-mix(in srgb, var(--text) 5%, transparent);
}

.slot-status-chip--offline {
  color: var(--text);
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}

.library-offline-btn.is-busy {
  opacity: 0.65;
  pointer-events: none;
}

.offline-shell-status {
  position: sticky;
  top: 0;
  z-index: 38;
  padding: 0.55rem 1rem;
  font-size: 0.88rem;
  text-align: center;
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
  background: color-mix(in srgb, var(--accent) 10%, var(--panel));
}

.offline-shell-status[data-level="ok"] {
  background: color-mix(in srgb, #3a8f4a 14%, var(--panel));
  border-bottom-color: color-mix(in srgb, #3a8f4a 35%, transparent);
}

.offline-shell-status[data-level="warn"] {
  background: color-mix(in srgb, var(--spotlight) 12%, var(--panel));
  border-bottom-color: color-mix(in srgb, var(--spotlight) 35%, transparent);
}

.offline-shell-status[hidden] {
  display: none !important;
}

.offline-shell-status a {
  color: inherit;
  text-decoration: underline;
}

.offline-mode-banner {
  position: sticky;
  top: 0;
  z-index: 39;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.65rem 1rem;
  min-height: 2.75rem;
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  background: color-mix(in srgb, var(--accent) 12%, var(--panel));
  color: var(--text);
  font-size: 0.92rem;
  text-align: center;
}

.offline-mode-banner[hidden] {
  display: none !important;
}

body.offline-has-downloads .library-sidebar {
  z-index: 50;
}

body.offline-has-downloads .library-sidebar-toggle {
  position: relative;
  z-index: 53;
}

.offline-empty-panel {
  max-width: 28rem;
  margin: 4rem auto;
  padding: 0 1.25rem;
  text-align: center;
}

.offline-empty-panel[hidden] {
  display: none !important;
}

.offline-empty-panel h2 {
  margin: 0 0 0.75rem;
  font-size: 1.35rem;
}

.standalone-offline-home .standalone-offline-list {
  text-align: left;
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
}

.standalone-offline-menu-hint {
  margin-top: 1.25rem;
}

.standalone-offline-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  margin-top: 1rem;
}

.sidebar-offline-hint {
  margin: 0 0 0.65rem;
  font-size: 0.82rem;
}

.offline-download-item {
  padding: 0.45rem 0;
}

.offline-download-title-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.55rem 0.75rem;
  align-items: center;
}

.offline-download-item--has-cover .offline-download-title-row {
  grid-template-columns: auto minmax(0, 1fr) auto;
}

.offline-download-cover-wrap {
  align-self: center;
}

.offline-download-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
}

.offline-download-body .library-doc-title {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.offline-download-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  flex-shrink: 0;
}

.offline-download-item .offline-download-meta {
  font-size: 0.78rem;
  opacity: 0.85;
  margin: 0;
}

.offline-dl-progress {
  display: inline;
}

.offline-dl-count {
  font-variant-numeric: tabular-nums;
}

.offline-dl-bytes {
  font-variant-numeric: tabular-nums;
  opacity: 0.88;
}

#global-status.offline-dl-status-host {
  transition:
    transform 0.18s ease,
    opacity 0.18s ease,
    visibility 0.18s ease,
    border-color 0.18s ease;
}

.listen-offline-status {
  margin: 0.35rem 0 0;
  width: 100%;
}

.settings-usage-pills {
  margin: 0 0 1rem;
  max-width: 36rem;
}

.sidebar-account-email,
.sidebar-account-plan {
  margin: 0;
  line-height: 1.35;
}

.sidebar-pro-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.12rem 0.45rem;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
  background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--spotlight) 55%, var(--accent)));
  border: 1px solid color-mix(in srgb, var(--accent) 70%, #fff);
}

.sidebar-pro-badge[hidden] {
  display: none !important;
}

.sidebar-manage-billing {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.45rem 0.75rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text);
  font-weight: 600;
  font-size: 0.82rem;
  text-decoration: none;
}

.sidebar-manage-billing:hover {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
  color: var(--accent);
}

.sidebar-manage-billing[hidden] {
  display: none !important;
}

#btn-upgrade-pro.is-pro-active {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

.app-shell.sidebar-on-listen .sidebar-section--anchor-bottom {
  margin-top: 0;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  border-top: 1px solid var(--border);
  border-bottom: none;
}

.app-shell.sidebar-on-listen .sidebar-bottom-stack {
  margin-top: auto;
}

.app-shell.sidebar-on-listen .sidebar-system-info .sidebar-section-body:not([hidden]) {
  max-height: min(48vh, 22rem);
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.app-shell.sidebar-on-listen .sidebar-system-info .sidebar-section-body:not([hidden])::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.sidebar-section-toggle {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  width: 100%;
  margin: 0;
  padding: 0.55rem 0.65rem;
  border: none;
  background: rgba(0, 0, 0, 0.12);
  color: var(--text);
  font: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.sidebar-section-toggle:hover {
  background: rgba(79, 140, 255, 0.1);
}

.sidebar-section-chevron {
  flex-shrink: 0;
  width: 0.65rem;
  font-size: 0.7rem;
  color: var(--muted);
  transition: transform 0.15s ease;
}

.sidebar-section-chevron::before {
  content: "▸";
  display: block;
}

.sidebar-section-toggle.is-open .sidebar-section-chevron {
  transform: rotate(90deg);
}

.sidebar-section-body {
  padding: 0.5rem 0.65rem 0.65rem;
  overflow: visible;
}

.sidebar-section-body[hidden] {
  display: none !important;
}

.sidebar-info-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.sidebar-info-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.2rem 0.55rem;
  align-items: start;
  padding: 0.45rem 0.5rem 0.45rem 1.15rem;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.18);
  position: relative;
}

.sidebar-info-item::before {
  content: "";
  position: absolute;
  left: 0.45rem;
  top: 0.72rem;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0.85;
}

.sidebar-info-key {
  grid-column: 1 / -1;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1.3;
}

.sidebar-info-val {
  grid-column: 1 / -1;
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--text);
  overflow-wrap: anywhere;
  word-break: break-word;
}

.sidebar-info-item--title .sidebar-info-val {
  font-size: 0.9rem;
  font-weight: 600;
}

.sidebar-info-hint-banner {
  margin: 0 0 0.65rem;
  padding: 0.5rem 0.55rem 0.5rem 1.15rem;
  border-radius: 6px;
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--muted);
  background: rgba(79, 140, 255, 0.08);
  border: 1px solid rgba(79, 140, 255, 0.2);
  position: relative;
}

.sidebar-info-hint-banner::before {
  content: "";
  position: absolute;
  left: 0.45rem;
  top: 0.72rem;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--muted);
  opacity: 0.6;
}

.sidebar-info-hint-banner[hidden] {
  display: none !important;
}

.sidebar-info-item[hidden] {
  display: none !important;
}

.library-empty {
  padding: 0.5rem 0.25rem;
  list-style: none;
}

.library-doc-list {
  list-style: none;
  margin: 0 0 0.65rem;
  padding: 0;
  min-width: 0;
}

.sidebar-slider-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  width: 100%;
  font-size: 0.82rem;
}

.sidebar-slider-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  width: 100%;
}

.sidebar-slider-label-row {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  min-width: 0;
}

.sidebar-field-value {
  flex-shrink: 0;
  font-weight: 600;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.sidebar-slider-field input[type="range"] {
  width: 100%;
  box-sizing: border-box;
}

.sidebar-slider-field--full {
  width: 100%;
}

.sidebar-slider-head--stacked {
  flex-direction: column;
  align-items: stretch;
  gap: 0.2rem;
}

.sidebar-field-value--subline {
  align-self: flex-start;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--muted);
}

.sidebar-label-with-help {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.sidebar-toggle-with-help {
  display: flex;
  align-items: flex-start;
  gap: 0.35rem;
  margin: 0.35rem 0;
}

.sidebar-toggle-with-help .listen-highlight-toggle {
  flex: 1;
  min-width: 0;
  margin: 0;
}

.sidebar-toggle-with-help .field-help-wrap {
  flex-shrink: 0;
  margin-top: 0.12rem;
}

.listen-document-images-label {
  position: relative;
}

.listen-document-images-label.is-disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.sidebar-playback-settings .listen-toggle-text-with-help {
  display: inline-flex;
  align-items: flex-start;
  gap: 0.35rem;
  flex: 1;
  min-width: 0;
  line-height: 1.35;
}

.sidebar-playback-settings .listen-highlight-toggle .listen-toggle-text-with-help .field-help-wrap {
  flex-shrink: 0;
  margin-top: 0.12rem;
}

.listen-document-images-disabled-tooltip {
  position: absolute;
  left: 0;
  top: calc(100% + 6px);
  z-index: 10050;
  width: max-content;
  max-width: min(16rem, 100%);
  padding: 0.55rem 0.65rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--panel);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  font-size: 0.75rem;
  line-height: 1.45;
  color: var(--text);
  font-weight: 400;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.15s ease, visibility 0.15s ease;
}

.listen-document-images-label.is-disabled:hover .listen-document-images-disabled-tooltip {
  opacity: 1;
  visibility: visible;
}

.field-help-tooltip-body a,
.field-help-link {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.field-help-link {
  display: inline;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  font: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  border-radius: 0;
}

.field-help-link:hover,
.field-help-link:focus-visible {
  color: var(--text);
}

.app-modal-story-direction-tags .app-modal-panel-scroll {
  width: min(44rem, 100%);
  max-height: min(88vh, 54rem);
  display: flex;
  flex-direction: column;
  padding-bottom: 1rem;
}

.story-tag-ref-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.35rem;
}

.story-tag-ref-header .app-modal-title {
  margin: 0;
}

.story-tag-ref-lead {
  margin: 0 0 0.85rem;
}

.story-tag-ref-body {
  overflow: auto;
  padding-right: 0.15rem;
}

.story-tag-ref-section + .story-tag-ref-section {
  margin-top: 1.15rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}

.story-tag-ref-section-title {
  margin: 0 0 0.25rem;
  font-size: 0.95rem;
}

.story-tag-ref-section-lead {
  margin: 0 0 0.55rem;
}

.story-tag-ref-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.story-tag-chip {
  display: inline-flex;
  align-items: center;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.78rem;
  padding: 0.22rem 0.5rem;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  cursor: default;
  white-space: nowrap;
}

.story-tag-chip:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.story-tag-chip-float-tooltip {
  position: fixed;
  z-index: 10150;
  min-width: 8rem;
  max-width: min(18rem, calc(100vw - 1.25rem));
  padding: 0.45rem 0.55rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--panel);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.5);
  font-family: var(--font, system-ui, sans-serif);
  font-size: 0.72rem;
  line-height: 1.45;
  color: var(--muted);
  pointer-events: none;
}

.field-help-tooltip-body code {
  font-size: 0.92em;
}

.listen-environment-cinema-subgroup .listen-environment-background-sound-row,
.listen-environment-cinema-subgroup .listen-environment-background-animations-row {
  margin: 0 0 0.35rem;
}

.listen-environment-cinema-subgroup .listen-environment-background-volume-row {
  margin: 0 0 0.5rem;
}

.listen-environment-cinema-subgroup .listen-environment-background-volume-row.is-disabled {
  opacity: 0.5;
  pointer-events: none;
}

.listen-environment-cinema-subgroup .listen-environment-background-animations-row {
  margin-bottom: 0;
}

.listen-environment-cinema-subgroup .listen-environment-row {
  margin: 0 0 0.5rem;
}

.listen-display-format-field .listen-reader-layout-options--single-row {
  flex-wrap: nowrap;
}

.field-help-wrap {
  position: relative;
  display: inline-flex;
  vertical-align: middle;
}

.field-help-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.05rem;
  height: 1.05rem;
  padding: 0;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.06);
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1;
  cursor: help;
}

.field-help-trigger:hover,
.field-help-trigger:focus-visible {
  color: var(--text);
  border-color: rgba(79, 140, 255, 0.45);
  background: rgba(79, 140, 255, 0.12);
}

.field-help-trigger:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.field-help-tooltip {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 10050;
  width: max-content;
  max-width: min(18rem, calc(100vw - 1.25rem));
  padding: 0.55rem 0.65rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--panel);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  font-size: 0.75rem;
  line-height: 1.45;
  color: var(--text);
  font-weight: 400;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.15s ease, visibility 0.15s ease;
}

/* Invisible bridge so the pointer can reach the tooltip from the ? trigger. */
.field-help-tooltip::before {
  content: "";
  position: absolute;
  left: -6px;
  right: -6px;
  top: -14px;
  height: 14px;
}

.field-help-wrap:hover .field-help-tooltip,
.field-help-wrap:focus-within .field-help-tooltip,
.field-help-wrap.is-pinned .field-help-tooltip,
.field-help-wrap:has(.field-help-tooltip:hover) .field-help-tooltip,
.field-help-tooltip:hover {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.field-help-tooltip-body {
  display: block;
}

.field-help-tooltip-note {
  display: block;
  margin-top: 0.35rem;
  color: var(--muted);
}

.field-help-tooltip-note[hidden] {
  display: none;
}

.sidebar-playback-settings .listen-highlight-speed-label {
  flex-wrap: nowrap;
  white-space: nowrap;
}

.sidebar-playback-settings .listen-highlight-speed-field .sidebar-field-value--subline {
  margin: 0;
}

.listen-highlight-settings .listen-highlight-master-toggle {
  margin-bottom: 0.35rem;
}

.sidebar-playback-settings .listen-ambience-test-hint {
  font-size: 0.75rem;
  margin: 0.35rem 0 0;
}

.sidebar-playback-settings .listen-ambience-controls .secondary {
  width: 100%;
  margin-top: 0.35rem;
}

.pronunciation-edit-panel {
  width: min(26rem, 100%);
}

.pronunciation-edit-word {
  margin: 0 0 0.85rem;
}

.pronunciation-edit-word-label {
  display: block;
  margin-bottom: 0.2rem;
}

.pronunciation-selected-word {
  display: block;
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--text);
  word-break: break-word;
}

.pronunciation-edit-actions {
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.45rem;
}

.pronunciation-edit-actions #btn-pronunciation-manage {
  margin-right: auto;
}

.listen-bookmarks-list {
  list-style: none;
  margin: 0.75rem 0 0;
  padding: 0;
  max-height: min(52vh, 24rem);
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
}

.listen-bookmark-item {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.65rem 0.85rem;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
}

.listen-bookmark-item:last-child {
  border-bottom: none;
}

.listen-bookmark-item-btn {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.15rem 0.35rem;
  border: none;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  border-radius: 4px;
}

.listen-bookmark-item-btn:hover,
.listen-bookmark-item-btn:focus-visible {
  outline: none;
  background: color-mix(in srgb, var(--accent, #4f8cff) 12%, transparent);
}

.listen-bookmark-chapter {
  font-weight: 600;
  font-size: 0.92rem;
}

.listen-bookmark-meta {
  font-size: 0.78rem;
  opacity: 0.85;
}

.listen-bookmark-excerpt {
  margin: 0.15rem 0 0;
  font-size: 0.82rem;
  line-height: 1.4;
  opacity: 0.78;
  font-style: italic;
}

.listen-bookmark-remove {
  flex: 0 0 auto;
  margin-top: 0.1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  border: 1px solid color-mix(in srgb, #ef4444 55%, var(--border));
  border-radius: 6px;
  background: color-mix(in srgb, #ef4444 12%, transparent);
  color: #ef4444;
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease;
}

.listen-bookmark-remove span {
  display: block;
  font-size: 1.15rem;
  line-height: 1;
}

.listen-bookmark-remove:hover,
.listen-bookmark-remove:focus-visible {
  background: color-mix(in srgb, #ef4444 22%, transparent);
  border-color: #ef4444;
  color: #f87171;
  outline: none;
}

.listen-bookmarks-panel .app-modal-actions {
  margin-top: 1.35rem;
  padding-top: 0.25rem;
}

.listen-bookmarks-empty {
  margin-top: 0.75rem;
}

.app-find {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 11050;
  max-width: min(26rem, calc(100vw - 2rem));
}

.app-find[hidden] {
  display: none !important;
}

.app-find-panel {
  position: relative;
  padding: 1rem 1.1rem 0.95rem;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.5);
}

.app-find-close {
  position: absolute;
  top: 0.45rem;
  right: 0.45rem;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
}

.app-find-close:hover,
.app-find-close:focus-visible {
  color: var(--text);
  border-color: var(--border);
  background: color-mix(in srgb, var(--text) 6%, transparent);
  outline: none;
}

.app-find-title {
  margin: 0 2rem 0.65rem 0;
  font-size: 1rem;
  font-weight: 600;
}

.app-find-field input {
  width: 100%;
  margin-top: 0.25rem;
}

.app-find-status {
  margin: 0.5rem 0 0.65rem;
  min-height: 1.2rem;
  font-size: 0.85rem;
}

.app-find-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.app-find-actions button {
  flex: 1 1 auto;
  min-width: 7rem;
}

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

.listen-find-mark {
  background: color-mix(in srgb, #fbbf24 55%, transparent);
  border-radius: 2px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

[data-theme="light"] .listen-find-mark {
  background: color-mix(in srgb, #f59e0b 40%, #fff7ed);
}

.app-source-viewer .source-viewer-panel {
  width: min(52rem, 100%);
  max-height: min(85vh, 52rem);
  display: flex;
  flex-direction: column;
}

.source-viewer-close {
  position: absolute;
  top: 0.65rem;
  right: 0.65rem;
  width: 2.1rem;
  height: 2.1rem;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: color-mix(in srgb, var(--text) 4%, transparent);
  color: var(--muted);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  z-index: 1;
}

.source-viewer-close:hover,
.source-viewer-close:focus-visible {
  color: var(--text);
  outline: none;
}

.source-viewer-scroll {
  flex: 1 1 auto;
  min-height: 12rem;
  max-height: min(58vh, 36rem);
  overflow: auto;
  margin: 0.5rem 0 0.75rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: color-mix(in srgb, var(--bg) 88%, var(--panel));
  font-family: var(--font-serif, Georgia, "Times New Roman", serif);
  font-size: 0.98rem;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
}

.source-viewer-block {
  margin: 0 0 0.85rem;
  padding: 0.35rem 0.5rem;
  border-radius: 6px;
  border-left: 3px solid transparent;
}

.source-viewer-block.is-current {
  border-left-color: var(--accent, #4f8cff);
  background: color-mix(in srgb, var(--accent, #4f8cff) 14%, transparent);
}

.source-viewer-block.is-heading {
  font-weight: 600;
  margin-top: 1.1rem;
}

.source-viewer-block-meta {
  display: block;
  font-size: 0.72rem;
  color: var(--muted);
  margin-bottom: 0.2rem;
  font-family: var(--font-sans, system-ui, sans-serif);
}

.app-go-to-page-panel {
  max-width: 22rem;
}

.app-go-to-page-panel .app-modal-message {
  margin-bottom: 0.35rem;
}

.app-go-to-page-error {
  margin: 0.55rem 0 0;
  color: #f87171;
}

.app-go-to-page-error[hidden] {
  display: none;
}

[data-theme="light"] .app-go-to-page-error {
  color: #b91c1c;
}

.listen-context-menu {
  position: fixed;
  z-index: 12000;
  min-width: 12rem;
  margin: 0;
  padding: 0.3rem 0;
  list-style: none;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
  color: var(--text);
}

[data-theme="light"] .listen-context-menu {
  box-shadow: 0 10px 28px rgba(26, 26, 46, 0.14);
}

.listen-context-menu-item {
  display: block;
  width: 100%;
  padding: 0.55rem 0.9rem;
  border: none;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 0.92rem;
  text-align: left;
  cursor: pointer;
}

.listen-context-menu-item:hover,
.listen-context-menu-item:focus-visible {
  background: color-mix(in srgb, var(--accent, #4f8cff) 18%, transparent);
  outline: none;
}

[data-theme="light"] .listen-context-menu-item:hover,
[data-theme="light"] .listen-context-menu-item:focus-visible {
  background: color-mix(in srgb, var(--accent) 14%, var(--panel));
}

.listen-context-menu-item:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.listen-context-menu-item:disabled:hover,
.listen-context-menu-item:disabled:focus-visible {
  background: transparent;
}

.listen-assign-voice-panel .listen-assign-voice-field {
  margin: 0.75rem 0 1rem;
}

.listen-assign-voice-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.35rem;
}

.listen-assign-voice-row #listen-assign-voice-select {
  flex: 1;
  min-width: 0;
  width: auto;
  margin-top: 0;
}

.listen-assign-voice-preview.cast-icon-btn {
  flex-shrink: 0;
}

@keyframes pronunciation-read-as-pulse {
  0%,
  100% {
    border-color: var(--border);
  }
  25%,
  75% {
    border-color: color-mix(in srgb, var(--accent, #4f8cff) 70%, var(--border));
  }
  50% {
    border-color: var(--accent, #4f8cff);
  }
}

#pronunciation-spoken-input.pronunciation-read-as-pulse {
  animation: pronunciation-read-as-pulse 2s ease-in-out;
}

@media (prefers-reduced-motion: reduce) {
  #pronunciation-spoken-input.pronunciation-read-as-pulse {
    animation: none;
    border-color: var(--accent, #4f8cff);
  }
}

#listen-text .listen-word {
  cursor: context-menu;
  border-radius: 3px;
}

#listen-text .listen-word:hover {
  background: rgba(79, 140, 255, 0.15);
}

.app-modal-wide .app-modal-panel {
  width: min(34rem, 100%);
}

.pronunciation-dict-list {
  list-style: none;
  margin: 0 0 0.85rem;
  padding: 0;
  max-height: min(40vh, 16rem);
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
}

.pronunciation-dict-item {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto;
  gap: 0.35rem 0.5rem;
  align-items: center;
  padding: 0.45rem 0.55rem;
  border-bottom: 1px solid var(--border);
}

.pronunciation-dict-item:last-child {
  border-bottom: none;
}

.pronunciation-dict-match {
  font-weight: 600;
}

.pronunciation-dict-spoken {
  color: var(--accent);
}

.pronunciation-dict-add {
  display: grid;
  gap: 0.45rem;
  margin-bottom: 0.75rem;
}

.pronunciation-dict-empty {
  margin: 0 0 0.75rem;
}

.pronunciation-scope-fieldset {
  border: none;
  margin: 0 0 0.75rem;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
}

.pronunciation-scope-fieldset legend {
  width: 100%;
  margin-bottom: 0.25rem;
}

.pronunciation-scope-option {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.92rem;
}

.voice-rankings-list {
  list-style: none;
  margin: 0.75rem 0 1rem;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  max-height: 420px;
  overflow: auto;
}

.voice-rankings-item {
  display: grid;
  grid-template-columns: 5.5rem 1fr auto;
  gap: 0.65rem;
  align-items: center;
  padding: 0.55rem 0.75rem;
  border-bottom: 1px solid var(--border);
}

.voice-rankings-item:last-child {
  border-bottom: none;
}

.voice-rankings-rank-field {
  display: grid;
  gap: 0.15rem;
}

.voice-rankings-rank-input {
  width: 100%;
  min-width: 0;
  padding: 0.35rem 0.45rem;
}

.voice-rankings-label {
  min-width: 0;
  font-size: 0.92rem;
}

.pronunciation-dict-remove {
  font-size: 1rem;
  line-height: 1;
}

.library-doc-item {
  margin-bottom: 0.5rem;
  padding: 0.5rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  min-width: 0;
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

@media (hover: hover) and (pointer: fine) {
  .library-doc-item:hover:not(.active) {
    border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
    background: color-mix(in srgb, var(--accent) 6%, var(--bg));
  }

  .library-doc-item:hover:not(.active) .library-doc-title {
    border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
  }
}

.library-doc-item:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.library-doc-item.active {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, var(--bg));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 35%, transparent);
}

.library-doc-item.is-slot-locked {
  border-left: 3px solid color-mix(in srgb, var(--warning, #d4a017) 65%, transparent);
}

.library-doc-item.is-slot-grace {
  border-left: 3px solid color-mix(in srgb, var(--accent) 50%, transparent);
}

.library-doc-item.is-slot-locked.active {
  border-left-color: color-mix(in srgb, var(--warning, #d4a017) 75%, transparent);
}

.library-doc-item.is-collapsed {
  margin-bottom: 0.25rem;
  padding: 0.3rem 0.35rem;
}

.library-doc-item.is-collapsed .library-doc-title-row {
  align-items: center;
}

.library-doc-item.is-collapsed .library-doc-title {
  padding: 0.15rem 0.25rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  overflow-wrap: normal;
  word-break: normal;
  border: none;
  background: transparent;
  font-size: 0.86rem;
  line-height: 1.3;
  cursor: pointer;
}

.library-doc-item.is-collapsed.active .library-doc-title {
  border: none;
  background: transparent;
}

.library-doc-item.is-collapsed .slot-status-chip {
  display: none;
}

.library-doc-item.is-collapsed .purchases-update-pill {
  display: none;
}

.library-doc-item:not(.is-collapsed) .purchases-update-dot {
  display: none;
}

.purchases-update-dot {
  flex-shrink: 0;
  width: 0.55rem;
  height: 0.55rem;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: #6eb0ff;
  box-shadow: 0 0 0 2px rgba(110, 176, 255, 0.25);
  cursor: pointer;
  line-height: 0;
}

.purchases-update-dot:hover {
  background: #8ec4ff;
  box-shadow: 0 0 0 2px rgba(142, 196, 255, 0.4);
}

.purchases-update-dot:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.purchases-bundle-update-badge,
.sidebar-section-update-badge {
  flex-shrink: 0;
  margin-left: auto;
  padding: 0.06rem 0.42rem;
  border-radius: 999px;
  border: 1px solid rgba(100, 170, 255, 0.45);
  background: rgba(70, 140, 255, 0.18);
  color: #8ec0ff;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 1.3;
}

.purchases-bundle-group:not(.is-collapsed) .purchases-bundle-update-badge {
  display: none;
}

.sidebar-section-toggle.is-open .sidebar-section-update-badge {
  display: none;
}

.library-doc-details[hidden] {
  display: none !important;
}

.library-doc-expand-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.15rem;
  height: 1.35rem;
  padding: 0;
  margin-right: -0.05rem;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.library-doc-expand-btn:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
}

.library-doc-expand-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.library-doc-chevron {
  display: block;
  width: 0.65rem;
  font-size: 0.7rem;
  transition: transform 0.15s ease;
}

.library-doc-chevron::before {
  content: "▸";
  display: block;
}

.library-doc-item.is-expanded .library-doc-chevron {
  transform: rotate(90deg);
}

.library-doc-meta {
  margin: 0.25rem 0 0.4rem;
  font-size: 0.75rem;
  color: var(--muted);
}

.library-doc-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem;
}

.library-doc-actions-primary {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-left: auto;
}

.library-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.04);
  color: var(--muted);
  cursor: pointer;
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease,
    transform 0.12s ease;
}

.library-icon-btn svg {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.library-icon-btn:hover:not(:disabled) {
  background: rgba(79, 140, 255, 0.12);
  border-color: rgba(79, 140, 255, 0.45);
  color: var(--text);
}

.library-icon-btn:active:not(:disabled) {
  transform: scale(0.94);
}

.library-icon-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.library-icon-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.library-play-btn {
  --library-play-accent: color-mix(in srgb, var(--success, #3dd68c) 58%, var(--muted));
  border-color: color-mix(in srgb, var(--library-play-accent) 38%, var(--border));
  color: color-mix(in srgb, var(--library-play-accent) 72%, var(--muted));
  background: color-mix(in srgb, var(--library-play-accent) 7%, transparent);
}

.library-play-btn svg {
  fill: currentColor;
  stroke: none;
}

.library-offline-remove-btn {
  opacity: 0.82;
}

.library-offline-remove-btn:hover:not(:disabled) {
  opacity: 1;
  color: #f07070;
}

.library-doc-title-row .library-offline-remove-btn {
  margin-left: 0.15rem;
}

.library-play-btn:hover:not(:disabled) {
  background: color-mix(in srgb, var(--library-play-accent) 13%, transparent);
  border-color: color-mix(in srgb, var(--library-play-accent) 48%, var(--border));
  color: color-mix(in srgb, var(--library-play-accent) 88%, var(--muted));
}

[data-theme="light"] .library-play-btn {
  --library-play-accent: color-mix(in srgb, #2aab6e 52%, var(--muted));
  border-color: color-mix(in srgb, var(--library-play-accent) 32%, var(--border));
  color: color-mix(in srgb, var(--library-play-accent) 68%, var(--muted));
  background: color-mix(in srgb, var(--library-play-accent) 6%, transparent);
}

[data-theme="light"] .library-play-btn:hover:not(:disabled) {
  background: color-mix(in srgb, var(--library-play-accent) 11%, transparent);
  border-color: color-mix(in srgb, var(--library-play-accent) 42%, var(--border));
  color: color-mix(in srgb, var(--library-play-accent) 82%, var(--muted));
}

.library-reprocess-btn svg {
  fill: none;
  stroke: currentColor;
}

.library-reprocess-btn:hover:not(:disabled) {
  color: var(--accent);
  border-color: rgba(79, 140, 255, 0.35);
  background: rgba(79, 140, 255, 0.1);
}

.library-delete-btn:hover:not(:disabled) {
  color: var(--error, #ff6b6b);
  border-color: rgba(255, 107, 107, 0.35);
  background: rgba(255, 107, 107, 0.1);
}

.library-doc-title-row {
  display: flex;
  align-items: flex-start;
  gap: 0.25rem;
  min-width: 0;
}

.library-doc-item--has-cover {
  overflow: visible;
}

.library-doc-item--has-cover .library-doc-title-row {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 0.2rem;
  row-gap: 0.04rem;
}

.library-doc-item--has-cover .library-doc-cover-wrap,
.library-doc-item--has-cover .enhanced-story-cover-wrap--sidebar {
  grid-column: 1;
  grid-row: 1 / span 2;
  align-self: center;
}

.library-doc-item--has-cover .library-doc-title-row > .library-doc-expand-btn {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
}

.library-doc-item--has-cover .library-doc-title-row > .library-doc-title {
  grid-column: 3;
  grid-row: 1 / span 2;
  align-self: center;
}

.library-doc-item--has-cover .library-doc-title-row > .slot-status-chip {
  grid-column: 3;
  grid-row: 2;
  justify-self: start;
}

.library-doc-item--has-cover .library-doc-title-row > .library-play-btn {
  grid-column: 4;
  grid-row: 1 / span 2;
  align-self: center;
  margin-left: 0;
}

.library-doc-cover-wrap {
  flex-shrink: 0;
  align-self: center;
}

.library-doc-cover {
  display: block;
  width: 2.35rem;
  height: 3.35rem;
  object-fit: cover;
  border-radius: 4px;
  border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.12));
  background: var(--surface-2, rgba(255, 255, 255, 0.04));
}

.book-details-panel {
  margin-top: 0.5rem;
  padding-top: 0.35rem;
}

.book-details-header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.75rem;
  margin-bottom: 0.55rem;
}

.book-details-title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
}

.book-details-lead {
  margin: 0;
  font-size: 0.8rem;
}

.book-details-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.85rem 1rem;
  align-items: start;
  width: 100%;
  box-sizing: border-box;
  padding: 0 20px;
}

.book-details-cover-drop {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 96px;
  height: 132px;
  margin: 0;
  padding: 0;
  justify-self: start;
  border-radius: 6px;
  border: 2px dashed var(--border);
  background: color-mix(in srgb, var(--panel) 88%, var(--bg));
  overflow: visible;
  cursor: copy;
  text-align: center;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.book-details-cover-drop.has-cover {
  border-style: solid;
  border-width: 1px;
  cursor: copy;
}

.book-details-cover-drop.is-dragover {
  border-color: var(--accent, #6ea8fe);
  background: rgba(110, 168, 254, 0.08);
}

.book-details-cover-preview {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 4px;
  pointer-events: none;
}

.book-details-cover-placeholder {
  padding: 0.45rem;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: 0.02em;
  text-transform: lowercase;
  color: var(--muted, rgba(255, 255, 255, 0.55));
  user-select: none;
}

.book-details-cover-remove {
  position: absolute;
  top: -7px;
  right: -7px;
  z-index: 2;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 50%;
  background: #c62828;
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.book-details-cover-remove:hover {
  background: #e53935;
}

.book-details-cover-remove:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.book-details-fields {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  justify-self: start;
  width: min(18rem, 100%);
  max-width: 100%;
}

.book-details-field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  width: 100%;
}

.book-details-field .form-input {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.book-details-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--muted, rgba(255, 255, 255, 0.65));
  letter-spacing: 0.02em;
}

.book-details-hint {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.35;
}

.book-details-panel--readonly .book-details-cover-drop {
  pointer-events: none;
  cursor: default;
}

.book-details-panel--readonly .book-details-cover-placeholder {
  display: none;
}

.book-details-panel--readonly #book-details-author {
  opacity: 0.92;
}

.book-details-panel--readonly .book-details-cover-remove {
  display: none;
}

.curated-story-badge {
  margin: 0 0 0.5rem;
  color: var(--accent, #6ea8fe);
}

.curated-playback-lock-note {
  margin: 0 0 0.65rem;
  padding: 0.45rem 0.55rem;
  border-radius: 6px;
  background: rgba(110, 168, 254, 0.08);
  border: 1px solid rgba(110, 168, 254, 0.18);
}

.is-curated-story .source-type-fieldset,
.is-curated-story .file-drop,
.is-curated-story .listening-mode-fieldset,
.is-curated-story #chapter-images-collapsible,
.is-curated-locked {
  opacity: 0.72;
}

.is-curated-story .source-type-fieldset,
.is-curated-story .file-drop,
.is-curated-story .listening-mode-fieldset,
.is-curated-story .listening-mode-fieldset .mode-card,
.is-curated-story #chapter-images-collapsible,
.is-curated-story #chapter-images-collapsible summary,
.is-curated-locked,
.is-curated-locked .mode-card,
.is-curated-locked summary {
  pointer-events: none;
}

.is-curated-story .source-type-fieldset input,
.is-curated-story .source-type-fieldset button,
.is-curated-story .file-drop input,
.is-curated-story .listening-mode-fieldset input,
.is-curated-locked input,
.is-curated-locked select,
.is-curated-locked button {
  pointer-events: none;
}

.is-curated-story .library-doc-title {
  cursor: default;
}

@media (max-width: 640px) {
  .book-details-grid {
    grid-template-columns: 1fr;
    padding: 0 16px;
  }

  .book-details-fields {
    justify-self: start;
    width: min(18rem, 100%);
  }
}

.library-doc-title-row .library-play-btn {
  flex-shrink: 0;
  margin-left: auto;
}

.library-doc-item.is-collapsed .library-doc-title-row .library-play-btn {
  width: 1.75rem;
  height: 1.75rem;
}

.library-doc-item.is-collapsed .library-doc-title-row .library-play-btn svg {
  width: 0.9rem;
  height: 0.9rem;
}

.library-doc-title {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
  text-align: left;
  padding: 0.45rem 0.65rem;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 6px;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  line-height: 1.35;
  font-weight: 600;
  cursor: text;
}

.library-doc-title.is-editing {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  background: var(--panel);
}

.library-doc-item.active .library-doc-title {
  border-color: var(--accent);
  background: rgba(79, 140, 255, 0.08);
}

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

.source-type-fieldset,
.listening-mode-fieldset {
  border: none;
  margin: 0;
  padding: 0;
}

.wizard-step-section {
  margin: 0 0 1.35rem;
  padding: 1rem 1.1rem 1.15rem;
  border: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--panel) 88%, var(--bg));
}

[data-theme="light"] .wizard-step-section {
  background: color-mix(in srgb, var(--panel) 100%, var(--bg));
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.wizard-step-section > .source-type-fieldset,
.wizard-step-section > .listening-mode-fieldset {
  margin: 0;
  padding: 0;
}

.wizard-step-section .source-panel {
  margin-top: 0.85rem;
  margin-bottom: 0;
  padding-bottom: 0.15rem;
}

.wizard-step-section .source-type-fieldset + .source-panel {
  margin-top: 0.85rem;
}

.wizard-step-section .step1-clipboard-row {
  margin: 0.85rem 0 0;
}

.wizard-step-section legend {
  font-weight: 600;
  font-size: 0.98rem;
  margin-bottom: 0.75rem;
  padding: 0;
  width: 100%;
  color: var(--text);
}

#step-6 .cast-layout {
  margin-top: 0.5rem;
}

.source-type-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 0.5rem;
}

/* ── Source radio tuner ───────────────────────────────────────────── */
.source-tuner {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.source-tuner-hint {
  margin: 0;
  font-size: 0.82rem;
  color: var(--muted);
}

.source-tuner-hint kbd {
  display: inline-block;
  padding: 0.05rem 0.35rem;
  border: 1px solid var(--border);
  border-radius: 4px;
  font: inherit;
  font-size: 0.78rem;
  background: color-mix(in srgb, var(--panel) 80%, transparent);
}

.source-tuner-shell {
  position: relative;
  padding: 1.1rem 0.85rem 1.35rem;
  border-radius: var(--radius);
  background:
    radial-gradient(ellipse 120% 80% at 50% 100%, rgba(0, 229, 255, 0.06), transparent 55%),
    #040608;
  border: 1px solid #0d1824;
  box-shadow:
    inset 0 1px 0 rgba(0, 229, 255, 0.08),
    0 8px 28px rgba(0, 0, 0, 0.45);
  overflow: hidden;
}

.source-tuner-dial {
  position: relative;
  min-height: 5.5rem;
  touch-action: none;
  cursor: grab;
  user-select: none;
  outline: none;
}

.source-tuner-dial:focus,
.source-tuner-dial:focus-visible {
  outline: none;
  box-shadow: none;
}

.source-tuner-dial.is-dragging {
  cursor: grabbing;
}

.source-tuner-rail {
  position: absolute;
  left: 4%;
  right: 4%;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    #00d4e8 8%,
    #00e8ff 50%,
    #00d4e8 92%,
    transparent 100%
  );
  box-shadow: 0 0 10px rgba(0, 232, 255, 0.55);
  pointer-events: none;
}

.source-tuner-rail-top {
  top: 2.15rem;
}

.source-tuner-rail-bottom {
  top: 3.05rem;
}

.source-tuner-stops {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 0 0.35rem;
  min-height: 4.75rem;
}

.source-tuner-stop {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  min-width: 0;
  padding: 0 0.15rem;
  border: none;
  background: transparent;
  color: #5ce9ff;
  font: inherit;
  cursor: pointer;
  text-align: center;
  transition: color 0.2s ease, opacity 0.2s ease, text-shadow 0.2s ease;
}

.source-tuner-stop-tick {
  display: block;
  width: 2px;
  height: 0.55rem;
  margin-top: 0.15rem;
  background: rgba(0, 232, 255, 0.45);
  box-shadow: 0 0 4px rgba(0, 232, 255, 0.35);
}

.source-tuner-stop-label {
  display: block;
  font-size: clamp(0.62rem, 1.6vw, 0.78rem);
  font-weight: 600;
  letter-spacing: 0.03em;
  line-height: 1.15;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.source-tuner-stop.is-tuned {
  color: #9ff6ff;
  text-shadow: 0 0 12px rgba(0, 232, 255, 0.75);
}

.source-tuner-stop.is-tuned .source-tuner-stop-tick {
  height: 0.85rem;
  background: #00e8ff;
  box-shadow: 0 0 8px rgba(0, 232, 255, 0.8);
}

.source-tuner-stop.is-committed {
  color: #7de8f7;
  text-shadow: 0 0 6px rgba(0, 232, 255, 0.35);
}

.source-tuner-stop.is-disabled {
  opacity: 0.42;
  cursor: pointer;
  color: #3f8a98;
  text-shadow: none;
}

.source-tuner-stop.is-disabled.is-tuned {
  opacity: 0.72;
  color: #7de8f7;
  text-shadow: 0 0 10px rgba(0, 232, 255, 0.45);
}

.source-tuner-stop.is-disabled .source-tuner-stop-tick {
  background: rgba(42, 106, 120, 0.35);
  box-shadow: none;
}

.source-tuner-stop.is-disabled.is-tuned .source-tuner-stop-tick {
  background: #00e8ff;
  box-shadow: 0 0 8px rgba(0, 232, 255, 0.55);
}

.source-tuner-stop:focus,
.source-tuner-stop:focus-visible {
  outline: none;
}

.source-tuner-needle {
  position: absolute;
  top: 1.35rem;
  left: 0;
  z-index: 2;
  width: 10px;
  height: 2.35rem;
  margin-left: -5px;
  border-radius: 3px;
  background: linear-gradient(
    180deg,
    #ffb347 0%,
    #ff7b00 35%,
    #ff6a00 65%,
    #ffb347 100%
  );
  box-shadow:
    0 0 16px rgba(255, 140, 0, 0.85),
    0 0 4px rgba(255, 200, 120, 0.9);
  transform: translateX(0);
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
  cursor: grab;
}

.source-tuner-needle.is-dragging,
.source-tuner-dial.is-dragging .source-tuner-needle {
  transition: none;
  cursor: grabbing;
}

.source-tuner-needle:focus,
.source-tuner-needle:focus-visible {
  outline: none;
}

.source-tuner-needle-glow {
  position: absolute;
  inset: -4px -6px;
  border-radius: 6px;
  background: radial-gradient(ellipse at center, rgba(255, 140, 0, 0.35), transparent 70%);
  pointer-events: none;
}

.source-tuner-needle.is-snapped .source-tuner-needle-glow {
  animation: source-tuner-needle-pulse 0.45s ease;
}

@keyframes source-tuner-needle-pulse {
  0% {
    opacity: 0.4;
    transform: scaleY(0.92);
  }
  40% {
    opacity: 1;
    transform: scaleY(1.08);
  }
  100% {
    opacity: 0.55;
    transform: scaleY(1);
  }
}

.source-tuner-readout {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.65rem;
  min-height: 2.75rem;
  padding: 0.65rem 0.85rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--panel) 88%, transparent);
}

.source-tuner-readout-title {
  font-size: 1rem;
  letter-spacing: 0.01em;
}

.source-tuner-readout-desc {
  flex: 1 1 100%;
  font-size: 0.88rem;
  color: var(--muted);
  line-height: 1.4;
}

.source-tuner-readout.is-fading .source-tuner-readout-desc,
.source-tuner-readout.is-fading .source-tuner-readout-title {
  opacity: 0;
  transition: opacity 0.18s ease;
}

.source-tuner-readout-badge {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.15rem 0.45rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--spotlight) 45%, var(--border));
  color: var(--spotlight);
  background: color-mix(in srgb, var(--spotlight) 12%, transparent);
}

.source-tuner-readout-badge.is-soon {
  color: var(--muted);
  border-color: var(--border);
  background: color-mix(in srgb, var(--muted) 10%, transparent);
}

/* Light mode: warm dial face on panel tokens; amber needle unchanged. */
[data-theme="light"] .source-tuner-shell {
  background:
    radial-gradient(
      ellipse 120% 80% at 50% 100%,
      color-mix(in srgb, var(--accent) 10%, transparent),
      transparent 55%
    ),
    color-mix(in srgb, var(--panel) 94%, var(--bg) 6%);
  border: 1px solid var(--border);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #fff 55%, var(--panel)),
    0 4px 16px rgba(26, 26, 46, 0.08);
}

[data-theme="light"] .source-tuner-rail {
  background: linear-gradient(
    90deg,
    transparent 0%,
    color-mix(in srgb, var(--accent) 65%, transparent) 8%,
    var(--accent) 50%,
    color-mix(in srgb, var(--accent) 65%, transparent) 92%,
    transparent 100%
  );
  box-shadow: 0 0 6px color-mix(in srgb, var(--accent) 32%, transparent);
}

[data-theme="light"] .source-tuner-stop {
  color: color-mix(in srgb, var(--accent) 62%, var(--muted));
}

[data-theme="light"] .source-tuner-stop-tick {
  background: color-mix(in srgb, var(--accent) 38%, transparent);
  box-shadow: none;
}

[data-theme="light"] .source-tuner-stop.is-tuned {
  color: var(--accent-hover);
  text-shadow: none;
}

[data-theme="light"] .source-tuner-stop.is-tuned .source-tuner-stop-tick {
  background: var(--accent);
  box-shadow: 0 0 4px color-mix(in srgb, var(--accent) 38%, transparent);
}

[data-theme="light"] .source-tuner-stop.is-committed {
  color: color-mix(in srgb, var(--accent) 78%, var(--text));
  text-shadow: none;
}

[data-theme="light"] .source-tuner-stop.is-disabled {
  color: color-mix(in srgb, var(--muted) 82%, var(--accent));
}

[data-theme="light"] .source-tuner-stop.is-disabled.is-tuned {
  color: color-mix(in srgb, var(--accent) 52%, var(--muted));
  text-shadow: none;
}

[data-theme="light"] .source-tuner-stop.is-disabled .source-tuner-stop-tick {
  background: color-mix(in srgb, var(--muted) 32%, transparent);
}

[data-theme="light"] .source-tuner-stop.is-disabled.is-tuned .source-tuner-stop-tick {
  background: color-mix(in srgb, var(--accent) 50%, var(--muted));
  box-shadow: none;
}

[data-theme="light"] .source-tuner-needle {
  box-shadow:
    0 0 10px color-mix(in srgb, var(--spotlight) 48%, transparent),
    0 0 3px color-mix(in srgb, var(--spotlight) 65%, transparent);
}

[data-theme="light"] .source-tuner-needle-glow {
  background: radial-gradient(
    ellipse at center,
    color-mix(in srgb, var(--spotlight) 28%, transparent),
    transparent 70%
  );
}

.source-type-fieldset.is-slot-locked .source-tuner-shell {
  opacity: 0.55;
  filter: grayscale(0.35);
}

.source-type-fieldset.is-slot-locked .source-tuner-dial,
.source-type-fieldset.is-slot-locked .source-tuner-stop,
.source-type-fieldset.is-slot-locked .source-tuner-needle {
  pointer-events: none;
  cursor: not-allowed;
}

.source-type-fieldset.is-slot-locked .source-tuner-hint {
  color: color-mix(in srgb, var(--muted) 80%, var(--text));
}

@media (max-width: 640px) {
  .source-tuner-shell {
    padding: 0.9rem 0.45rem 1.1rem;
  }

  .source-tuner-stop-label {
    font-size: 0.58rem;
    white-space: normal;
    line-height: 1.1;
    max-height: 2.4em;
    overflow: hidden;
  }

  .source-tuner-needle {
    width: 12px;
    margin-left: -6px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .source-tuner-needle {
    transition: none;
  }

  .source-tuner-needle.is-snapped .source-tuner-needle-glow {
    animation: none;
  }

  .source-tuner-readout.is-fading .source-tuner-readout-desc,
  .source-tuner-readout.is-fading .source-tuner-readout-title {
    transition: none;
  }
}

.source-panel {
  margin-bottom: 0;
}

.stacked-label {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.stacked-label input[type="url"]:not(.form-input),
.stacked-label textarea {
  width: 100%;
  padding: 0.5rem 0.65rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
}

.radio-card.disabled-card {
  opacity: 0.55;
  cursor: not-allowed;
}

#step-1-hint {
  margin: 0 0 0.75rem;
}

.panel-footer-step1 {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: flex-end;
  align-items: center;
}

.panel-footer-step1 .secondary {
  margin-right: auto;
}

.welcome-hero {
  margin: 0 0 var(--space-lg);
  padding: var(--space-md) 1.1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: linear-gradient(135deg, rgba(79, 140, 255, 0.12), rgba(240, 200, 120, 0.08));
}

.welcome-hero-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.welcome-hero-copy {
  margin: 0;
  flex: 1;
  min-width: 0;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.45;
}

.welcome-hero-label {
  color: var(--text);
  font-size: 1.05rem;
  font-weight: 600;
  margin-right: 0.35rem;
}

.welcome-hero-actions {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.5rem;
  flex-shrink: 0;
  margin-left: auto;
}

.library-hero {
  background: linear-gradient(135deg, rgba(240, 200, 120, 0.12), rgba(120, 200, 160, 0.08));
}

.app-modal-library .app-modal-panel {
  width: min(52rem, 96vw);
  max-height: min(90vh, 46rem);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.library-modal-header {
  flex-shrink: 0;
  margin-bottom: 0.65rem;
}

.library-modal-intro {
  margin: 0.35rem 0 0;
  line-height: 1.45;
}

.library-modal-toolbar {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  margin-bottom: 0;
  padding: 0 0 0.75rem;
  border-bottom: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.1));
  position: sticky;
  top: 0;
  z-index: 3;
  flex-shrink: 0;
  background: var(--panel, #1a1d24);
  box-shadow: 0 8px 16px color-mix(in srgb, var(--panel, #1a1d24) 88%, transparent);
}

.library-modal-search {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.45rem 0.75rem;
  border-radius: 10px;
  border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.14));
  background: var(--surface-raised, rgba(255, 255, 255, 0.04));
}

.library-modal-search:focus-within {
  border-color: color-mix(in srgb, var(--accent, #4f8cff) 55%, var(--border));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent, #4f8cff) 25%, transparent);
}

.library-modal-search-icon {
  display: inline-flex;
  color: var(--muted, #9aa0a6);
  flex-shrink: 0;
}

.library-modal-search input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  padding: 0.15rem 0;
}

.library-modal-search input:focus {
  outline: none;
}

.library-modal-search input::-webkit-search-cancel-button {
  cursor: pointer;
}

.library-modal-categories {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.library-modal-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.28rem 0.65rem;
  border-radius: 999px;
  border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.14));
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 0.78rem;
  line-height: 1.2;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.library-modal-chip:hover {
  border-color: color-mix(in srgb, var(--accent, #4f8cff) 35%, var(--border));
}

.library-modal-chip.is-active {
  border-color: color-mix(in srgb, var(--accent, #4f8cff) 65%, var(--border));
  background: color-mix(in srgb, var(--accent, #4f8cff) 16%, transparent);
  color: var(--text);
}

.library-modal-chip-owned.is-active {
  border-color: color-mix(in srgb, #7fd4a0 55%, var(--border));
  background: color-mix(in srgb, #7fd4a0 14%, transparent);
}

.library-modal-chip-bundles.is-active {
  border-color: color-mix(in srgb, #e8b84a 55%, var(--border));
  background: color-mix(in srgb, #e8b84a 14%, transparent);
}

.library-modal-chip-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.15rem;
  padding: 0 0.3rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--text, #e8eaed) 10%, transparent);
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--muted, #9aa0a6);
}

.library-modal-chip.is-active .library-modal-chip-count {
  color: var(--text);
}

.library-modal-toolbar-footer {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.library-modal-toolbar-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  flex-wrap: wrap;
}

.library-modal-sort {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.78rem;
  color: var(--muted, #9aa0a6);
}

.library-modal-sort-label {
  white-space: nowrap;
}

.library-modal-sort select {
  width: auto;
  min-width: 9.5rem;
  padding: 0.28rem 1.75rem 0.28rem 0.45rem;
  font-size: 0.78rem;
  line-height: 1.35;
  background-color: var(--bg);
  border-color: var(--border-subtle, rgba(255, 255, 255, 0.14));
}

[data-theme="dark"] .library-modal-sort select {
  color-scheme: dark;
}

[data-theme="light"] .library-modal-sort select {
  color-scheme: light;
}

.library-modal-sort select option {
  background-color: var(--panel);
  color: var(--text);
}

.library-modal-status {
  margin: 0;
  font-size: 0.78rem;
  flex: 1 1 12rem;
}

.library-modal-clear {
  flex-shrink: 0;
  font-size: 0.78rem;
}

.library-modal-shelf {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: visible;
  margin: 0.75rem 0;
  padding-right: 0.15rem;
  gap: 0.45rem;
}

.library-modal-collection {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 0.35rem 0 0.15rem;
  padding: 0.35rem 0.15rem 0;
  border-top: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.08));
}

.library-modal-collection:first-child {
  border-top: 0;
  margin-top: 0;
  padding-top: 0;
}

.library-modal-collection--featured-bundles {
  border-top: 0;
  margin-top: 0;
  padding-top: 0;
}

.library-modal-collection--featured-bundles .library-modal-collection-title {
  color: color-mix(in srgb, #e8b84a 85%, var(--text));
}

.library-modal-collection-title {
  margin: 0;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--text, #e8eaed) 82%, var(--muted, #9aa0a6));
}

.library-modal-collection-count {
  margin: 0;
  font-size: 0.72rem;
  white-space: nowrap;
}

.enhanced-story-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-top: 0.2rem;
}

.library-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.08rem 0.42rem;
  border-radius: 999px;
  border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.14));
  background: color-mix(in srgb, var(--text, #e8eaed) 6%, transparent);
  font-size: 0.68rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--text);
}

.library-badge-price {
  border-color: color-mix(in srgb, var(--accent, #4f8cff) 35%, var(--border));
  color: color-mix(in srgb, var(--accent, #4f8cff) 80%, var(--text));
}

.library-badge-runtime {
  color: var(--muted, #9aa0a6);
}

.library-badge-owned {
  border-color: color-mix(in srgb, #7fd4a0 45%, var(--border));
  color: #9be0b8;
}

.library-badge-bundle {
  border-color: color-mix(in srgb, #e8b84a 45%, var(--border));
  color: #f0d078;
}

.library-modal-shelf .enhanced-story-card--bundle.enhanced-story-card--compact {
  border-color: color-mix(in srgb, #e8b84a 28%, var(--border-subtle, rgba(255, 255, 255, 0.14)));
  background: color-mix(in srgb, #e8b84a 4%, transparent);
}

.library-modal-shelf .enhanced-story-card--compact.enhanced-story-card--keyboard-focus {
  border-color: color-mix(in srgb, var(--accent, #4f8cff) 70%, var(--border));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent, #4f8cff) 35%, transparent);
  outline: none;
}

.library-modal-hint {
  margin: 0 0 0.65rem;
  font-size: 0.72rem;
  text-align: center;
}

.library-modal-hint kbd {
  display: inline-block;
  min-width: 1.1rem;
  padding: 0.05rem 0.3rem;
  border-radius: 4px;
  border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.18));
  background: color-mix(in srgb, var(--text, #e8eaed) 8%, transparent);
  font: inherit;
  font-size: 0.68rem;
  line-height: 1.3;
}

.library-modal-shelf .enhanced-story-card--compact {
  grid-template-columns: 52px minmax(0, 1fr) auto;
  grid-template-rows: auto;
  align-items: center;
  padding: 0.5rem 0.7rem;
  gap: 0.45rem 0.7rem;
}

.library-modal-shelf .enhanced-story-card--compact .enhanced-story-cover-wrap {
  grid-row: 1;
  grid-column: 1;
}

.library-modal-shelf .enhanced-story-card--compact .enhanced-story-cover {
  width: 52px;
  height: 74px;
}

.library-modal-shelf .enhanced-story-card--compact .enhanced-story-card-body {
  grid-column: 2;
  grid-row: 1;
}

.library-modal-shelf .enhanced-story-card--compact .enhanced-story-card-title {
  font-size: 0.9rem;
  line-height: 1.25;
}

.library-modal-shelf .enhanced-story-card--compact .enhanced-story-card-meta {
  margin-top: 0.2rem;
  font-size: 0.72rem;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: var(--muted, #9aa0a6);
}

.library-modal-shelf .enhanced-story-card--compact .enhanced-story-actions {
  grid-column: 3;
  grid-row: 1;
  flex-direction: column;
  align-items: stretch;
  gap: 0.3rem;
  min-width: 5.5rem;
}

.library-modal-shelf .enhanced-story-card--compact .enhanced-story-actions button {
  padding: 0.35rem 0.55rem;
  font-size: 0.78rem;
}

.library-modal-empty {
  margin: 0 0 0.75rem;
  padding: 1rem;
  text-align: center;
  border-radius: 8px;
  border: 1px dashed var(--border-subtle, rgba(255, 255, 255, 0.14));
}

@media (max-width: 640px) {
  .library-modal-shelf .enhanced-story-card--compact {
    grid-template-columns: 48px minmax(0, 1fr);
    grid-template-rows: auto auto;
  }

  .library-modal-shelf .enhanced-story-card--compact .enhanced-story-cover {
    width: 48px;
    height: 68px;
  }

  .library-modal-shelf .enhanced-story-card--compact .enhanced-story-actions {
    grid-column: 1 / -1;
    grid-row: 2;
    flex-direction: row;
    min-width: 0;
  }

  .library-modal-shelf .enhanced-story-card--compact .enhanced-story-actions button {
    flex: 1 1 0;
  }
}

.listening-mode-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 0.75rem;
}

.listening-mode-grid .mode-card {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 1rem 1rem 0.85rem;
  border: 2px solid var(--border);
  border-radius: var(--radius);
  background: var(--panel);
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.listening-mode-grid .mode-card:has(input:checked) {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px rgba(79, 140, 255, 0.25);
}

.listening-mode-grid .mode-card input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.mode-card-icon {
  width: 2.25rem;
  height: 2.25rem;
  color: var(--accent);
}

.mode-card strong {
  font-size: 1rem;
}

.mode-card span {
  font-size: 0.85rem;
  color: var(--muted);
  line-height: 1.35;
}

.cast-avatar {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  flex-shrink: 0;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

.cast-item-main {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex: 1;
  min-width: 0;
}

.cast-detail-header {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-bottom: 0.5rem;
}

.cast-avatar-lg {
  width: 3rem;
  height: 3rem;
  font-size: 1rem;
}

.cast-avatar-tooltip-wrap {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
  outline: none;
}

.cast-avatar-tooltip-wrap .cast-avatar {
  cursor: help;
}

.cast-avatar-tooltip {
  position: absolute;
  z-index: 30;
  left: 50%;
  bottom: calc(100% + 0.45rem);
  transform: translateX(-50%) translateY(4px);
  min-width: 10rem;
  max-width: 16rem;
  padding: 0.45rem 0.6rem;
  border-radius: 8px;
  background: var(--surface-elevated, #1e2430);
  border: 1px solid var(--border, rgba(255, 255, 255, 0.12));
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  color: var(--text, #e8eaed);
  font-size: 0.78rem;
  line-height: 1.35;
  font-weight: 500;
  text-align: center;
  white-space: normal;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
}

.cast-avatar-tooltip-wrap:hover .cast-avatar-tooltip,
.cast-avatar-tooltip-wrap:focus-visible .cast-avatar-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.cast-avatar-tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: var(--surface-elevated, #1e2430);
}

.cast-item-text {
  min-width: 0;
  flex: 1;
}

.cast-detail-header h3 {
  margin: 0;
}

.listen-hero {
  margin-bottom: var(--space-lg);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.listen-hero-bar {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr) minmax(0, auto);
  align-items: center;
  gap: 0.65rem;
  width: 100%;
  padding: 0.65rem 1rem;
  border: 1px solid var(--border);
  border-left: 4px solid var(--spotlight);
  border-radius: 8px;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--panel) 70%, var(--spotlight) 30%) 0%,
    color-mix(in srgb, var(--panel) 94%, transparent) 100%
  );
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.14);
}

.listen-preview-purchase {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem 1rem;
  width: 100%;
  margin-top: 0.55rem;
  padding: 0.65rem 1rem;
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border));
  border-radius: 8px;
  background: color-mix(in srgb, var(--panel) 88%, var(--accent) 12%);
}

.listen-preview-purchase.is-preview-ended-highlight {
  animation: listen-preview-purchase-pulse 1.35s ease-in-out 2;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 55%, transparent);
}

@keyframes listen-preview-purchase-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 55%, transparent);
  }
  50% {
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 70%, transparent);
  }
}

.app-modal-preview-ended .app-modal-panel {
  width: min(26rem, 100%);
}

.app-modal-preview-ended .app-modal-title {
  margin-bottom: 0.75rem;
}

.app-preview-ended-lead {
  margin: 0 0 1.35rem;
  color: var(--text);
  line-height: 1.55;
  font-size: 0.98rem;
}

.listen-preview-purchase[hidden] {
  display: none !important;
}

.listen-preview-purchase-copy {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.35;
  color: var(--muted);
}

.listen-preview-purchase .primary {
  flex-shrink: 0;
  padding: 0.45rem 1rem;
  font-size: 0.82rem;
  font-weight: 600;
}

.listen-hero-leading {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
  justify-self: start;
}

/* Tier 2 #10: hero-bar actions (export icon + scene REC pill). */
.listen-hero-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  justify-self: end;
}

.listen-stats-record-btn--in-hero {
  flex: 0 1 auto;
  min-width: 0;
  white-space: nowrap;
}

.listen-stats-record-btn--in-hero.is-recording {
  color: var(--accent, #c45a2c);
  border-color: color-mix(in srgb, var(--accent, #c45a2c) 45%, transparent);
}

.listen-stats-report {
  margin: 0.35rem 0.75rem 0;
  padding: 0.55rem 0.75rem;
  border-radius: 0.5rem;
  background: color-mix(in srgb, var(--panel-elevated, #1a1a22) 88%, transparent);
  border: 1px solid color-mix(in srgb, var(--border, #333) 70%, transparent);
  font-size: 0.88rem;
}

.listen-stats-report summary {
  cursor: pointer;
  font-weight: 600;
}

.listen-stats-report-body {
  margin-top: 0.5rem;
  display: grid;
  gap: 0.35rem;
}

.listen-stats-report-body p {
  margin: 0;
}

.listen-stats-report-sample {
  margin: 0.35rem 0 0;
  padding-left: 1.1rem;
  color: color-mix(in srgb, var(--text, #eee) 75%, transparent);
}

.rec-clip-pill--in-hero {
  flex: 0 0 auto;
}

.rec-clip-pill--in-hero:active {
  transform: scale(0.97);
}

.listen-hero-title {
  margin: 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
  justify-self: center;
  font-family: Georgia, "Iowan Old Style", "Palatino Linotype", "Book Antiqua", serif;
  font-size: 1.28rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.3;
  color: color-mix(in srgb, var(--text) 90%, var(--spotlight) 10%);
}

.listen-footer {
  margin-top: var(--space-md);
  padding-top: 0.85rem;
  border-top: 1px solid var(--border);
}

.listen-now-line {
  margin: 0 0 0.35rem;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.45;
  color: var(--text);
  text-align: center;
}

.listen-status-line {
  margin: 0 0 0.65rem;
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--success);
  text-align: center;
}

.listen-now-line[hidden] {
  display: none !important;
}

.listen-immersion-row {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
}

.listen-immersion-radios {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.listen-immersion-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem;
}

.listen-immersion-chip {
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.3rem 0.75rem;
  font-size: 0.8rem;
  background: var(--panel);
  color: var(--muted);
  cursor: pointer;
}

.listen-immersion-chip.is-active {
  border-color: var(--accent);
  color: var(--text);
  background: rgba(79, 140, 255, 0.15);
}

/* Tier 2 — in-scene cast panel (above speech box, below story image) */
.listen-in-scene-body {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.listen-in-scene-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  border: 1px solid var(--border);
  border-top: none;
  border-radius: 0 0 10px 10px;
  background: color-mix(in srgb, var(--panel) 80%, transparent);
  padding: 0.45rem 0.5rem 0.5rem 0.55rem;
}

.listen-in-scene-toolbar .listen-cast-spotlight {
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  flex: 1 1 auto;
  min-width: 0;
}

.listen-conversation-nav {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 0.35rem;
}

.listen-nav-btn--icon {
  width: 2rem;
  height: 2rem;
  padding: 0;
  border-radius: 8px;
}

.listen-nav-btn--icon svg {
  width: 1.15rem;
  height: 1.15rem;
}

.listen-restart-btn {
  position: relative;
}

.listen-nav-icon-tooltip {
  right: 0;
  left: auto;
  top: auto;
  bottom: calc(100% + 0.45rem);
  transform: translateY(0.15rem);
}

.listen-restart-btn:hover .listen-nav-icon-tooltip,
.listen-restart-btn:focus-visible .listen-nav-icon-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.listen-restart-btn:disabled .listen-nav-icon-tooltip {
  opacity: 0;
  visibility: hidden;
}

.listen-in-scene-panel {
  position: relative;
  z-index: 12;
  isolation: isolate;
  margin: 0.5rem 0 0.35rem;
}

.listen-in-scene-panel[hidden] {
  display: none !important;
}

.listen-in-scene-header {
  display: flex;
  align-items: stretch;
  position: relative;
  border: 1px solid var(--border);
  border-radius: 10px 10px 0 0;
  background: color-mix(in srgb, var(--panel) 88%, transparent);
}

.listen-in-scene-panel.is-collapsed .listen-in-scene-header {
  border-radius: 10px;
}

.listen-in-scene-header:hover {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
}

.listen-in-scene-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
  margin: 0;
  padding: 0.45rem 3.15rem 0.45rem 0.65rem;
  border: none;
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
}

.listen-in-scene-help-btn {
  position: absolute;
  right: 1.85rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.55rem;
  height: 1.55rem;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition:
    color 0.15s ease,
    border-color 0.15s ease,
    background 0.15s ease;
}

.listen-in-scene-help-btn svg {
  width: 1.05rem;
  height: 1.05rem;
}

.listen-in-scene-help-btn:hover {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}

.listen-in-scene-help-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.listen-in-scene-toggle:hover {
  color: var(--text);
}

.listen-in-scene-toggle-label {
  pointer-events: none;
}

.listen-in-scene-toggle-chevron {
  width: 1rem;
  height: 1rem;
  fill: currentColor;
  transition: transform 0.18s ease;
  flex-shrink: 0;
}

.listen-in-scene-panel:not(.is-collapsed) .listen-in-scene-toggle-chevron {
  transform: rotate(180deg);
}

.listen-in-scene-panel.is-collapsed .listen-in-scene-toolbar {
  display: none !important;
}

.listen-in-scene-panel.is-collapsed .listen-cast-spotlight {
  display: none !important;
}

/* Tier 2 — cast spotlight, replay button */
.listen-cast-spotlight {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
}

.listen-cast-spotlight[hidden] {
  display: none;
}

.listen-cast-spotlight-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.18rem 0.55rem 0.18rem 0.2rem;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 999px;
  cursor: pointer;
  color: var(--text);
  font-size: 0.78rem;
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    transform 0.12s ease;
}

.listen-cast-spotlight-btn:hover {
  background: rgba(79, 140, 255, 0.1);
  border-color: rgba(79, 140, 255, 0.45);
}

.listen-cast-spotlight-btn:active {
  transform: scale(0.96);
}

.listen-cast-spotlight-btn.is-current {
  border-color: var(--spotlight);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--spotlight) 55%, transparent);
}

.listen-cast-spotlight-btn.is-scene-corrected {
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent);
}

.listen-cast-spotlight-btn.is-dragging {
  opacity: 0.55;
}

.listen-cast-spotlight-btn.is-drop-target {
  border-color: var(--accent);
  background: rgba(79, 140, 255, 0.2);
  transform: scale(1.04);
}

.listen-cast-spotlight-btn[draggable="true"] {
  cursor: grab;
}

.listen-cast-spotlight-btn[draggable="true"]:active {
  cursor: grabbing;
}

.listen-text.is-cast-quote-drop-target,
#listen-text.is-cast-quote-drop-target,
#listen-text-next.is-cast-quote-drop-target {
  outline: 2px dashed color-mix(in srgb, var(--accent) 70%, transparent);
  outline-offset: 4px;
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  border-radius: 6px;
}

#listen-text.is-selection-drop-target,
#listen-text-next.is-selection-drop-target {
  outline: 2px dashed color-mix(in srgb, var(--accent) 80%, transparent);
  outline-offset: 4px;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border-radius: 6px;
}

#listen-text.is-text-selection-dragging,
#listen-text-next.is-text-selection-dragging {
  opacity: 0.45;
}

.listen-text-selection-drag-ghost {
  position: fixed;
  top: -2000px;
  left: -2000px;
  z-index: 100000;
  max-width: min(16rem, 70vw);
  padding: 0.35rem 0.65rem;
  border: 1px solid color-mix(in srgb, var(--accent) 55%, var(--border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 22%, var(--panel));
  color: var(--text);
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
  pointer-events: none;
}

.listen-text-selection-drag-ghost[hidden] {
  display: none;
}

#listen-text.listen-text-has-draggable-selection,
#listen-text-next.listen-text-has-draggable-selection {
  cursor: grab;
}

#listen-text.listen-text-has-draggable-selection .listen-word,
#listen-text-next.listen-text-has-draggable-selection .listen-word {
  cursor: inherit;
}

#listen-text .listen-word-merge-picked,
#listen-text-next .listen-word-merge-picked {
  background: color-mix(in srgb, var(--accent) 38%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 55%, transparent);
  border-radius: 3px;
}

#listen-text.listen-text-has-draggable-selection:active,
#listen-text-next.listen-text-has-draggable-selection:active,
#listen-text.is-text-selection-dragging,
#listen-text-next.is-text-selection-dragging {
  cursor: grabbing;
}

.listen-cast-spotlight.is-new-character-drop-target,
.listen-in-scene-panel.is-new-character-drop-target {
  outline: 2px dashed color-mix(in srgb, var(--accent) 65%, transparent);
  outline-offset: 3px;
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border-radius: 8px;
}

.listen-in-scene-help-panel {
  width: min(38rem, 100%);
  max-height: min(88vh, 42rem);
  display: flex;
  flex-direction: column;
}

.listen-in-scene-help-platform {
  margin: 0 0 0.85rem;
  padding: 0.35rem 0.65rem;
  border-radius: 999px;
  display: inline-block;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: color-mix(in srgb, var(--accent) 82%, var(--text));
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.listen-in-scene-help-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  margin: 0 0 1rem;
  padding-right: 0.15rem;
  color: var(--text);
  font-size: 0.92rem;
  line-height: 1.55;
}

.listen-in-scene-help-body section + section {
  margin-top: 1.15rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--border);
}

.listen-in-scene-help-body h4 {
  margin: 0 0 0.45rem;
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--muted);
}

.listen-in-scene-help-body ul {
  margin: 0;
  padding-left: 1.15rem;
}

.listen-in-scene-help-body li + li {
  margin-top: 0.45rem;
}

.listen-in-scene-help-body strong {
  color: var(--text);
  font-weight: 650;
}

.listen-in-scene-help-panel .app-modal-actions {
  margin-top: 0;
  flex-shrink: 0;
}

.listen-cast-spotlight-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 999px;
  font-size: 0.65rem;
  font-weight: 700;
  color: #fff;
}


.app-export-panel .export-clip-range {
  border: none;
  margin: 0.25rem 0 0.5rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.export-clip-range-option {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  transition:
    background 0.12s ease,
    border-color 0.12s ease;
}

.export-clip-range-option:hover {
  border-color: rgba(79, 140, 255, 0.45);
  background: rgba(79, 140, 255, 0.05);
}

.export-clip-range-option input[type="radio"] {
  margin-top: 0.2rem;
}

.export-clip-range-option strong {
  display: block;
  color: var(--text);
}

.export-clip-range-option em {
  display: block;
  font-style: normal;
  font-size: 0.78rem;
  color: var(--muted);
  margin-top: 0.15rem;
}

.export-clip-range-option input[type="radio"]:checked ~ span strong {
  color: #6aa9ff;
}

.export-clip-range-option:has(input[type="radio"]:checked) {
  border-color: rgba(79, 140, 255, 0.65);
  background: rgba(79, 140, 255, 0.08);
}

/* Format picker (Audio + video / Audio only) — Tier 2 #10 video export. */
.app-export-panel .export-clip-format {
  border: none;
  margin: 0.5rem 0 0.5rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.export-clip-format-option {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  transition:
    background 0.12s ease,
    border-color 0.12s ease;
}

.export-clip-format-option:hover {
  border-color: rgba(79, 140, 255, 0.45);
  background: rgba(79, 140, 255, 0.05);
}

.export-clip-format-option input[type="radio"] {
  margin-top: 0.2rem;
}

.export-clip-format-option strong {
  display: block;
  color: var(--text);
}

.export-clip-format-option em {
  display: block;
  font-style: normal;
  font-size: 0.78rem;
  color: var(--muted);
  margin-top: 0.15rem;
  line-height: 1.4;
}

.export-clip-format-option input[type="radio"]:checked ~ span strong {
  color: #6aa9ff;
}

.export-clip-format-option:has(input[type="radio"]:checked) {
  border-color: rgba(79, 140, 255, 0.65);
  background: rgba(79, 140, 255, 0.08);
}

.export-clip-format-option.is-warn em {
  color: #d39c54;
}

.export-clip-format-option.is-disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.export-clip-format-option.is-disabled:hover {
  border-color: var(--border);
  background: transparent;
}

.app-modal-hint {
  margin: 0.4rem 0 0.4rem;
  padding: 0.55rem 0.7rem;
  border-radius: 8px;
  background: rgba(176, 107, 255, 0.08);
  border: 1px solid rgba(176, 107, 255, 0.32);
  color: var(--text);
  font-size: 0.82rem;
  line-height: 1.45;
}

[data-theme="light"] .app-modal-hint {
  background: rgba(120, 80, 200, 0.08);
  border-color: rgba(120, 80, 200, 0.4);
}

.app-modal-hint strong {
  font-weight: 600;
}

.app-step1-save-panel {
  width: min(32rem, 100%);
}

.app-step1-save-panel .app-modal-message {
  margin-bottom: 0.85rem;
  color: var(--text);
}

.step1-save-change-list {
  margin: 0 0 0.85rem;
  padding: 0.65rem 0.85rem 0.65rem 1.35rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: color-mix(in srgb, var(--text) 4%, transparent);
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.45;
}

.step1-save-change-list li + li {
  margin-top: 0.35rem;
}

.step1-save-warning {
  margin: 0 0 1.1rem;
}

.export-clip-progress {
  margin: 0.6rem 0 0.4rem;
}

.export-clip-status {
  margin: 0 0 0.4rem;
  font-weight: 600;
  color: var(--text);
}

.export-clip-bar {
  position: relative;
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

[data-theme="light"] .export-clip-bar {
  background: rgba(0, 0, 0, 0.08);
}

.export-clip-bar-fill {
  position: absolute;
  inset: 0 100% 0 0;
  background: linear-gradient(90deg, #4f8cff, #b06bff);
  transition: inset 0.2s linear;
}

.export-clip-time {
  margin: 0.4rem 0 0;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.error {
  color: #d35454;
}

/* Cinema photosensitivity disclaimer (only shown while preset = cinema). */
.listen-cinema-disclaimer {
  margin: 0.45rem auto 0;
  max-width: 32rem;
  text-align: center;
  font-size: 0.72rem;
  line-height: 1.3;
  color: var(--muted);
  opacity: 0.85;
  letter-spacing: 0.01em;
}

.listen-cinema-disclaimer[hidden] {
  display: none !important;
}

.listen-cinema-disclaimer::before {
  content: "⚠";
  margin-right: 0.4em;
  color: #d4a44a;
  font-size: 0.85em;
}

/* Full-screen rain overlay (Cinema rain or storm ambience only). */
.listen-rain-overlay {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  contain: strict;
}

/* Fade rain at the viewport bottom so falling drops do not read as a flashing bar. */
.listen-rain-overlay:not([hidden])::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 18vh;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(
    to top,
    color-mix(in srgb, var(--bg) 88%, transparent) 0%,
    transparent 100%
  );
}

.listen-rain-overlay[hidden] {
  display: none !important;
}

.listen-rain-drop {
  position: absolute;
  top: -8vh;
  width: 1px;
  height: 18px;
  left: var(--x, 50%);
  background: linear-gradient(
    180deg,
    rgba(180, 210, 240, 0) 0%,
    rgba(180, 210, 240, 0.55) 55%,
    rgba(220, 235, 255, 0.85) 100%
  );
  border-radius: 1px;
  opacity: var(--o, 0.75);
  transform: skewX(var(--rain-skew, 8deg));
  animation: listen-rain-fall var(--d, 0.8s) linear infinite;
  animation-delay: var(--delay, 0s);
  will-change: transform;
}

[data-theme="light"] .listen-rain-drop {
  background: linear-gradient(
    180deg,
    rgba(40, 70, 120, 0) 0%,
    rgba(40, 70, 120, 0.45) 55%,
    rgba(40, 70, 120, 0.7) 100%
  );
}

.listen-rain-overlay[data-intensity="heavy"] .listen-rain-drop {
  height: 22px;
}

.listen-rain-overlay[data-intensity="storm"] .listen-rain-drop {
  height: 26px;
}

.listen-rain-overlay[data-intensity="storm"] {
  background: radial-gradient(
    ellipse at top,
    rgba(20, 30, 55, 0.18) 0%,
    transparent 70%
  );
}

@keyframes listen-rain-fall {
  0% {
    transform: skewX(var(--rain-skew, 8deg)) translate3d(0, -10vh, 0);
  }
  100% {
    transform: skewX(var(--rain-skew, 8deg)) translate3d(-3vw, 115vh, 0);
  }
}

.listen-rain-overlay[data-intensity="storm"] .listen-rain-drop {
  animation-name: listen-rain-fall-storm;
}

@keyframes listen-rain-fall-storm {
  0% {
    transform: skewX(var(--rain-skew, 12deg)) translate3d(0, -10vh, 0);
  }
  100% {
    transform: skewX(var(--rain-skew, 12deg)) translate3d(-7vw, 115vh, 0);
  }
}

/* Storm lightning flash overlay. Sits above the wizard chrome but below modals. */
.listen-storm-flash {
  position: fixed;
  inset: 0;
  z-index: 998;
  pointer-events: none;
  background: rgba(220, 235, 255, 0.55);
  opacity: 0;
  transition: opacity 0.08s ease-out;
  mix-blend-mode: screen;
}

.listen-storm-flash[hidden] {
  display: none !important;
}

.listen-storm-flash.is-flashing {
  animation: listen-storm-flash-anim 0.55s ease-out;
}

@keyframes listen-storm-flash-anim {
  0% {
    opacity: 0;
  }
  4% {
    opacity: 0.85;
  }
  10% {
    opacity: 0.05;
  }
  16% {
    opacity: 0.7;
  }
  100% {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .listen-rain-overlay,
  .listen-snow-overlay,
  .listen-fire-glow,
  .listen-storm-flash {
    display: none !important;
  }
}

/* --- Auth / login page --- */
.auth-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem 1.25rem 2.5rem;
  background:
    radial-gradient(ellipse 90% 55% at 50% -15%, rgba(79, 140, 255, 0.2), transparent 55%),
    radial-gradient(ellipse 55% 45% at 100% 100%, rgba(240, 200, 120, 0.12), transparent 50%),
    radial-gradient(ellipse 40% 35% at 0% 80%, rgba(79, 140, 255, 0.08), transparent 45%),
    var(--bg);
}

.auth-card {
  width: 100%;
  max-width: 420px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 2rem 2rem 1.65rem;
  box-shadow:
    0 4px 6px rgba(0, 0, 0, 0.08),
    0 24px 48px rgba(0, 0, 0, 0.28);
}

.auth-brand {
  text-align: center;
  margin-bottom: 1.65rem;
}

.auth-brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.25rem;
  height: 3.25rem;
  margin-bottom: 0.85rem;
  border-radius: 14px;
  overflow: hidden;
  background: transparent;
  border: none;
  padding: 0;
}

.auth-brand-mark img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 14px;
}

.auth-brand-title {
  margin: 0;
  font-family: Georgia, "Iowan Old Style", "Palatino Linotype", "Book Antiqua", serif;
  font-size: 1.65rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.2;
  color: color-mix(in srgb, var(--text) 92%, var(--spotlight) 8%);
}

.auth-brand-tag {
  margin: 0.3rem 0 0;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.auth-subtitle {
  margin: 0.65rem 0 0;
  font-size: 0.95rem;
  color: var(--muted);
  line-height: 1.4;
}

.auth-form {
  margin-top: 0.25rem;
}

.auth-field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-bottom: 1rem;
}

.auth-field label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0.02em;
}

.auth-input-wrap {
  position: relative;
  display: flex;
  align-items: stretch;
}

.auth-input-wrap input {
  flex: 1;
  min-width: 0;
  padding: 0.72rem 2.75rem 0.72rem 0.85rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: 0.95rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.auth-input-wrap input:hover {
  border-color: color-mix(in srgb, var(--border) 60%, var(--accent));
}

.auth-input-wrap input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent);
}

.auth-input-wrap--plain input {
  padding-right: 0.85rem;
}

.auth-password-toggle {
  position: absolute;
  right: 0.35rem;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease;
}

.auth-password-toggle:hover {
  color: var(--text);
  background: color-mix(in srgb, var(--border) 40%, transparent);
}

.auth-password-toggle svg {
  width: 1.15rem;
  height: 1.15rem;
}

.auth-password-toggle .auth-eye-off {
  display: none;
}

.auth-password-toggle.is-visible .auth-eye-on {
  display: none;
}

.auth-password-toggle.is-visible .auth-eye-off {
  display: block;
}

.auth-consent {
  margin: 0 0 1rem;
  padding: 0.8rem 0.9rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: color-mix(in srgb, var(--bg) 88%, var(--panel));
  font-size: 0.82rem;
  line-height: 1.45;
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  color: var(--muted);
}

.auth-consent input[type="checkbox"] {
  margin-top: 0.15rem;
  flex: 0 0 auto;
  width: 1rem;
  height: 1rem;
  accent-color: var(--accent);
}

.auth-consent label {
  margin: 0;
  font-weight: 400;
  color: var(--muted);
}

.auth-consent a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.auth-consent[hidden] {
  display: none;
}

/* Plan picker + comparison (Upgrade modal) */
.plan-checkout-panel {
  max-width: min(920px, 96vw);
}

.plan-checkout-billing-toggle {
  display: flex;
  gap: 0.5rem;
  margin: 0.75rem 0 1rem;
}

.plan-billing-chip {
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
}

.plan-billing-chip.is-active {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, var(--panel));
}

.plan-card-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.plan-card {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.85rem 1rem;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--panel);
  cursor: pointer;
  position: relative;
}

.plan-card input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.plan-card.is-selected,
.plan-card:has(input:checked) {
  border-color: color-mix(in srgb, var(--accent) 60%, var(--border));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent);
}

.plan-card--highlight {
  background: color-mix(in srgb, var(--accent) 8%, var(--panel));
}

.plan-card--current {
  opacity: 0.72;
  cursor: not-allowed;
}

.plan-card-name {
  font-weight: 700;
  font-size: 1.05rem;
}

.plan-card-price {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--accent);
}

.plan-card-tagline {
  font-size: 0.82rem;
  color: var(--muted);
  line-height: 1.35;
}

.plan-card-badge {
  align-self: flex-start;
  margin-top: 0.25rem;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: color-mix(in srgb, var(--muted) 20%, var(--panel));
  color: var(--muted);
}

.plan-comparison-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
  margin-bottom: 0.75rem;
}

.plan-comparison-table th,
.plan-comparison-table td {
  border: 1px solid var(--border);
  padding: 0.45rem 0.55rem;
  text-align: left;
  vertical-align: top;
}

.plan-comparison-table thead th {
  background: color-mix(in srgb, var(--accent) 10%, var(--panel));
  font-weight: 700;
}

.plan-comparison-table tbody th {
  color: var(--muted);
  font-weight: 600;
  width: 34%;
}

.plan-checkout-error {
  color: var(--danger, #e55);
}

[data-immersion-chip].is-plan-locked {
  opacity: 0.45;
  cursor: not-allowed;
}

.pricing-hero {
  margin-bottom: 1.5rem;
}

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
  margin: 1.25rem 0 2rem;
}

.pricing-tier-card {
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1.1rem 1.15rem;
  background: var(--panel);
}

.pricing-tier-card--pro {
  border-color: color-mix(in srgb, var(--accent) 50%, var(--border));
  background: color-mix(in srgb, var(--accent) 7%, var(--panel));
}

.pricing-tier-card h2 {
  margin: 0 0 0.35rem;
  font-size: 1.25rem;
}

.pricing-tier-price {
  font-size: 1.45rem;
  font-weight: 800;
  color: var(--accent);
  margin: 0.25rem 0 0.5rem;
}

.pricing-tier-card ul {
  margin: 0.6rem 0 0;
  padding-left: 1.1rem;
  font-size: 0.9rem;
  line-height: 1.45;
}

.auth-submit {
  width: 100%;
  padding: 0.78rem 1.2rem;
  margin-top: 0.25rem;
  font-size: 1rem;
  border-radius: 10px;
}

.auth-mode-switch {
  margin: 1rem 0 0;
  text-align: center;
  font-size: 0.9rem;
  color: var(--muted);
}

.auth-link-btn {
  padding: 0;
  margin: 0;
  border: none;
  background: none;
  font: inherit;
  font-weight: 600;
  color: var(--accent);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.auth-link-btn:hover {
  color: var(--accent-hover);
}

.auth-error {
  min-height: 1.35rem;
  margin: 0.75rem 0 0;
  font-size: 0.88rem;
  color: var(--error);
  text-align: center;
  line-height: 1.35;
}

.auth-expired-banner {
  margin: 0 0 1.25rem;
  padding: 1rem 1.1rem;
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--accent) 12%, var(--surface-elevated));
  text-align: center;
}

.auth-expired-title {
  margin: 0 0 0.35rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
}

.auth-expired-copy {
  margin: 0 0 0.85rem;
  font-size: 0.9rem;
  color: var(--muted);
  line-height: 1.4;
}

.auth-expired-upgrade {
  width: 100%;
}

.auth-skip {
  display: block;
  margin-top: 0.75rem;
  text-align: center;
  font-size: 0.88rem;
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.auth-skip:hover {
  color: var(--accent);
}

.auth-divider {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 1.35rem 0 1rem;
  color: var(--muted);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.auth-divider::before,
.auth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}

.auth-sso {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.auth-sso button {
  width: 100%;
  justify-content: center;
  padding: 0.68rem 1rem;
  border-radius: 10px;
}

.auth-sso-hint {
  font-size: 0.78rem;
  color: var(--muted);
  margin: 0.5rem 0 0;
  line-height: 1.4;
  text-align: center;
}

.auth-footer {
  margin-top: 1.75rem;
  text-align: center;
  font-size: 0.8rem;
  color: var(--muted);
}

.auth-footer a {
  color: var(--muted);
  text-decoration: none;
}

.auth-footer a:hover {
  color: var(--accent);
  text-decoration: underline;
}

.auth-footer-sep {
  margin: 0 0.4rem;
  opacity: 0.5;
}

[data-theme="light"] .auth-card {
  box-shadow:
    0 4px 12px rgba(26, 26, 46, 0.06),
    0 20px 40px rgba(26, 26, 46, 0.1);
}

/* ── Movie moments: environments, house lights, credits ── */

.listen-environment-row {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.sidebar-playback-settings .listen-environment-row {
  margin-bottom: 0.15rem;
}

.listen-environment-row[hidden] {
  display: none !important;
}

.listen-environment-label {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.listen-environment-hint {
  margin: 0.35rem 0 0;
  font-size: 0.72rem;
  line-height: 1.35;
}

.listen-house-lights-dim {
  position: fixed;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: rgba(0, 0, 0, 0);
  transition: background 1.35s ease;
}

.listen-house-lights-dim.is-dimmed {
  background: rgba(0, 0, 0, 0.42);
}

.listen-house-lights-dim.is-restoring {
  background: rgba(0, 0, 0, 0);
  transition: background 0.65s ease;
}

.listen-location-wipe {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(
    105deg,
    transparent 0%,
    rgba(255, 255, 255, 0.04) 42%,
    rgba(255, 255, 255, 0.12) 50%,
    rgba(255, 255, 255, 0.04) 58%,
    transparent 100%
  );
}

.listen-location-wipe.is-wiping {
  animation: listen-location-wipe 0.78s ease-out forwards;
}

@keyframes listen-location-wipe {
  0% {
    opacity: 0;
    transform: translateX(-120%);
  }
  35% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateX(120%);
  }
}

.listen-snow-overlay {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.listen-snow-overlay[hidden] {
  display: none !important;
}

.listen-snow-flake {
  position: absolute;
  top: -8px;
  left: var(--x, 50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  opacity: var(--o, 0.6);
  animation: listen-snow-fall var(--d, 5s) linear infinite;
  animation-delay: var(--delay, 0s);
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.35);
}

@keyframes listen-snow-fall {
  0% {
    transform: translate3d(0, -10px, 0);
  }
  100% {
    transform: translate3d(calc(var(--drift, 0px) + var(--snow-drift-boost, 0px)), 105vh, 0);
  }
}

/* Cozy Hearth — snow in two window panes (tune in DevTools). */
.listen-snow-overlay[data-region="cozy-dual"] {
  inset: 0;
  overflow: visible;
}

.listen-snow-pane {
  position: absolute;
  overflow: hidden;
  pointer-events: none;
}

.listen-snow-pane__flakes {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 1;
  /* Mullion cutouts: mask snow to glass panes only (PNG bars show through). */
  --cozy-mullion-thickness-h: 2.6%;
  --cozy-mullion-thickness-v: 3.2%;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

/* Left column — one horizontal bar + right edge (column divider). */
.listen-snow-pane--cozy-strip .listen-snow-pane__flakes {
  --cozy-mullion-h1: var(--cozy-strip-mullion-h1, 48%);
  -webkit-mask-image:
    linear-gradient(
      to bottom,
      #fff 0,
      #fff calc(var(--cozy-mullion-h1) - var(--cozy-mullion-thickness-h) / 2),
      transparent calc(var(--cozy-mullion-h1) - var(--cozy-mullion-thickness-h) / 2),
      transparent calc(var(--cozy-mullion-h1) + var(--cozy-mullion-thickness-h) / 2),
      #fff calc(var(--cozy-mullion-h1) + var(--cozy-mullion-thickness-h) / 2),
      #fff 100%
    ),
    linear-gradient(
      to right,
      #fff 0,
      #fff calc(100% - var(--cozy-mullion-thickness-v) / 2),
      transparent calc(100% - var(--cozy-mullion-thickness-v) / 2),
      transparent 100%
    );
  mask-image:
    linear-gradient(
      to bottom,
      #fff 0,
      #fff calc(var(--cozy-mullion-h1) - var(--cozy-mullion-thickness-h) / 2),
      transparent calc(var(--cozy-mullion-h1) - var(--cozy-mullion-thickness-h) / 2),
      transparent calc(var(--cozy-mullion-h1) + var(--cozy-mullion-thickness-h) / 2),
      #fff calc(var(--cozy-mullion-h1) + var(--cozy-mullion-thickness-h) / 2),
      #fff 100%
    ),
    linear-gradient(
      to right,
      #fff 0,
      #fff calc(100% - var(--cozy-mullion-thickness-v) / 2),
      transparent calc(100% - var(--cozy-mullion-thickness-v) / 2),
      transparent 100%
    );
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

/* Columns 2–4 — four horizontals + two verticals (tune vars in DevTools). */
.listen-snow-pane--cozy-upper .listen-snow-pane__flakes {
  --cozy-mullion-h1: var(--cozy-upper-mullion-h1, 18.5%);
  --cozy-mullion-h2: var(--cozy-upper-mullion-h2, 37%);
  --cozy-mullion-h3: var(--cozy-upper-mullion-h3, 55.5%);
  --cozy-mullion-h4: var(--cozy-upper-mullion-h4, 74%);
  --cozy-mullion-v1: var(--cozy-upper-mullion-v1, 33.2%);
  --cozy-mullion-v2: var(--cozy-upper-mullion-v2, 66.4%);
  -webkit-mask-image:
    linear-gradient(
      to bottom,
      #fff 0,
      #fff calc(var(--cozy-mullion-h1) - var(--cozy-mullion-thickness-h) / 2),
      transparent calc(var(--cozy-mullion-h1) - var(--cozy-mullion-thickness-h) / 2),
      transparent calc(var(--cozy-mullion-h1) + var(--cozy-mullion-thickness-h) / 2),
      #fff calc(var(--cozy-mullion-h1) + var(--cozy-mullion-thickness-h) / 2),
      #fff 100%
    ),
    linear-gradient(
      to bottom,
      #fff 0,
      #fff calc(var(--cozy-mullion-h2) - var(--cozy-mullion-thickness-h) / 2),
      transparent calc(var(--cozy-mullion-h2) - var(--cozy-mullion-thickness-h) / 2),
      transparent calc(var(--cozy-mullion-h2) + var(--cozy-mullion-thickness-h) / 2),
      #fff calc(var(--cozy-mullion-h2) + var(--cozy-mullion-thickness-h) / 2),
      #fff 100%
    ),
    linear-gradient(
      to bottom,
      #fff 0,
      #fff calc(var(--cozy-mullion-h3) - var(--cozy-mullion-thickness-h) / 2),
      transparent calc(var(--cozy-mullion-h3) - var(--cozy-mullion-thickness-h) / 2),
      transparent calc(var(--cozy-mullion-h3) + var(--cozy-mullion-thickness-h) / 2),
      #fff calc(var(--cozy-mullion-h3) + var(--cozy-mullion-thickness-h) / 2),
      #fff 100%
    ),
    linear-gradient(
      to bottom,
      #fff 0,
      #fff calc(var(--cozy-mullion-h4) - var(--cozy-mullion-thickness-h) / 2),
      transparent calc(var(--cozy-mullion-h4) - var(--cozy-mullion-thickness-h) / 2),
      transparent calc(var(--cozy-mullion-h4) + var(--cozy-mullion-thickness-h) / 2),
      #fff calc(var(--cozy-mullion-h4) + var(--cozy-mullion-thickness-h) / 2),
      #fff 100%
    ),
    linear-gradient(
      to right,
      #fff 0,
      #fff calc(var(--cozy-mullion-v1) - var(--cozy-mullion-thickness-v) / 2),
      transparent calc(var(--cozy-mullion-v1) - var(--cozy-mullion-thickness-v) / 2),
      transparent calc(var(--cozy-mullion-v1) + var(--cozy-mullion-thickness-v) / 2),
      #fff calc(var(--cozy-mullion-v1) + var(--cozy-mullion-thickness-v) / 2),
      #fff 100%
    ),
    linear-gradient(
      to right,
      #fff 0,
      #fff calc(var(--cozy-mullion-v2) - var(--cozy-mullion-thickness-v) / 2),
      transparent calc(var(--cozy-mullion-v2) - var(--cozy-mullion-thickness-v) / 2),
      transparent calc(var(--cozy-mullion-v2) + var(--cozy-mullion-thickness-v) / 2),
      #fff calc(var(--cozy-mullion-v2) + var(--cozy-mullion-thickness-v) / 2),
      #fff 100%
    );
  mask-image:
    linear-gradient(
      to bottom,
      #fff 0,
      #fff calc(var(--cozy-mullion-h1) - var(--cozy-mullion-thickness-h) / 2),
      transparent calc(var(--cozy-mullion-h1) - var(--cozy-mullion-thickness-h) / 2),
      transparent calc(var(--cozy-mullion-h1) + var(--cozy-mullion-thickness-h) / 2),
      #fff calc(var(--cozy-mullion-h1) + var(--cozy-mullion-thickness-h) / 2),
      #fff 100%
    ),
    linear-gradient(
      to bottom,
      #fff 0,
      #fff calc(var(--cozy-mullion-h2) - var(--cozy-mullion-thickness-h) / 2),
      transparent calc(var(--cozy-mullion-h2) - var(--cozy-mullion-thickness-h) / 2),
      transparent calc(var(--cozy-mullion-h2) + var(--cozy-mullion-thickness-h) / 2),
      #fff calc(var(--cozy-mullion-h2) + var(--cozy-mullion-thickness-h) / 2),
      #fff 100%
    ),
    linear-gradient(
      to bottom,
      #fff 0,
      #fff calc(var(--cozy-mullion-h3) - var(--cozy-mullion-thickness-h) / 2),
      transparent calc(var(--cozy-mullion-h3) - var(--cozy-mullion-thickness-h) / 2),
      transparent calc(var(--cozy-mullion-h3) + var(--cozy-mullion-thickness-h) / 2),
      #fff calc(var(--cozy-mullion-h3) + var(--cozy-mullion-thickness-h) / 2),
      #fff 100%
    ),
    linear-gradient(
      to bottom,
      #fff 0,
      #fff calc(var(--cozy-mullion-h4) - var(--cozy-mullion-thickness-h) / 2),
      transparent calc(var(--cozy-mullion-h4) - var(--cozy-mullion-thickness-h) / 2),
      transparent calc(var(--cozy-mullion-h4) + var(--cozy-mullion-thickness-h) / 2),
      #fff calc(var(--cozy-mullion-h4) + var(--cozy-mullion-thickness-h) / 2),
      #fff 100%
    ),
    linear-gradient(
      to right,
      #fff 0,
      #fff calc(var(--cozy-mullion-v1) - var(--cozy-mullion-thickness-v) / 2),
      transparent calc(var(--cozy-mullion-v1) - var(--cozy-mullion-thickness-v) / 2),
      transparent calc(var(--cozy-mullion-v1) + var(--cozy-mullion-thickness-v) / 2),
      #fff calc(var(--cozy-mullion-v1) + var(--cozy-mullion-thickness-v) / 2),
      #fff 100%
    ),
    linear-gradient(
      to right,
      #fff 0,
      #fff calc(var(--cozy-mullion-v2) - var(--cozy-mullion-thickness-v) / 2),
      transparent calc(var(--cozy-mullion-v2) - var(--cozy-mullion-thickness-v) / 2),
      transparent calc(var(--cozy-mullion-v2) + var(--cozy-mullion-thickness-v) / 2),
      #fff calc(var(--cozy-mullion-v2) + var(--cozy-mullion-thickness-v) / 2),
      #fff 100%
    );
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

#listen-snow-overlay[data-region="cozy-dual"] > .listen-cozy-snow-mask-debug--art-preview {
  position: absolute;
  inset: 0;
  z-index: 5;
}

.listen-cozy-snow-masked {
  position: absolute;
  inset: 0;
}

/* GIMP mask (full backdrop size) — preferred when env-cozy-hearth-snow-mask.png exists. */
#listen-snow-overlay[data-region="cozy-dual"][data-cozy-snow-mask="art"] .listen-cozy-snow-masked {
  -webkit-mask-image: var(--cozy-snow-mask-url);
  mask-image: var(--cozy-snow-mask-url);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  /* White glass = snow; black bars/room = blocked (opaque black PNG export). */
  -webkit-mask-mode: luminance;
  mask-mode: luminance;
}

#listen-snow-overlay[data-region="cozy-dual"][data-cozy-snow-mask="art"] .listen-snow-pane__flakes {
  -webkit-mask-image: none;
  mask-image: none;
}

/* Debug: show mask dead zones while tuning (CSS bars or art preview). */
.listen-cozy-snow-mask-debug {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}

.listen-cozy-snow-mask-debug-bar {
  position: absolute;
  pointer-events: none;
  border-radius: 1px;
  background: rgba(255, 40, 140, 0.42);
  outline: 1px solid rgba(255, 120, 200, 0.65);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
}

.listen-cozy-snow-mask-debug-bar--h {
  left: 0;
  right: 0;
  height: var(--cozy-mullion-thickness-h, 2.6%);
  transform: translateY(-50%);
}

.listen-cozy-snow-mask-debug-bar--v {
  top: 0;
  bottom: 0;
  width: var(--cozy-mullion-thickness-v, 3.2%);
  transform: translateX(-50%);
}

.listen-cozy-snow-mask-debug-bar--edge-right {
  left: auto;
  right: 0;
  transform: translateX(50%);
}

.listen-cozy-snow-mask-debug--strip .listen-cozy-snow-mask-debug-bar--h:nth-child(1) {
  top: var(--cozy-strip-mullion-h1, 48%);
}

.listen-cozy-snow-mask-debug--upper .listen-cozy-snow-mask-debug-bar--h:nth-child(1) {
  top: var(--cozy-upper-mullion-h1, 18.5%);
}

.listen-cozy-snow-mask-debug--upper .listen-cozy-snow-mask-debug-bar--h:nth-child(2) {
  top: var(--cozy-upper-mullion-h2, 37%);
}

.listen-cozy-snow-mask-debug--upper .listen-cozy-snow-mask-debug-bar--h:nth-child(3) {
  top: var(--cozy-upper-mullion-h3, 55.5%);
}

.listen-cozy-snow-mask-debug--upper .listen-cozy-snow-mask-debug-bar--h:nth-child(4) {
  top: var(--cozy-upper-mullion-h4, 74%);
}

.listen-cozy-snow-mask-debug--upper .listen-cozy-snow-mask-debug-bar--v:nth-child(5) {
  left: var(--cozy-upper-mullion-v1, 33.2%);
}

.listen-cozy-snow-mask-debug--upper .listen-cozy-snow-mask-debug-bar--v:nth-child(6) {
  left: var(--cozy-upper-mullion-v2, 66.4%);
}

body[data-cozy-snow-mask-debug="1"]
  #listen-snow-overlay[data-cozy-snow-mask="css"]
  .listen-cozy-snow-mask-debug--strip,
body[data-cozy-snow-mask-debug="1"]
  #listen-snow-overlay[data-cozy-snow-mask="css"]
  .listen-cozy-snow-mask-debug--upper {
  display: block;
}

body[data-cozy-snow-mask-debug="1"]
  #listen-snow-overlay[data-cozy-snow-mask="art"]
  > .listen-cozy-snow-mask-debug--art-preview {
  display: block;
  background-image: var(--cozy-snow-mask-debug-url, var(--cozy-snow-mask-url));
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0.72;
  filter: invert(1) sepia(1) saturate(6) hue-rotate(285deg) brightness(1.15);
}

/* Inherit mullion vars on debug layers from flake mask tuning vars. */
.listen-snow-pane--cozy-strip .listen-cozy-snow-mask-debug {
  --cozy-strip-mullion-h1: 48%;
}

.listen-snow-pane--cozy-upper .listen-cozy-snow-mask-debug {
  --cozy-upper-mullion-h1: 18.5%;
  --cozy-upper-mullion-h2: 37%;
  --cozy-upper-mullion-h3: 55.5%;
  --cozy-upper-mullion-h4: 74%;
  --cozy-upper-mullion-v1: 33.2%;
  --cozy-upper-mullion-v2: 66.4%;
}

/* Shared geometry for snow panes + glass mask cutouts. */
/* Left strip: first column, window top → mantel top. */
.listen-snow-pane--cozy-strip {
  left: var(--cozy-snow-strip-left, 14.5%);
  top: var(--cozy-snow-strip-top, 7%);
  width: var(--cozy-snow-strip-width, 10%);
  height: var(--cozy-snow-strip-height, 28.5%);
  transform: perspective(var(--cozy-window-perspective, 920px))
    rotateY(var(--cozy-window-tilt-y-strip, 7deg))
    skewY(var(--cozy-window-skew-y, 0.85deg));
  transform-origin: left center;
  clip-path: polygon(
    0 var(--cozy-strip-clip-top-left, 2.5%),
    100% var(--cozy-strip-clip-top-right, 0%),
    100% 100%,
    0 100%
  );
}

/* Right pane: remaining columns, window top → sill (extends below mantel). */
.listen-snow-pane--cozy-upper {
  left: var(--cozy-snow-upper-left, 20.5%);
  top: var(--cozy-snow-upper-top, 10.5%);
  width: var(--cozy-snow-upper-width, 11.5%);
  height: var(--cozy-snow-upper-height, 48%);
  transform: perspective(var(--cozy-window-perspective, 920px))
    rotateY(var(--cozy-window-tilt-y-upper, 4.5deg))
    skewY(calc(var(--cozy-window-skew-y, 0.85deg) * 0.55));
  transform-origin: left center;
  clip-path: polygon(
    0 var(--cozy-upper-clip-top-left, 1.5%),
    100% var(--cozy-upper-clip-top-right, 0%),
    100% calc(100% - var(--cozy-upper-clip-bottom-right, 1%)),
    0 calc(100% - var(--cozy-upper-clip-bottom-left, 2.5%))
  );
}

.listen-snow-pane .listen-snow-flake,
.listen-snow-pane__flakes .listen-snow-flake {
  animation-name: listen-snow-fall-window;
}

@keyframes listen-snow-fall-window {
  0% {
    top: -8px;
    transform: translate3d(0, 0, 0);
  }
  100% {
    top: calc(100% + 8px);
    transform: translate3d(calc(var(--drift, 0px) + var(--snow-drift-boost, 0px)), 0, 0);
  }
}

.listen-snow-overlay[data-intensity="heavy"] .listen-snow-flake {
  width: 5px;
  height: 5px;
  opacity: calc(var(--o, 0.6) + 0.15);
}

.listen-snow-overlay[data-source="ambience"] .listen-snow-flake {
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.4);
}

/* Text-driven fire glow when ambience bed is fire */
.listen-fire-glow {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.8s ease;
}

.listen-fire-glow:not([hidden]) {
  opacity: 1;
}

.listen-fire-glow[hidden] {
  display: none !important;
}

.listen-fire-glow::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 42% 58% at 10% 92%, rgba(255, 110, 35, 0.28) 0%, transparent 72%),
    radial-gradient(ellipse 36% 52% at 90% 88%, rgba(255, 85, 25, 0.22) 0%, transparent 68%),
    radial-gradient(ellipse 80% 70% at 50% 100%, rgba(255, 140, 50, 0.12) 0%, transparent 75%);
  animation: listen-fire-glow-flicker 2.4s ease-in-out infinite alternate;
}

.listen-fire-glow[data-intensity="strong"]::before {
  background:
    radial-gradient(ellipse 48% 62% at 8% 90%, rgba(255, 95, 25, 0.42) 0%, transparent 70%),
    radial-gradient(ellipse 40% 56% at 92% 86%, rgba(255, 70, 15, 0.34) 0%, transparent 66%),
    radial-gradient(ellipse 95% 75% at 50% 100%, rgba(255, 120, 40, 0.2) 0%, transparent 78%);
  animation-duration: 1.6s;
}

.listen-fire-glow[data-intensity="strong"]::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 55% at 50% 80%, rgba(255, 180, 80, 0.08) 0%, transparent 70%);
  mix-blend-mode: screen;
}

@keyframes listen-fire-glow-flicker {
  0% {
    opacity: 0.78;
    filter: brightness(0.92);
  }
  50% {
    opacity: 1;
    filter: brightness(1.12);
  }
  100% {
    opacity: 0.86;
    filter: brightness(1.02);
  }
}

.listen-mood-vignette.listen-growl-pulse {
  animation: listen-growl-vignette 0.55s ease-out;
}

@keyframes listen-growl-vignette {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0.85;
  }
  100% {
    opacity: 0.35;
  }
}

/* Themed backdrop art (SVG / webp silhouettes) */
.listen-environment-backdrop {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-color: #060810;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0.88;
}

.listen-environment-backdrop::after {
  content: none;
}

.listen-environment-backdrop[hidden] {
  display: none !important;
}

.listen-environment-backdrop[data-environment="gothic-cathedral"] {
  opacity: 0.92;
  filter: saturate(0.85) brightness(0.72);
}

.listen-environment-backdrop[data-environment="cozy-hearth"] {
  opacity: 0.96;
  filter: brightness(0.9) contrast(1.02) saturate(0.96);
}

.listen-environment-backdrop[data-environment="cozy-hearth"]::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 54% 50% at 50% 44%, transparent 0%, transparent 44%, rgba(0, 0, 0, 0.12) 72%, rgba(0, 0, 0, 0.32) 100%),
    radial-gradient(ellipse 100% 90% at 50% 50%, transparent 30%, rgba(0, 0, 0, 0.18) 100%);
}

.listen-environment-backdrop[data-environment="fantasy-tavern"] {
  opacity: 0.94;
  filter: saturate(0.95) brightness(0.82);
}

.listen-environment-backdrop[data-environment="sci-fi-hologram"] {
  opacity: 0.9;
  /* PNG HUD is detailed — pull it back so the book stays hero. */
  filter: brightness(0.74) contrast(1.02) saturate(0.8);
}

/* Soft center-preserving scrim — dims edge HUD without flattening the whole scene. */
.listen-environment-backdrop[data-environment="sci-fi-hologram"]::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 52% 48% at 50% 44%, transparent 0%, transparent 42%, rgba(0, 0, 0, 0.18) 72%, rgba(0, 0, 0, 0.42) 100%),
    radial-gradient(ellipse 100% 88% at 50% 50%, transparent 28%, rgba(0, 0, 0, 0.22) 100%);
}

.listen-environment-backdrop[data-environment="noir-city"] {
  opacity: 0.94;
  filter: brightness(0.78) contrast(1.08) saturate(0.72);
}

.listen-environment-backdrop[data-environment="noir-city"]::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 50% 46% at 50% 44%, transparent 0%, transparent 40%, rgba(0, 0, 0, 0.2) 70%, rgba(0, 0, 0, 0.48) 100%),
    radial-gradient(ellipse 100% 90% at 50% 50%, transparent 26%, rgba(0, 0, 0, 0.28) 100%);
}

.listen-environment-backdrop[data-environment="horror-shadow"] {
  opacity: 1;
  background-color: transparent;
  /* PNG is already low-key — lift slightly; avoid stacking dark filters on top. */
  filter: brightness(1.14) contrast(1.05) saturate(1.04);
}

/* Pin props to the backdrop cover-fit box (see syncEnvironmentCoverStage). */
body[data-env-cover-sync="1"] .listen-environment-props {
  inset: auto;
  left: var(--env-cover-left);
  top: var(--env-cover-top);
  width: var(--env-cover-width);
  height: var(--env-cover-height);
}

body[data-env-cover-sync="1"] #listen-snow-overlay[data-region="cozy-dual"] {
  inset: auto;
  left: var(--env-cover-left);
  top: var(--env-cover-top);
  width: var(--env-cover-width);
  height: var(--env-cover-height);
}

/* Set-dressing props (horror scene) */
.listen-environment-props {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

.listen-environment-props[data-props="cozy"] {
  overflow: visible;
}

.listen-environment-props[hidden] {
  display: none !important;
}

/* ── Horror Shadow: backdrop PNG + drip / splash overlays ── */
.listen-env-horror-scene {
  position: absolute;
  inset: 0;
}

/* Backdrop: one drip + right pool at the margin (PNG carries hook / cleaver). */
.listen-env-horror-scene--backdrop .listen-env-drip--pool {
  right: calc(6% + min(65px, 10.5vw));
  left: auto;
  animation: listen-blood-drip-fall 7s linear infinite;
}

.listen-env-horror-scene--backdrop .listen-env-blood-pool--right .listen-env-blood-pool-core {
  border-radius: 46% 54% 42% 58% / 40% 36% 44% 38%;
  opacity: 0.62;
  background: radial-gradient(
    ellipse 92% 74% at 46% 40%,
    rgba(88, 6, 18, 0.82) 0%,
    rgba(62, 4, 12, 0.58) 44%,
    rgba(38, 2, 8, 0.32) 74%,
    transparent 100%
  );
  box-shadow:
    0 0 12px rgba(52, 6, 12, 0.22),
    inset 0 -4px 12px rgba(24, 2, 5, 0.5);
}

.listen-env-horror-scene--backdrop .listen-env-blood-droplet {
  transform-origin: center;
  scale: 1.35;
}

.listen-env-horror-scene--backdrop .listen-env-blood-droplet--r1 {
  background: rgba(98, 10, 20, 0.72);
}

.listen-env-horror-scene--backdrop .listen-env-blood-droplet--r2 {
  background: rgba(88, 8, 18, 0.58);
}

.listen-env-horror-scene--backdrop .listen-env-blood-droplet--r3 {
  background: rgba(72, 6, 14, 0.5);
}

.listen-env-horror-scene--backdrop .listen-env-blood-droplet--r4 {
  background: rgba(102, 12, 22, 0.64);
}

.listen-env-horror-scene--backdrop .listen-env-blood-droplet--r5 {
  background: rgba(62, 5, 12, 0.42);
}

.listen-env-horror-scene--backdrop .listen-env-blood-droplet--r6 {
  background: rgba(92, 10, 20, 0.52);
}

.listen-env-horror-scene--backdrop .listen-env-blood-droplet--r7 {
  background: rgba(82, 8, 18, 0.58);
}

.listen-env-horror-scene--backdrop .listen-env-drip--pool {
  background:
    radial-gradient(
      ellipse 85% 72% at 50% 32%,
      rgba(128, 18, 28, 0.96) 0%,
      rgba(88, 8, 18, 0.94) 52%,
      rgba(52, 4, 10, 0.92) 100%
    );
}

.listen-env-horror-scene--backdrop .listen-env-blood-pool--right .listen-env-splash-ring {
  border-color: rgba(118, 14, 24, 0.62);
  animation-delay: 0s;
}

.listen-env-horror-scene--backdrop .listen-env-blood-pool--right .listen-env-splash-ring--2 {
  animation-delay: 0.22s;
}

/* Legacy round pools + SVG knife (pre-backdrop horror props). */
.listen-env-blood-pool {
  position: absolute;
  bottom: 7%;
  width: min(150px, 24vw);
  height: min(56px, 9vh);
  pointer-events: none;
}

.listen-env-blood-pool-core {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(
    ellipse 85% 65% at 50% 38%,
    rgba(190, 28, 38, 0.82) 0%,
    rgba(130, 16, 24, 0.62) 42%,
    rgba(80, 8, 14, 0.38) 72%,
    transparent 100%
  );
  box-shadow:
    0 0 28px rgba(140, 18, 28, 0.45),
    inset 0 -4px 12px rgba(60, 4, 8, 0.5);
  filter: blur(0.5px);
}

.listen-env-blood-droplet {
  position: absolute;
  border-radius: 48% 52% 50% 50%;
  pointer-events: none;
  filter: blur(0.25px);
}

/* Left pool — scattered satellite droplets */
.listen-env-blood-droplet--l1 {
  width: 7px;
  height: 4px;
  left: -5px;
  top: 42%;
  background: rgba(175, 24, 34, 0.78);
  transform: rotate(-18deg);
}

.listen-env-blood-droplet--l2 {
  width: 5px;
  height: 3px;
  left: 12%;
  top: -3px;
  background: rgba(145, 18, 28, 0.62);
  border-radius: 55% 45% 50% 50%;
  transform: rotate(12deg);
}

.listen-env-blood-droplet--l3 {
  width: 9px;
  height: 5px;
  right: -2px;
  top: 22%;
  background: rgba(120, 12, 22, 0.55);
  transform: rotate(28deg);
  opacity: 0.88;
}

.listen-env-blood-droplet--l4 {
  width: 4px;
  height: 6px;
  right: 8%;
  bottom: -4px;
  background: rgba(190, 32, 42, 0.7);
  border-radius: 50% 50% 45% 55%;
  transform: rotate(-8deg);
}

.listen-env-blood-droplet--l5 {
  width: 6px;
  height: 3px;
  left: 28%;
  bottom: -2px;
  background: rgba(105, 10, 18, 0.48);
  transform: rotate(6deg);
  opacity: 0.75;
}

.listen-env-blood-droplet--l6 {
  width: 3px;
  height: 5px;
  left: 62%;
  top: -5px;
  background: rgba(160, 26, 36, 0.58);
  border-radius: 42% 58% 50% 50%;
  transform: rotate(-14deg);
}

.listen-env-blood-droplet--l7 {
  width: 5px;
  height: 4px;
  left: 78%;
  bottom: 8%;
  background: rgba(130, 20, 30, 0.65);
  transform: rotate(22deg);
  opacity: 0.82;
}

/* Right pool — mirror-ish scatter, not identical */
.listen-env-blood-droplet--r1 {
  width: 6px;
  height: 4px;
  right: -4px;
  top: 36%;
  background: rgba(168, 22, 32, 0.74);
  transform: rotate(16deg);
}

.listen-env-blood-droplet--r2 {
  width: 4px;
  height: 3px;
  right: 18%;
  top: -4px;
  background: rgba(138, 16, 26, 0.6);
  border-radius: 52% 48% 50% 50%;
  transform: rotate(-10deg);
  opacity: 0.8;
}

.listen-env-blood-droplet--r3 {
  width: 8px;
  height: 5px;
  left: -3px;
  top: 28%;
  background: rgba(115, 11, 20, 0.52);
  transform: rotate(-24deg);
}

.listen-env-blood-droplet--r4 {
  width: 5px;
  height: 4px;
  left: 10%;
  bottom: -3px;
  background: rgba(185, 30, 40, 0.68);
  transform: rotate(8deg);
}

.listen-env-blood-droplet--r5 {
  width: 3px;
  height: 5px;
  right: 24%;
  bottom: -5px;
  background: rgba(100, 9, 16, 0.45);
  border-radius: 50% 50% 52% 48%;
  transform: rotate(-6deg);
  opacity: 0.7;
}

.listen-env-blood-droplet--r6 {
  width: 6px;
  height: 3px;
  right: 6%;
  top: -2px;
  background: rgba(155, 24, 34, 0.56);
  transform: rotate(18deg);
}

.listen-env-blood-droplet--r7 {
  width: 4px;
  height: 4px;
  left: 55%;
  top: -4px;
  background: rgba(125, 18, 28, 0.63);
  border-radius: 46% 54% 48% 52%;
  transform: rotate(-12deg);
  opacity: 0.85;
}

.listen-env-blood-pool--left {
  left: 5%;
}

.listen-env-blood-pool--right {
  right: 6%;
  width: min(130px, 21vw);
}

.listen-env-splash-ring {
  position: absolute;
  left: 50%;
  top: 42%;
  width: 10px;
  height: 5px;
  margin-left: -5px;
  margin-top: -2px;
  border: 2px solid rgba(180, 30, 40, 0.75);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  animation: listen-pool-splash 7s ease-out infinite;
}

.listen-env-splash-ring--2 {
  animation-delay: 0.22s;
  border-width: 1px;
}

.listen-env-blood-pool--right .listen-env-splash-ring {
  animation-delay: 3.5s;
}

.listen-env-blood-pool--right .listen-env-splash-ring--2 {
  animation-delay: 3.72s;
}

@keyframes listen-pool-splash {
  0%,
  47% {
    opacity: 0;
    transform: scale(0.4);
  }
  50% {
    opacity: 0.85;
    transform: scale(1);
  }
  72% {
    opacity: 0;
    transform: scale(5);
  }
  100% {
    opacity: 0;
    transform: scale(5);
  }
}

.listen-env-knife {
  position: absolute;
  right: 4%;
  bottom: 11%;
  width: min(108px, 17vw);
  height: auto;
  opacity: 0.92;
  filter:
    blur(0.2px)
    brightness(1.14)
    drop-shadow(0 2px 8px rgba(0, 0, 0, 0.45))
    drop-shadow(0 0 5px rgba(110, 70, 70, 0.22));
  transform: rotate(-8deg);
}

.listen-env-drips {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.listen-env-drip {
  position: absolute;
  top: 2%;
  width: 5px;
  height: 10px;
  border-radius: 50% 50% 42% 42% / 38% 38% 62% 62%;
  background:
    radial-gradient(
      ellipse 85% 72% at 50% 32%,
      rgba(210, 45, 52, 0.98) 0%,
      rgba(160, 20, 28, 0.96) 52%,
      rgba(90, 8, 14, 0.94) 100%
    );
  opacity: 0;
  transform-origin: top center;
  animation: listen-blood-drip-fall 7s linear infinite;
  will-change: top, transform, opacity;
}

/* Drip lands on left pool center */
.listen-env-drip--left {
  left: calc(5% + min(75px, 12vw));
  animation-delay: 0s;
}

/* Drip lands on right pool center */
.listen-env-drip--right {
  right: calc(6% + min(65px, 10.5vw));
  animation-delay: 3.5s;
}

/* Fall: s(t)=0.05t+0.95t³ (strong late acceleration), lands at 47% for splash sync.
   scaleX narrows + scaleY stretches so the drop grows from a small oval into a teardrop. */
@keyframes listen-blood-drip-fall {
  0% {
    top: 2%;
    opacity: 0;
    transform: scale(0.82, 0.28);
  }
  5% {
    top: 2%;
    opacity: 0.95;
    transform: scale(0.88, 0.38);
  }
  11.8% {
    top: calc(0.988 * 2% + 0.012 * (100% - 7% - min(56px, 9vh) - 14px));
    opacity: 0.95;
    transform: scale(0.88, 0.41);
  }
  16.8% {
    top: calc(0.965 * 2% + 0.035 * (100% - 7% - min(56px, 9vh) - 14px));
    opacity: 0.95;
    transform: scale(0.87, 0.48);
  }
  21.8% {
    top: calc(0.919 * 2% + 0.081 * (100% - 7% - min(56px, 9vh) - 14px));
    opacity: 0.95;
    transform: scale(0.86, 0.62);
  }
  28.1% {
    top: calc(0.814 * 2% + 0.186 * (100% - 7% - min(56px, 9vh) - 14px));
    opacity: 0.95;
    transform: scale(0.84, 0.92);
  }
  34.4% {
    top: calc(0.639 * 2% + 0.361 * (100% - 7% - min(56px, 9vh) - 14px));
    opacity: 0.95;
    transform: scale(0.79, 1.38);
  }
  40.7% {
    top: calc(0.373 * 2% + 0.627 * (100% - 7% - min(56px, 9vh) - 14px));
    opacity: 0.95;
    transform: scale(0.73, 2.08);
  }
  44.9% {
    top: calc(0.138 * 2% + 0.862 * (100% - 7% - min(56px, 9vh) - 14px));
    opacity: 0.95;
    transform: scale(0.67, 2.72);
  }
  47% {
    top: calc(100% - 7% - min(56px, 9vh) - 14px);
    opacity: 0.95;
    transform: scale(0.64, 3.05);
  }
  48% {
    top: calc(100% - 7% - min(56px, 9vh) - 14px);
    opacity: 0.88;
    transform: scale(1.05, 0.55);
  }
  50% {
    opacity: 0.38;
    transform: scale(1.15, 0.38);
  }
  52% {
    opacity: 0;
    transform: scale(0.88, 0.28);
  }
  100% {
    top: calc(100% - 7% - min(56px, 9vh) - 14px);
    opacity: 0;
    transform: scale(0.82, 0.28);
  }
}

.listen-environment-props.listen-env-reduced-motion .listen-env-drip,
.listen-environment-props.listen-env-reduced-motion .listen-env-splash-ring {
  animation: none !important;
  opacity: 0.4;
}

.listen-environment-props.listen-env-reduced-motion .listen-env-drip--left {
  top: calc(100% - 12%);
}

.listen-environment-props.listen-env-reduced-motion .listen-env-drip--right {
  top: calc(100% - 12%);
}

.listen-environment-props.listen-env-reduced-motion .listen-env-splash-ring {
  opacity: 0.35;
  transform: scale(2.5);
}

/* ── Darkened Cave: wall torch, distant fire, water pools & drips ── */
.listen-environment-backdrop[data-environment="darkened-cave"] {
  opacity: 1;
  filter: brightness(1.06) contrast(1.04) saturate(0.96);
}

/* ── Darkened Cave: backdrop PNG + torch flame, floor glow, one drip / pool ── */
.listen-env-cave-scene--backdrop {
  /* Shared anchor — drip horizontal center tracks pool / splash center. */
  --cave-pool-inset-right: 6%;
  --cave-pool-half-width: 4.2%;
  --cave-pool-width: calc(var(--cave-pool-half-width) * 2);
  --cave-pool-height: 5.4%;
  /* Wall torch flame — tune to match env-darkened-cave.png sconce (% = cover stage). */
  --cave-torch-left: 17.7%;
  --cave-torch-top: 20%;
  --cave-torch-width: 8.5%;
  --cave-torch-height: 13.5%;
}

.listen-env-cave-scene--backdrop .listen-env-torch-flame--cave-wall {
  position: absolute;
  left: var(--cave-torch-left);
  top: var(--cave-torch-top);
  bottom: auto;
  width: var(--cave-torch-width);
  height: var(--cave-torch-height);
  transform: translate(-50%, 0);
  --listen-fire-speed: 2.5s;
  opacity: 0.82;
  filter: saturate(0.94) brightness(1.12) blur(0.35px);
  z-index: 2;
}

/* Tighter halo than tavern — large flame box was making the default 200% glow huge. */
.listen-env-cave-scene--backdrop .listen-env-torch-flame--cave-wall::before {
  width: 118%;
  height: 108%;
  bottom: 12%;
  filter: blur(5px);
  background: radial-gradient(
    ellipse 44% 48% at 50% 58%,
    rgba(255, 200, 95, 0.48) 0%,
    rgba(255, 130, 40, 0.22) 38%,
    rgba(255, 85, 20, 0.06) 58%,
    transparent 72%
  );
}

.listen-env-cave-scene--backdrop .listen-env-cave-floor-glow {
  opacity: 0.72;
}

.listen-env-cave-scene--backdrop .listen-env-water-drip--pool {
  /* Same horizontal center as splash rings (pool left: 50%). */
  right: calc(var(--cave-pool-inset-right) + var(--cave-pool-half-width) - 2.5px);
  left: auto;
  animation: listen-water-drip-fall 8s linear infinite;
  animation-delay: 0s;
}

.listen-env-cave-scene--backdrop .listen-env-water-pool--right {
  right: var(--cave-pool-inset-right);
  width: var(--cave-pool-width);
  height: var(--cave-pool-height);
}

.listen-env-cave-scene--backdrop .listen-env-water-pool--right .listen-env-water-pool-core {
  opacity: 0.45;
  background: radial-gradient(
    ellipse 88% 70% at 48% 42%,
    rgba(58, 128, 168, 0.62) 0%,
    rgba(32, 78, 118, 0.42) 44%,
    rgba(14, 38, 58, 0.24) 74%,
    transparent 100%
  );
  box-shadow:
    0 0 14px rgba(40, 100, 140, 0.22),
    inset 0 -4px 10px rgba(6, 22, 38, 0.4);
}

.listen-env-cave-scene--backdrop .listen-env-water-pool--right .listen-env-water-splash-ring {
  animation-delay: 0s;
}

.listen-env-cave-scene--backdrop .listen-env-water-pool--right .listen-env-water-splash-ring--2 {
  animation-delay: 0.24s;
}

.listen-env-cave-scene {
  position: absolute;
  inset: 0;
}

.listen-env-torch--cave {
  left: max(15rem, 19%);
  top: clamp(28%, 34vh, 40%);
}

body:has(.library-sidebar.collapsed) .listen-env-torch--cave {
  left: max(2.5rem, 11.5%);
}

.listen-env-cave-floor-glow {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: min(720px, 94vw);
  height: clamp(110px, 20vh, 190px);
  transform: translateX(-50%);
  pointer-events: none;
  background:
    radial-gradient(
      ellipse 78% 100% at 50% 100%,
      rgba(255, 145, 55, 0.42) 0%,
      rgba(255, 95, 28, 0.2) 34%,
      rgba(180, 60, 15, 0.07) 58%,
      transparent 78%
    );
  filter: blur(10px);
  animation: listen-cave-floor-glow 4.4s ease-in-out infinite alternate;
}

@keyframes listen-cave-floor-glow {
  0% {
    opacity: 0.52;
    transform: translateX(-50%) scaleX(0.94) scaleY(0.96);
  }
  100% {
    opacity: 0.92;
    transform: translateX(-50%) scaleX(1.05) scaleY(1.04);
  }
}

.listen-env-water-pool {
  position: absolute;
  bottom: 7%;
  width: min(140px, 22vw);
  height: min(52px, 8.5vh);
  pointer-events: none;
}

.listen-env-water-pool-core {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(
    ellipse 85% 65% at 50% 38%,
    rgba(72, 148, 198, 0.72) 0%,
    rgba(38, 92, 138, 0.52) 42%,
    rgba(18, 48, 72, 0.34) 72%,
    transparent 100%
  );
  box-shadow:
    0 0 24px rgba(48, 120, 168, 0.35),
    inset 0 -4px 12px rgba(8, 28, 48, 0.45);
  filter: blur(0.5px);
}

.listen-env-water-droplet {
  position: absolute;
  border-radius: 48% 52% 50% 50%;
  pointer-events: none;
  filter: blur(0.2px);
}

.listen-env-water-droplet--l1 {
  width: 6px;
  height: 4px;
  left: 8%;
  top: 38%;
  background: rgba(110, 178, 220, 0.72);
  transform: rotate(-12deg);
}

.listen-env-water-droplet--l2 {
  width: 5px;
  height: 3px;
  right: 6%;
  top: -2px;
  background: rgba(88, 156, 205, 0.58);
  transform: rotate(14deg);
}

.listen-env-water-droplet--l3 {
  width: 4px;
  height: 5px;
  left: 62%;
  bottom: -3px;
  background: rgba(96, 168, 214, 0.65);
  transform: rotate(-6deg);
}

.listen-env-water-droplet--r1 {
  width: 5px;
  height: 4px;
  right: 10%;
  top: 34%;
  background: rgba(102, 172, 218, 0.68);
  transform: rotate(10deg);
}

.listen-env-water-droplet--r2 {
  width: 4px;
  height: 3px;
  left: 12%;
  top: -3px;
  background: rgba(78, 140, 188, 0.55);
  transform: rotate(-8deg);
}

.listen-env-water-droplet--r3 {
  width: 6px;
  height: 4px;
  right: 22%;
  bottom: -2px;
  background: rgba(118, 186, 228, 0.62);
  transform: rotate(16deg);
}

.listen-env-water-pool--left {
  left: 5%;
}

.listen-env-water-pool--right {
  right: 6%;
  width: min(120px, 19vw);
}

.listen-env-water-splash-ring {
  position: absolute;
  left: 50%;
  top: 42%;
  width: 10px;
  height: 5px;
  margin-left: -5px;
  margin-top: -2px;
  border: 2px solid rgba(96, 168, 214, 0.65);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  animation: listen-water-pool-splash 8s ease-out infinite;
}

.listen-env-water-splash-ring--2 {
  animation-delay: 0.24s;
  border-width: 1px;
}

.listen-env-water-pool--right .listen-env-water-splash-ring {
  animation-delay: 4s;
}

.listen-env-water-pool--right .listen-env-water-splash-ring--2 {
  animation-delay: 4.24s;
}

@keyframes listen-water-pool-splash {
  0%,
  47% {
    opacity: 0;
    transform: scale(0.4);
  }
  50% {
    opacity: 0.75;
    transform: scale(1);
  }
  72% {
    opacity: 0;
    transform: scale(4.5);
  }
  100% {
    opacity: 0;
    transform: scale(4.5);
  }
}

.listen-env-water-drip {
  position: absolute;
  top: 2%;
  width: 5px;
  height: 10px;
  border-radius: 50% 50% 42% 42% / 38% 38% 62% 62%;
  background:
    radial-gradient(
      ellipse 85% 72% at 50% 32%,
      rgba(195, 235, 255, 0.98) 0%,
      rgba(130, 198, 235, 0.94) 52%,
      rgba(48, 108, 158, 0.9) 100%
    );
  opacity: 0;
  transform-origin: top center;
  animation: listen-water-drip-fall 8s linear infinite;
  box-shadow: 0 0 7px rgba(88, 168, 220, 0.42);
  will-change: top, transform, opacity;
}

.listen-env-water-drip--left {
  left: calc(5% + min(70px, 11vw));
  animation-delay: 0s;
}

.listen-env-water-drip--right {
  right: calc(6% + min(60px, 9.5vw));
  animation-delay: 4s;
}

@keyframes listen-water-drip-fall {
  0% {
    top: 2%;
    opacity: 0;
    transform: scale(0.82, 0.28);
  }
  5% {
    top: 2%;
    opacity: 0.9;
    transform: scale(0.88, 0.38);
  }
  11.8% {
    top: calc(0.988 * 2% + 0.012 * (100% - 7% - min(52px, 8.5vh) - 14px));
    opacity: 0.9;
    transform: scale(0.88, 0.41);
  }
  16.8% {
    top: calc(0.965 * 2% + 0.035 * (100% - 7% - min(52px, 8.5vh) - 14px));
    opacity: 0.9;
    transform: scale(0.87, 0.48);
  }
  21.8% {
    top: calc(0.919 * 2% + 0.081 * (100% - 7% - min(52px, 8.5vh) - 14px));
    opacity: 0.9;
    transform: scale(0.86, 0.62);
  }
  28.1% {
    top: calc(0.814 * 2% + 0.186 * (100% - 7% - min(52px, 8.5vh) - 14px));
    opacity: 0.9;
    transform: scale(0.84, 0.92);
  }
  34.4% {
    top: calc(0.639 * 2% + 0.361 * (100% - 7% - min(52px, 8.5vh) - 14px));
    opacity: 0.9;
    transform: scale(0.79, 1.38);
  }
  40.7% {
    top: calc(0.373 * 2% + 0.627 * (100% - 7% - min(52px, 8.5vh) - 14px));
    opacity: 0.9;
    transform: scale(0.73, 2.08);
  }
  44.9% {
    top: calc(0.138 * 2% + 0.862 * (100% - 7% - min(52px, 8.5vh) - 14px));
    opacity: 0.9;
    transform: scale(0.67, 2.72);
  }
  47% {
    top: calc(100% - 7% - min(52px, 8.5vh) - 14px);
    opacity: 0.9;
    transform: scale(0.64, 3.05);
  }
  48% {
    top: calc(100% - 7% - min(52px, 8.5vh) - 14px);
    opacity: 0.75;
    transform: scale(1.05, 0.55);
  }
  50% {
    opacity: 0.32;
    transform: scale(1.15, 0.38);
  }
  52% {
    opacity: 0;
    transform: scale(0.88, 0.28);
  }
  100% {
    top: calc(100% - 7% - min(52px, 8.5vh) - 14px);
    opacity: 0;
    transform: scale(0.82, 0.28);
  }
}

.listen-environment-props.listen-env-reduced-motion .listen-env-water-drip,
.listen-environment-props.listen-env-reduced-motion .listen-env-water-splash-ring {
  animation: none !important;
  opacity: 0.38;
}

.listen-environment-props.listen-env-reduced-motion .listen-env-water-drip--left,
.listen-environment-props.listen-env-reduced-motion .listen-env-water-drip--right {
  top: calc(100% - 12%);
}

.listen-environment-props.listen-env-reduced-motion .listen-env-water-splash-ring {
  opacity: 0.28;
  transform: scale(2.2);
}

/* ── Cozy Hearth: snow masked to window glass (mullion positions in .listen-snow-pane__flakes). */

.listen-env-cozy-scene {
  position: absolute;
  inset: 0;
}

/* ── Cozy Hearth: hearth anchor + effects (tune in DevTools) ── */
.listen-env-cozy-scene--backdrop {
  /*
   * Move/size the whole hearth stack to match env-cozy-hearth.png.
   * left + bottom pin the anchor box to the PNG fire opening.
   */
  --cozy-hearth-left: 4.2%;
  --cozy-hearth-bottom: 21.2%;
  --cozy-hearth-width: 11.5%;
  --cozy-hearth-height: 10.5%;
  --cozy-hearth-offset-x: 0%;
  --cozy-hearth-offset-y: -1.5%;
  /* Floor spark tuning (optional DevTools overrides) */
  --cozy-spark-floor-dx-max: 58px;
  --cozy-spark-floor-drop-max: 24px;
}

.listen-env-cozy-hearth-anchor {
  position: absolute;
  left: var(--cozy-hearth-left);
  bottom: var(--cozy-hearth-bottom);
  width: var(--cozy-hearth-width);
  height: var(--cozy-hearth-height);
  transform: translate(var(--cozy-hearth-offset-x), var(--cozy-hearth-offset-y));
  pointer-events: none;
  z-index: 2;
}

.listen-env-cozy-floor-glow {
  position: absolute;
  left: -35%;
  bottom: -55%;
  width: 160%;
  height: 100%;
  pointer-events: none;
  opacity: 0.55;           /* or scale down the gradient alphas */
  background:
    radial-gradient(
      ellipse 88% 100% at 42% 100%,
      rgba(255, 130, 45, 0.34) 0%,
      rgba(255, 88, 22, 0.18) 38%,
      rgba(160, 55, 12, 0.06) 62%,
      transparent 78%
    );
  filter: blur(8px);
  z-index: 1;
  animation: listen-cozy-hearth-floor-glow 3.8s ease-in-out infinite alternate;
}

.listen-env-cozy-ember-bed {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 38%;
  pointer-events: none;
  z-index: 2;
  transform: scale(0.6);
}

.listen-env-cozy-ember-bed::before {
  content: "";
  position: absolute;
  inset: 10% 0 -20%;
  border-radius: 50%;
  background: radial-gradient(
    ellipse 72% 88% at 50% 62%,
    rgba(255, 150, 55, 0.42) 0%,
    rgba(255, 85, 18, 0.22) 42%,
    rgba(180, 45, 8, 0.08) 68%,
    transparent 84%
  );
  filter: blur(3px);
  animation: listen-cozy-ember-bed-glow 2.4s ease-in-out infinite alternate;
}

.listen-env-cozy-ember-coal {
  position: absolute;
  bottom: 8%;
  left: 8%;
  width: 14%;
  height: 28%;
  border-radius: 50%;
  background: radial-gradient(
    ellipse 100% 88% at 50% 58%,
    rgba(255, 210, 95, 0.95) 0%,
    rgba(255, 110, 28, 0.72) 46%,
    rgba(120, 28, 6, 0.35) 72%,
    transparent 100%
  );
  box-shadow: 0 0 8px rgba(255, 120, 35, 0.45);
  animation: listen-cozy-ember-pulse 2.05s ease-in-out infinite alternate;
}

.listen-env-cozy-ember-coal--2 {
  left: 34%;
  width: 11%;
  animation-delay: 0.55s;
  animation-duration: 2.35s;
}

.listen-env-cozy-ember-coal--3 {
  left: 56%;
  width: 17%;
  animation-delay: 1.05s;
  animation-duration: 1.85s;
}

.listen-env-cozy-ember-coal--4 {
  left: 78%;
  width: 9%;
  animation-delay: 1.65s;
  animation-duration: 2.55s;
}

.listen-env-cozy-hearth-flame {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 94%;
  transform: none;
  --listen-fire-speed: 2.65s;
  opacity: 0.68;
  filter: saturate(0.9) brightness(1.06) blur(0.45px);
  z-index: 3;
}

.listen-env-cozy-hearth-flame::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 2%;
  width: 100%;
  height: 135%;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(
    ellipse 52% 56% at 50% 62%,
    rgba(255, 195, 95, 0.52) 0%,
    rgba(255, 125, 38, 0.28) 36%,
    rgba(255, 75, 18, 0.08) 58%,
    transparent 76%
  );
  filter: blur(6px);
  z-index: -1;
  pointer-events: none;
  animation: listen-cozy-hearth-glow 2.6s ease-in-out infinite alternate;
}

.listen-env-cozy-hearth-flame.listen-env-fire-sprite {
  animation:
    listen-fire-sprite var(--listen-fire-speed, 2.65s) steps(calc(var(--listen-fire-frames) - 1)) infinite,
    listen-torch-flame-flicker 2.15s ease-in-out infinite alternate;
}

.listen-env-smoke-column--cozy-hearth {
  left: 50%;
  bottom: 82%;
  width: 42%;
  height: 145%;
  margin-left: 0;
  transform: translateX(-50%);
  opacity: 0.58;
  z-index: 4;
}

.listen-env-smoke-column--cozy-hearth .listen-env-smoke-wisp {
  background: radial-gradient(circle, rgba(150, 142, 132, 0.48) 0%, rgba(110, 105, 98, 0.18) 42%, transparent 74%);
  filter: blur(1.4px);
  animation: listen-env-smoke-rise 5.8s ease-out infinite;
}

.listen-env-smoke-column--cozy-hearth .listen-env-smoke-wisp--2 {
  animation-delay: 1.85s;
}

.listen-env-smoke-column--cozy-hearth .listen-env-smoke-wisp--3 {
  animation-delay: 3.65s;
}

/* Ephemeral hearth sparks — full-scene host (not clipped by hearth anchor) */
.listen-env-cozy-spark-host {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: visible;
  z-index: 6;
}

.listen-env-cozy-spark {
  position: absolute;
  width: 0;
  height: 0;
  pointer-events: none;
  animation: listen-cozy-spark-arc var(--spark-dur, 2.2s) cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

.listen-env-cozy-spark--floor {
  animation: listen-cozy-spark-floor-arc var(--spark-dur, 2.8s) ease-out forwards;
}

.listen-env-cozy-spark--floor .listen-env-cozy-spark-core {
  animation: listen-cozy-spark-floor-core-fade var(--spark-dur, 2.8s) ease-out forwards;
}

.listen-env-cozy-spark--floor .listen-env-cozy-spark-smoke {
  animation: listen-cozy-spark-floor-smoke var(--spark-dur, 2.8s) ease-out forwards;
}

.listen-env-cozy-spark-core {
  position: absolute;
  left: 0;
  top: 0;
  width: min(6px, 0.75vw);
  height: min(6px, 0.75vw);
  margin-left: calc(min(6px, 0.75vw) * -0.5);
  margin-top: calc(min(6px, 0.75vw) * -0.5);
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(255, 255, 235, 1) 0%,
    rgba(255, 210, 95, 0.95) 28%,
    rgba(255, 120, 28, 0.75) 58%,
    transparent 100%
  );
  box-shadow:
    0 0 10px rgba(255, 200, 90, 0.95),
    0 0 4px rgba(255, 255, 240, 0.85);
  animation: listen-cozy-spark-core-fade var(--spark-dur, 2.2s) ease-out forwards;
}

.listen-env-cozy-spark-smoke {
  position: absolute;
  left: 0;
  top: 0;
  width: min(16px, 2vw);
  height: min(16px, 2vw);
  margin-left: calc(min(16px, 2vw) * -0.5);
  margin-top: calc(min(16px, 2vw) * -0.5);
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(145, 138, 128, 0.52) 0%,
    rgba(110, 105, 98, 0.22) 44%,
    transparent 74%
  );
  filter: blur(2px);
  opacity: 0;
  animation: listen-cozy-spark-smoke-puff var(--spark-dur, 2.2s) ease-out forwards;
}

@keyframes listen-cozy-spark-arc {
  0% {
    opacity: 1;
    transform: translate(0, 0);
  }
  14% {
    opacity: 1;
    transform: translate(calc(var(--spark-dx) * 0.42), calc(var(--spark-dy) * 0.38));
  }
  32% {
    opacity: 1;
    transform: translate(var(--spark-dx), var(--spark-dy));
  }
  58% {
    opacity: 0.72;
    transform: translate(calc(var(--spark-dx) * 1.04), calc(var(--spark-dy) * 1.06 - 6px));
  }
  100% {
    opacity: 0;
    transform: translate(calc(var(--spark-dx) * 1.08), calc(var(--spark-dy) * 1.1 - 14px));
  }
}

/* Pop up-out, arc down onto the hearth floor, flicker out. */
@keyframes listen-cozy-spark-floor-arc {
  0% {
    opacity: 1;
    transform: translate(0, 0);
  }
  16% {
    opacity: 1;
    transform: translate(calc(var(--spark-dx) * 0.32), var(--spark-dy-peak));
  }
  38% {
    opacity: 1;
    transform: translate(calc(var(--spark-dx) * 0.62), calc(var(--spark-dy-peak) * 0.08));
  }
  62% {
    opacity: 1;
    transform: translate(calc(var(--spark-dx) * 0.92), calc(var(--spark-dy-land) * 0.88));
  }
  70% {
    opacity: 1;
    transform: translate(var(--spark-dx), var(--spark-dy-land));
  }
  78% {
    opacity: 0.9;
    transform: translate(var(--spark-dx), var(--spark-dy-land));
  }
  100% {
    opacity: 0;
    transform: translate(calc(var(--spark-dx) + 2px), var(--spark-dy-land));
  }
}

@keyframes listen-cozy-spark-floor-core-fade {
  0% {
    opacity: 0;
    transform: scale(0.4);
    filter: brightness(2.3);
  }
  10% {
    opacity: 1;
    transform: scale(1.3);
    filter: brightness(2);
  }
  24% {
    opacity: 1;
    transform: scale(1);
    filter: brightness(1.5);
  }
  70% {
    opacity: 0.88;
    transform: scale(0.82);
    filter: brightness(1.15);
  }
  78% {
    opacity: 0.62;
    transform: scale(0.58);
    filter: brightness(1.05);
  }
  80% {
    opacity: 0.48;
    transform: scale(0.62);
    filter: brightness(0.92);
  }
  86% {
    opacity: 0.38;
    transform: scale(0.5);
    filter: brightness(1.08);
  }
  92% {
    opacity: 0.22;
    transform: scale(0.42);
    filter: brightness(0.78);
  }
  100% {
    opacity: 0;
    transform: scale(0.18);
    filter: brightness(0.6);
  }
}

@keyframes listen-cozy-spark-floor-smoke {
  0%,
  66% {
    opacity: 0;
    transform: scale(0.2);
  }
  72% {
    opacity: 0.42;
    transform: scale(0.75);
  }
  82% {
    opacity: 0.28;
    transform: scale(1.15) translateY(-5px);
  }
  100% {
    opacity: 0;
    transform: scale(1.45) translateY(-10px);
  }
}

@keyframes listen-cozy-spark-core-fade {
  0% {
    opacity: 0;
    transform: scale(0.35);
    filter: brightness(2.4);
  }
  10% {
    opacity: 1;
    transform: scale(1.35);
    filter: brightness(2);
  }
  24% {
    opacity: 1;
    transform: scale(1);
    filter: brightness(1.45);
  }
  48% {
    opacity: 0.55;
    transform: scale(0.72);
    filter: brightness(0.95);
  }
  100% {
    opacity: 0;
    transform: scale(0.25);
    filter: brightness(0.6);
  }
}

@keyframes listen-cozy-spark-smoke-puff {
  0%,
  20% {
    opacity: 0;
    transform: scale(0.25);
  }
  32% {
    opacity: 0.62;
    transform: scale(0.85);
  }
  52% {
    opacity: 0.42;
    transform: scale(1.35) translateY(-6px);
  }
  100% {
    opacity: 0;
    transform: scale(1.85) translateY(-16px);
  }
}

.listen-environment-props--effects-muted .listen-env-cozy-spark-host {
  display: none;
}

.listen-environment-props--effects-muted .listen-env-noir-rain-stage,
.listen-environment-props--effects-muted .listen-env-noir-smoke-host,
.listen-environment-props--effects-muted .listen-env-gothic-fog-host {
  display: none;
}

/* Background animations off — hide fire, smoke, and ember props (tavern, cozy, cave). */
.listen-environment-props--effects-muted .listen-env-torch-flame,
.listen-environment-props--effects-muted .listen-env-smoke-column,
.listen-environment-props--effects-muted .listen-env-cozy-hearth-flame,
.listen-environment-props--effects-muted .listen-env-cozy-ember-bed,
.listen-environment-props--effects-muted .listen-env-cozy-ember-coal,
.listen-environment-props--effects-muted .listen-env-cozy-floor-glow {
  visibility: hidden !important;
}

.listen-environment-props--effects-muted .listen-env-fire-sprite,
.listen-environment-props--effects-muted .listen-env-smoke-wisp,
.listen-environment-props--effects-muted .listen-env-torch-flame::before,
.listen-environment-props--effects-muted .listen-env-cozy-hearth-flame::before,
.listen-environment-props--effects-muted .listen-env-cozy-ember-bed::before,
.listen-environment-props--effects-muted .listen-env-noir-lamp-bulb,
.listen-environment-props--effects-muted .listen-env-noir-lamp-cone,
.listen-environment-props--effects-muted .listen-env-noir-city-light,
.listen-environment-props--effects-muted .listen-env-noir-smoke,
.listen-environment-props--effects-muted .listen-env-noir-smoke-host,
.listen-environment-props--effects-muted .listen-env-noir-rain-streak,
.listen-environment-props--effects-muted .listen-env-scifi-mask-layer,
.listen-environment-props--effects-muted .listen-env-scifi-mask-layer::after,
.listen-environment-props--effects-muted .listen-env-scifi-star,
.listen-environment-props--effects-muted .listen-env-scifi-cylinder-light,
.listen-environment-props--effects-muted .listen-env-scifi-stars-host,
.listen-environment-props--effects-muted .listen-env-scifi-cylinder-lights-host,
.listen-environment-props--effects-muted .listen-env-gothic-fog-patch,
.listen-environment-props--effects-muted .listen-env-gothic-gargoyle-eye,
.listen-environment-props--effects-muted .listen-env-gothic-gargoyle-eyes-host,
.listen-environment-props--effects-muted .listen-env-gothic-mask-layer,
  animation: none !important;
  opacity: 0 !important;
}

.listen-environment-overlay--animations-muted[data-tavern="1"]::after,
.listen-environment-overlay--animations-muted[data-fire="1"]::before,
.listen-environment-overlay--animations-muted[data-scanlines="1"]::before,
.listen-environment-overlay--animations-muted[data-cave="1"][data-fire="1"]::before {
  animation: none !important;
}

@keyframes listen-cozy-ember-pulse {
  0% {
    opacity: 0.52;
    transform: scale(0.9);
    filter: brightness(0.86);
  }
  42% {
    opacity: 1;
    transform: scale(1.1);
    filter: brightness(1.18);
  }
  100% {
    opacity: 0.68;
    transform: scale(0.96);
    filter: brightness(0.98);
  }
}

@keyframes listen-cozy-ember-bed-glow {
  0% {
    opacity: 0.58;
    filter: blur(3px) brightness(0.92);
  }
  100% {
    opacity: 0.92;
    filter: blur(4px) brightness(1.1);
  }
}

@keyframes listen-cozy-hearth-glow {
  0% {
    opacity: 0.46;
    transform: translateX(-50%) scale(0.92);
    filter: blur(8px) brightness(0.88);
  }
  38% {
    opacity: 0.86;
    transform: translateX(-50%) scale(1.08);
    filter: blur(10px) brightness(1.14);
  }
  68% {
    opacity: 0.58;
    transform: translateX(-50%) scale(0.98);
    filter: blur(9px) brightness(0.96);
  }
  100% {
    opacity: 0.78;
    transform: translateX(-50%) scale(1.05);
    filter: blur(11px) brightness(1.06);
  }
}

@keyframes listen-cozy-hearth-floor-glow {
  0% {
    opacity: 0.48;
    transform: scaleX(0.94) scaleY(0.96);
  }
  100% {
    opacity: 0.82;
    transform: scaleX(1.04) scaleY(1.03);
  }
}

.listen-environment-props.listen-env-reduced-motion .listen-env-cozy-hearth-flame,
.listen-environment-props.listen-env-reduced-motion .listen-env-cozy-ember-bed,
.listen-environment-props.listen-env-reduced-motion .listen-env-cozy-ember-coal,
.listen-environment-props.listen-env-reduced-motion .listen-env-cozy-floor-glow,
.listen-environment-props.listen-env-reduced-motion .listen-env-cozy-spark-host {
  animation: none !important;
}

.listen-environment-props.listen-env-reduced-motion .listen-env-cozy-spark-host {
  display: none;
}

.listen-environment-props.listen-env-reduced-motion .listen-env-cozy-hearth-flame::before,
.listen-environment-props.listen-env-reduced-motion .listen-env-cozy-ember-bed::before {
  animation: none !important;
  opacity: 0.55;
}

.listen-environment-props.listen-env-reduced-motion .listen-env-cozy-hearth-flame {
  opacity: 0.5;
}

.listen-environment-props.listen-env-reduced-motion .listen-env-smoke-column--cozy-hearth {
  opacity: 0.28;
}

/* ── Fantasy Tavern: animated flames over backdrop PNG torches ── */
.listen-env-tavern-scene {
  position: absolute;
  inset: 0;
}

/* Tune to env-fantasy-tavern.png (% = cover-sync stage). */
.listen-env-tavern-scene--backdrop {
  --tavern-torch-left: 22%;
  --tavern-torch-top: 25%;
  --tavern-torch-right-left: 89%;
  --tavern-torch-right-top:26%;
  --tavern-torch-width: 5.4%;
  --tavern-torch-height: 12%;
  --tavern-smoke-left: 22.5%;
  --tavern-smoke-right-left: 88%;
  --tavern-smoke-top: 22%;
  --tavern-smoke-width: 4.7%;
  --tavern-smoke-height: 14.7%;
}

/* Wall torch hardware — cave only (tavern uses PNG sconces). */
.listen-env-torch {
  position: absolute;
  left: max(17.5rem, 21.5%);
  top: clamp(30%, 36vh, 42%);
  width: min(64px, 11vw);
  height: min(180px, 26vh);
  z-index: 2;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.45));
}

body:has(.library-sidebar.collapsed) .listen-env-torch {
  left: max(2.75rem, 13.5%);
}

.listen-env-torch-mount {
  position: absolute;
  left: 50%;
  top: 0;
  width: min(18px, 3.2vw);
  height: min(12px, 2vh);
  margin-left: calc(min(18px, 3.2vw) * -0.5);
  border-radius: 2px;
  background: linear-gradient(180deg, #4a3020 0%, #2a180c 100%);
  box-shadow: inset 0 1px 0 rgba(255, 220, 180, 0.12);
}

.listen-env-torch-pole {
  position: absolute;
  left: 50%;
  top: min(10px, 1.6vh);
  width: min(6px, 1.1vw);
  height: min(72px, 11vh);
  margin-left: calc(min(6px, 1.1vw) * -0.5);
  border-radius: 2px;
  background: linear-gradient(90deg, #2a180c 0%, #5a4030 45%, #2a180c 100%);
}

.listen-env-torch-cup {
  position: absolute;
  left: 50%;
  bottom: min(52px, 8vh);
  width: min(34px, 6vw);
  height: min(28px, 4.5vh);
  margin-left: calc(min(34px, 6vw) * -0.5);
  border-radius: 0 0 42% 42%;
  background:
    linear-gradient(180deg, #3a3a44 0%, #1a1a22 72%),
    radial-gradient(ellipse 80% 40% at 50% 0%, rgba(255, 180, 80, 0.18) 0%, transparent 70%);
  box-shadow:
    inset 0 -3px 6px rgba(0, 0, 0, 0.45),
    0 2px 4px rgba(0, 0, 0, 0.35);
}

/* Shared CC0 fire sprite (hearth + torch) — sheet uses transparent alpha (not black fill). */
.listen-env-fire-sprite {
  --listen-fire-frames: 13;
  background-color: transparent;
  background-image: url("/api/immersion/image/tavern-hearth-fire-sheet.png");
  background-repeat: no-repeat;
  background-size: calc(var(--listen-fire-frames) * 100%) 100%;
  background-position: 0 0;
  mix-blend-mode: screen;
  pointer-events: none;
  animation: listen-fire-sprite var(--listen-fire-speed, 3.2s) steps(calc(var(--listen-fire-frames) - 1)) infinite;
}

.listen-env-torch .listen-env-torch-flame {
  position: absolute;
  left: 50%;
  bottom: min(72px, 11vh);
  width: min(42px, 6.5vw);
  height: min(66px, 10.5vh);
  transform: translateX(-50%);
  --listen-fire-speed: 2.9s;
  opacity: 0.78;
  filter: saturate(0.95) brightness(1.12) blur(0.2px);
}

/* Backdrop-aligned flames (env-fantasy-tavern.png sconces). */
.listen-env-tavern-scene--backdrop > .listen-env-torch-flame {
  position: absolute;
  bottom: auto;
  width: var(--tavern-torch-width);
  height: var(--tavern-torch-height);
  transform: translate(-50%, 0);
  --listen-fire-speed: 2.35s;
  opacity: 0.82;
  filter: saturate(0.96) brightness(1.14) blur(0.5px);
  z-index: 2;
}

.listen-env-torch-flame--tavern-left {
  left: var(--tavern-torch-left);
  top: var(--tavern-torch-top);
}

.listen-env-torch-flame--tavern-right {
  left: var(--tavern-torch-right-left);
  top: var(--tavern-torch-right-top);
}

/* Soft halo that breathes with the flame — separate from the sprite sheet cycle. */
.listen-env-torch-flame::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 8%;
  width: 140%;
  height: 130%;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(
    ellipse 40% 44% at 50% 58%,
    rgba(255, 210, 110, 0.42) 0%,
    rgba(255, 145, 45, 0.2) 34%,
    rgba(255, 95, 25, 0.06) 56%,
    transparent 68%
  );
  filter: blur(6px);
  z-index: -1;
  pointer-events: none;
  animation: listen-torch-glow-flicker 2.3s ease-in-out infinite alternate;
}

.listen-env-torch-flame.listen-env-fire-sprite {
  animation:
    listen-fire-sprite var(--listen-fire-speed, 2.35s) steps(calc(var(--listen-fire-frames) - 1)) infinite,
    listen-torch-flame-flicker 1.85s ease-in-out infinite alternate;
}

.listen-env-torch .listen-env-smoke-column--torch {
  bottom: min(118px, 18vh);
  opacity: 0.55;
}

.listen-env-smoke-column--tavern-left,
.listen-env-smoke-column--tavern-right {
  bottom: auto;
  opacity: 0.42;
  margin-left: 0;
  transform: translateX(-50%);
  width: var(--tavern-smoke-width);
  height: var(--tavern-smoke-height);
}

.listen-env-smoke-column--tavern-left {
  left: var(--tavern-smoke-left);
  top: var(--tavern-smoke-top);
}

.listen-env-smoke-column--tavern-right {
  left: var(--tavern-smoke-right-left);
  top: var(--tavern-smoke-top);
}

.listen-env-smoke-column--tavern-left .listen-env-smoke-wisp,
.listen-env-smoke-column--tavern-right .listen-env-smoke-wisp {
  width: 28%;
  height: 28%;
  margin-left: -14%;
}

.listen-env-smoke-column {
  position: absolute;
  left: 50%;
  bottom: min(118px, 18vh);
  width: min(48px, 8vw);
  height: min(100px, 16vh);
  margin-left: calc(min(48px, 8vw) * -0.5);
  pointer-events: none;
}

.listen-env-smoke-wisp {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: min(14px, 2.4vw);
  height: min(14px, 2.4vw);
  margin-left: calc(min(14px, 2.4vw) * -0.5);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(170, 170, 170, 0.5) 0%, transparent 72%);
  filter: blur(1.2px);
  opacity: 0;
  animation: listen-env-smoke-rise 4.8s ease-out infinite;
}

.listen-env-smoke-wisp--2 {
  animation-delay: 1.6s;
  margin-left: calc(min(14px, 2.4vw) * -0.35);
}

.listen-env-smoke-wisp--3 {
  animation-delay: 3.2s;
  margin-left: calc(min(14px, 2.4vw) * -0.65);
}

@keyframes listen-fire-sprite {
  to {
    background-position: 100% 0;
  }
}

@keyframes listen-torch-glow-flicker {
  0% {
    opacity: 0.42;
    transform: translateX(-50%) scale(0.9);
  }
  38% {
    opacity: 0.88;
    transform: translateX(-50%) scale(1.06);
  }
  62% {
    opacity: 0.58;
    transform: translateX(-50%) scale(0.96);
  }
  100% {
    opacity: 0.95;
    transform: translateX(-50%) scale(1.1);
  }
}

@keyframes listen-torch-flame-flicker {
  0% {
    opacity: 0.68;
    filter: saturate(0.9) brightness(1.02) blur(0.25px);
  }
  45% {
    opacity: 0.88;
    filter: saturate(1) brightness(1.22) blur(0.15px);
  }
  100% {
    opacity: 0.74;
    filter: saturate(0.94) brightness(1.08) blur(0.2px);
  }
}

@keyframes listen-env-smoke-rise {
  0% {
    opacity: 0;
    transform: translateY(0) scale(0.45);
  }
  12% {
    opacity: 0.55;
  }
  100% {
    opacity: 0;
    transform: translateY(min(-88px, -14vh)) scale(1.35);
  }
}

/* ── Noir City: GIMP mask layers (rain, lamp, city lights, smoke) ── */
.listen-env-noir-scene {
  position: absolute;
  inset: 0;
}

.listen-env-noir-scene--backdrop {
  /* Full-frame masks align to env-noir-city.png (1536×1024) via cover-sync stage.
     Tune: --noir-lamp-bulb-opacity, --noir-lamp-cone-opacity, --noir-lamp-cone-blur. */
  --noir-lamp-bulb-opacity: 0.88;
  --noir-lamp-cone-opacity: 0.72;
  --noir-lamp-cone-blur: 22px;
  --noir-lamp-bulb-blur: 5px;
  --noir-smoke-opacity: 0.38;
  --noir-smoke-clip-bottom: 18%;
  --noir-smoke-rise-dur: 22s;
  --noir-smoke-rise-start: 3.5%;
}

.listen-env-noir-mask-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
}

.listen-env-noir-mask-layer[data-noir-mask="art"] {
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-mode: luminance;
  mask-mode: luminance;
}

/* Desk cone / warm wash — env-noir-city-lamp-cone-mask.png */
.listen-env-noir-lamp-cone[data-noir-mask="art"] {
  z-index: 1;
  opacity: var(--noir-lamp-cone-opacity, 0.72);
  -webkit-mask-image: var(--noir-lamp-cone-mask-url);
  mask-image: var(--noir-lamp-cone-mask-url);
  background: radial-gradient(
    ellipse 88% 72% at 62% 42%,
    rgba(255, 196, 96, 0.55) 0%,
    rgba(255, 168, 64, 0.28) 38%,
    rgba(255, 140, 48, 0.1) 58%,
    rgba(255, 120, 40, 0.04) 72%,
    transparent 86%
  );
  filter: blur(var(--noir-lamp-cone-blur, 22px));
  mix-blend-mode: screen;
  animation: listen-noir-lamp-cone-flicker 9s ease-in-out infinite;
}

/* Side-leak glow — bulb opening stays transparent in mask so backdrop art shows through. */
.listen-env-noir-lamp-bulb[data-noir-mask="art"] {
  z-index: 2;
  opacity: var(--noir-lamp-bulb-opacity, 0.88);
  -webkit-mask-image: var(--noir-lamp-bulb-mask-url);
  mask-image: var(--noir-lamp-bulb-mask-url);
  background: radial-gradient(
    ellipse 120% 180% at 50% 18%,
    rgba(255, 212, 115, 0.72) 0%,
    rgba(255, 186, 82, 0.42) 34%,
    rgba(255, 158, 48, 0.16) 58%,
    transparent 78%
  );
  filter: blur(var(--noir-lamp-bulb-blur, 5px));
  mix-blend-mode: screen;
  animation: listen-noir-lamp-bulb-flicker 9s ease-in-out infinite;
  animation-delay: 0.05s;
}

/* Distant window lights — one span per mask dot, spawned from env-noir-city-lights-mask.png. */
.listen-env-noir-citylights-host {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
}

.listen-env-noir-city-light {
  position: absolute;
  transform: translate(-50%, -50%);
  border-radius: 1px;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0;
  filter: blur(1.8px) brightness(1.08);
  will-change: opacity, box-shadow;
}

.listen-env-noir-city-light--warm {
  background: #fff0d8;
}

.listen-env-noir-city-light--amber {
  background: #ffb860;
}

.listen-env-noir-city-light--red {
  background: #ff6848;
}

.listen-env-noir-city-light--cool {
  background: #dce8ff;
}

/* Rain streaks clipped to glass panes — env-noir-city-rain-mask.png */
.listen-env-noir-rain-stage {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 4;
  opacity: 0;
}

.listen-env-noir-rain-stage[data-noir-mask="art"] {
  opacity: 1;
  -webkit-mask-image: var(--noir-rain-mask-url);
  mask-image: var(--noir-rain-mask-url);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-mode: luminance;
  mask-mode: luminance;
}

.listen-env-noir-rain-streak {
  position: absolute;
  width: var(--noir-rain-width, 6px);
  height: var(--noir-rain-height, 24px);
  margin-left: calc(var(--noir-rain-width, 6px) * -0.5);
  border-radius: 50% / 46%;
  transform-origin: top center;
  background: radial-gradient(
    ellipse 92% 88% at 50% 22%,
    rgba(118, 132, 148, 0.62) 0%,
    rgba(98, 114, 130, 0.38) 45%,
    rgba(82, 98, 114, 0.12) 100%
  );
  filter: blur(0.45px);
  opacity: 0;
  animation: listen-noir-rain-slide var(--noir-rain-dur, 1.4s) linear forwards;
}

@keyframes listen-noir-rain-slide {
  0% {
    opacity: 0;
    transform: translateY(0) scale(0.45, 0.65);
  }
  8% {
    opacity: 0.52;
  }
  100% {
    opacity: 0;
    transform: translateY(var(--noir-rain-slide, 110px)) scale(1, 1);
  }
}

/* Smoke wisps — dual layers crossfade; host clips below the ashtray. */
.listen-env-noir-smoke-host {
  position: absolute;
  inset: 0;
  overflow: hidden;
  clip-path: inset(0 0 var(--noir-smoke-clip-bottom, 30%) 0);
  pointer-events: none;
  z-index: 5;
}

.listen-env-noir-smoke {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
}

.listen-env-noir-smoke[data-noir-mask="art"] {
  -webkit-mask-image: var(--noir-smoke-mask-url);
  mask-image: var(--noir-smoke-mask-url);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-mode: luminance;
  mask-mode: luminance;
  background: linear-gradient(
    0deg,
    rgba(180, 188, 198, 0.55) 0%,
    rgba(210, 218, 228, 0.38) 38%,
    rgba(230, 236, 242, 0.22) 72%,
    rgba(240, 244, 248, 0.08) 100%
  );
  filter: blur(2px);
  mix-blend-mode: screen;
  animation: listen-noir-smoke-rise var(--noir-smoke-rise-dur, 22s) linear infinite;
}

.listen-env-noir-smoke--b[data-noir-mask="art"] {
  animation-delay: calc(var(--noir-smoke-rise-dur, 22s) * -0.5);
}

@keyframes listen-noir-lamp-cone-flicker {
  0%,
  72%,
  100% {
    opacity: 0.78;
    filter: blur(var(--noir-lamp-cone-blur, 22px)) brightness(1);
  }
  73% {
    opacity: 0.48;
    filter: blur(var(--noir-lamp-cone-blur, 22px)) brightness(0.78);
  }
  74% {
    opacity: 0.92;
    filter: blur(var(--noir-lamp-cone-blur, 22px)) brightness(1.18);
  }
  75% {
    opacity: 0.58;
    filter: blur(var(--noir-lamp-cone-blur, 22px)) brightness(0.86);
  }
  76% {
    opacity: 0.82;
    filter: blur(var(--noir-lamp-cone-blur, 22px)) brightness(1.06);
  }
  84% {
    opacity: 0.68;
    filter: blur(var(--noir-lamp-cone-blur, 22px)) brightness(0.9);
  }
  85% {
    opacity: 0.88;
    filter: blur(var(--noir-lamp-cone-blur, 22px)) brightness(1.1);
  }
}

@keyframes listen-noir-lamp-bulb-flicker {
  0%,
  72%,
  100% {
    opacity: 0.78;
    filter: blur(var(--noir-lamp-bulb-blur, 5px)) brightness(1);
  }
  73% {
    opacity: 0.48;
    filter: blur(var(--noir-lamp-bulb-blur, 5px)) brightness(0.78);
  }
  74% {
    opacity: 0.92;
    filter: blur(var(--noir-lamp-bulb-blur, 5px)) brightness(1.18);
  }
  75% {
    opacity: 0.58;
    filter: blur(var(--noir-lamp-bulb-blur, 5px)) brightness(0.86);
  }
  76% {
    opacity: 0.82;
    filter: blur(var(--noir-lamp-bulb-blur, 5px)) brightness(1.06);
  }
  84% {
    opacity: 0.68;
    filter: blur(var(--noir-lamp-bulb-blur, 5px)) brightness(0.9);
  }
  85% {
    opacity: 0.88;
    filter: blur(var(--noir-lamp-bulb-blur, 5px)) brightness(1.1);
  }
}

@keyframes listen-noir-smoke-rise {
  0% {
    transform: translateY(var(--noir-smoke-rise-start, 3.5%));
    opacity: 0;
  }
  8% {
    transform: translateY(var(--noir-smoke-rise-start, 3.5%));
    opacity: 0;
  }
  18% {
    opacity: 0.34;
  }
  72% {
    opacity: 0.3;
  }
  84% {
    opacity: 0;
  }
  100% {
    transform: translateY(-14%);
    opacity: 0;
  }
}

/* ── Sci-Fi Hologram: GIMP mask layers (HUD, pillars, floor, stars) ── */
.listen-env-scifi-scene {
  position: absolute;
  inset: 0;
}

.listen-env-scifi-scene--backdrop {
  --scifi-hud-left-opacity: 0.72;
  --scifi-hud-right-opacity: 0.58;
  --scifi-accent-glow: rgba(0, 220, 255, 0.82);
}

.listen-env-scifi-mask-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
}

.listen-env-scifi-mask-layer[data-scifi-mask="art"] {
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-mode: luminance;
  mask-mode: luminance;
  mix-blend-mode: screen;
}

/* Floor ring — env-sci-fi-hologram-floor-ring-mask.png */
.listen-env-scifi-floor-ring[data-scifi-mask="art"] {
  z-index: 1;
  opacity: 0.68;
  overflow: hidden;
  -webkit-mask-image: var(--scifi-floor-ring-mask-url);
  mask-image: var(--scifi-floor-ring-mask-url);
  background: rgba(0, 190, 215, 0.12);
  filter: blur(0.45px);
}

.listen-env-scifi-floor-ring[data-scifi-mask="art"]::after {
  content: "";
  position: absolute;
  left: -4%;
  right: -4%;
  height: 38%;
  top: 112%;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(61, 214, 245, 0.04) 36%,
    rgba(100, 230, 255, 0.22) 50%,
    rgba(61, 214, 245, 0.04) 64%,
    transparent 100%
  );
  filter: blur(1px);
  animation: listen-scifi-floor-wave 5.5s ease-in-out infinite;
}

/* HUD pillar segments — env-sci-fi-hologram-cylinder-lights-mask.png (dots spawned in JS) */
.listen-env-scifi-cylinder-lights-host {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}

.listen-env-scifi-cylinder-light {
  position: absolute;
  transform: translate(-50%, -50%);
  border-radius: 1px;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0;
  filter: blur(0.9px) brightness(1.14);
  will-change: opacity, box-shadow;
}

/* Vertical strip-of-4 — env-sci-fi-hologram-pillar-lights-mask.png */
.listen-env-scifi-pillar-lights[data-scifi-mask="art"] {
  z-index: 3;
  opacity: 0.85;
  -webkit-mask-image: var(--scifi-pillar-lights-mask-url);
  mask-image: var(--scifi-pillar-lights-mask-url);
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(0, 230, 255, 0.15) 8%,
    rgba(0, 240, 255, 0.95) 16%,
    rgba(0, 200, 240, 0.35) 28%,
    transparent 40%,
    transparent 100%
  );
  background-size: 100% 260%;
  animation: listen-scifi-pillar-chase 3.8s linear infinite;
}

/* Console edge strips — env-sci-fi-hologram-console-edges-mask.png */
.listen-env-scifi-console-edges[data-scifi-mask="art"] {
  z-index: 4;
  opacity: 0.8;
  -webkit-mask-image: var(--scifi-console-edges-mask-url);
  mask-image: var(--scifi-console-edges-mask-url);
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(0, 230, 255, 0.2) 10%,
    rgba(0, 245, 255, 0.92) 18%,
    rgba(0, 190, 230, 0.35) 30%,
    transparent 42%,
    transparent 100%
  );
  background-size: 280% 100%;
  animation: listen-scifi-console-chase 4.2s linear infinite;
}

/* Left HUD panel — env-sci-fi-hologram-hud-left-mask.png */
.listen-env-scifi-hud-left[data-scifi-mask="art"] {
  z-index: 5;
  opacity: var(--scifi-hud-left-opacity, 0.72);
  -webkit-mask-image: var(--scifi-hud-left-mask-url);
  mask-image: var(--scifi-hud-left-mask-url);
  background: radial-gradient(
    ellipse 92% 84% at 42% 48%,
    rgba(0, 230, 255, 0.72) 0%,
    rgba(0, 190, 240, 0.38) 48%,
    rgba(0, 150, 210, 0.12) 72%,
    transparent 92%
  );
  animation: listen-scifi-hud-pulse 4.6s ease-in-out infinite;
}

/* Right HUD panel — env-sci-fi-hologram-hud-right-mask.png */
.listen-env-scifi-hud-right[data-scifi-mask="art"] {
  z-index: 6;
  opacity: var(--scifi-hud-right-opacity, 0.58);
  -webkit-mask-image: var(--scifi-hud-right-mask-url);
  mask-image: var(--scifi-hud-right-mask-url);
  background: radial-gradient(
    ellipse 96% 88% at 58% 48%,
    rgba(0, 210, 240, 0.5) 0%,
    rgba(0, 170, 220, 0.22) 52%,
    rgba(0, 140, 190, 0.07) 76%,
    transparent 94%
  );
  animation: listen-scifi-hud-right-pulse 6.4s ease-in-out infinite;
  animation-delay: 2.4s;
  filter: blur(0.35px);
}

/* Viewport stars — env-sci-fi-hologram-stars-mask.png (dots spawned in JS) */
.listen-env-scifi-stars-host {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 7;
}

.listen-env-scifi-star {
  position: absolute;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0;
  filter: blur(0.8px) brightness(1.1);
  will-change: opacity, box-shadow;
}

@keyframes listen-scifi-pillar-chase {
  0% {
    background-position: 0% 0%;
  }
  100% {
    background-position: 0% 100%;
  }
}

@keyframes listen-scifi-floor-wave {
  0% {
    top: 112%;
  }
  100% {
    top: 58%;
  }
}

@keyframes listen-scifi-hud-right-pulse {
  0%,
  100% {
    opacity: 0.26;
    filter: blur(0.35px) brightness(0.9);
  }
  50% {
    opacity: 0.6;
    filter: blur(0.45px) brightness(1.05);
  }
}

@keyframes listen-scifi-console-chase {
  0% {
    background-position: 0% 0%;
  }
  100% {
    background-position: 100% 0%;
  }
}

@keyframes listen-scifi-hud-pulse {
  0%,
  100% {
    opacity: 0.35;
    filter: brightness(0.92);
  }
  50% {
    opacity: 0.82;
    filter: brightness(1.12);
  }
}

/* ── Gothic Cathedral: fog, GIMP masks, gargoyle eyes ── */
.listen-env-gothic-scene {
  position: absolute;
  inset: 0;
}

.listen-env-gothic-scene--backdrop {
  --gothic-floor-opacity: 0.48;
}

.listen-env-gothic-fog-host {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}

.listen-env-gothic-fog-patch {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(
    ellipse 74% 62% at 50% 50%,
    rgba(215, 224, 238, 0.48) 0%,
    rgba(190, 202, 220, 0.24) 38%,
    rgba(165, 178, 200, 0.08) 62%,
    transparent 78%
  );
  filter: blur(14px);
  opacity: 0;
  mix-blend-mode: screen;
  animation: listen-gothic-fog-drift var(--gothic-fog-dur, 28s) linear forwards;
}

@keyframes listen-gothic-fog-drift {
  0% {
    opacity: 0;
    left: var(--gothic-fog-from-x, -40%);
    top: var(--gothic-fog-from-y, 40%);
    transform: scale(0.88);
  }
  7% {
    opacity: 0.76;
  }
  93% {
    opacity: 0.52;
  }
  100% {
    opacity: 0;
    left: var(--gothic-fog-to-x, 108%);
    top: var(--gothic-fog-to-y, 36%);
    transform: scale(1.06);
  }
}

.listen-env-gothic-mask-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
}

.listen-env-gothic-mask-layer[data-gothic-mask="art"] {
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-mode: luminance;
  mask-mode: luminance;
  mix-blend-mode: screen;
}

/* Floor reflections — env-gothic-cathedral-floor-light-mask.png */
.listen-env-gothic-floor-light[data-gothic-mask="art"] {
  z-index: 2;
  opacity: var(--gothic-floor-opacity, 0.72);
  -webkit-mask-image: var(--gothic-floor-light-mask-url);
  mask-image: var(--gothic-floor-light-mask-url);
  background:
    radial-gradient(ellipse 92% 80% at 22% 86%, rgba(80, 140, 255, 0.32) 0%, transparent 74%),
    radial-gradient(ellipse 92% 80% at 50% 84%, rgba(180, 120, 220, 0.26) 0%, transparent 74%),
    radial-gradient(ellipse 92% 80% at 78% 86%, rgba(220, 100, 90, 0.28) 0%, transparent 74%);
  animation: listen-gothic-floor-light 7.2s ease-in-out infinite;
  animation-delay: 1.1s;
}

.listen-env-gothic-gargoyle-eyes-host {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 4;
}

.listen-env-gothic-gargoyle-eye {
  position: absolute;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: rgba(120, 18, 28, 0.92);
  box-shadow:
    0 0 8px rgba(140, 22, 32, 0.75),
    0 0 18px rgba(90, 12, 22, 0.4);
  opacity: 0.12;
  pointer-events: none;
  will-change: opacity, transform;
}

@keyframes listen-gothic-floor-light {
  0%,
  100% {
    opacity: 0.28;
    filter: brightness(0.9);
  }
  45% {
    opacity: 0.52;
    filter: brightness(1.02);
  }
  62% {
    opacity: 0.36;
    filter: brightness(0.94);
  }
}

.listen-environment-props.listen-env-reduced-motion .listen-env-fire-sprite,
.listen-environment-props.listen-env-reduced-motion .listen-env-smoke-wisp,
.listen-environment-props.listen-env-reduced-motion .listen-env-noir-lamp-bulb,
.listen-environment-props.listen-env-reduced-motion .listen-env-noir-lamp-cone,
.listen-environment-props.listen-env-reduced-motion .listen-env-noir-city-light,
.listen-environment-props.listen-env-reduced-motion .listen-env-noir-smoke,
.listen-environment-props.listen-env-reduced-motion .listen-env-scifi-mask-layer,
.listen-environment-props.listen-env-reduced-motion .listen-env-scifi-mask-layer::after,
.listen-environment-props.listen-env-reduced-motion .listen-env-scifi-star,
.listen-environment-props.listen-env-reduced-motion .listen-env-scifi-cylinder-light,
.listen-environment-props.listen-env-reduced-motion .listen-env-gothic-fog-patch,
.listen-environment-props.listen-env-reduced-motion .listen-env-gothic-gargoyle-eye,
.listen-environment-props.listen-env-reduced-motion .listen-env-gothic-mask-layer {
  animation: none !important;
  opacity: 0.45;
}

.listen-environment-props.listen-env-reduced-motion .listen-env-noir-rain-stage,
.listen-environment-props.listen-env-reduced-motion .listen-env-gothic-fog-host {
  display: none;
}

.listen-environment-props.listen-env-reduced-motion .listen-env-torch-flame::before {
  animation: none !important;
  opacity: 0.55;
}

.listen-environment-overlay {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.listen-environment-overlay[hidden] {
  display: none !important;
}

/* Cozy hearth — warm fire flicker on edges */
.listen-environment-overlay[data-fire="1"]::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 38% 55% at 8% 88%, rgba(255, 120, 40, 0.22) 0%, transparent 70%),
    radial-gradient(ellipse 32% 48% at 92% 82%, rgba(255, 90, 30, 0.16) 0%, transparent 68%);
  animation: listen-fire-flicker 2.8s ease-in-out infinite alternate;
}

/* Backdrop PNG carries hearth/window — lighter synthetic fire + warm wash. */
.listen-environment-overlay[data-environment="cozy-hearth"][data-fire="1"]::before {
  background:
    radial-gradient(ellipse 34% 48% at 12% 90%, rgba(255, 120, 40, 0.12) 0%, transparent 68%),
    radial-gradient(ellipse 28% 40% at 88% 84%, rgba(255, 90, 30, 0.08) 0%, transparent 65%);
}

.listen-environment-overlay[data-warm="1"]::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 90% 80% at 50% 50%, rgba(255, 180, 100, 0.06) 0%, transparent 70%);
  mix-blend-mode: screen;
}

.listen-environment-overlay[data-environment="cozy-hearth"][data-warm="1"]::after {
  background: radial-gradient(ellipse 88% 78% at 50% 50%, rgba(255, 180, 100, 0.035) 0%, transparent 68%);
}

@keyframes listen-fire-flicker {
  0% {
    opacity: 0.72;
    filter: brightness(0.95);
  }
  50% {
    opacity: 1;
    filter: brightness(1.08);
  }
  100% {
    opacity: 0.82;
    filter: brightness(0.98);
  }
}

/* Sci-fi scanlines */
.listen-environment-overlay[data-scanlines="1"]::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    rgba(0, 220, 255, 0.03) 0px,
    rgba(0, 220, 255, 0.03) 1px,
    transparent 1px,
    transparent 4px
  );
  animation: listen-scanline-drift 8s linear infinite;
}

.listen-environment-overlay[data-scanlines="1"]::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 60% at 50% 40%, rgba(0, 180, 255, 0.08) 0%, transparent 70%);
}

/* Backdrop PNG already carries HUD — lighter scanlines + edge vignette. */
.listen-environment-overlay[data-environment="sci-fi-hologram"][data-scanlines="1"]::before {
  background: repeating-linear-gradient(
    0deg,
    rgba(0, 220, 255, 0.016) 0px,
    rgba(0, 220, 255, 0.016) 1px,
    transparent 1px,
    transparent 4px
  );
}

.listen-environment-overlay[data-environment="sci-fi-hologram"][data-scanlines="1"]::after {
  background:
    radial-gradient(ellipse 48% 44% at 50% 42%, rgba(0, 180, 255, 0.035) 0%, transparent 68%),
    radial-gradient(ellipse 105% 95% at 50% 50%, transparent 32%, rgba(0, 0, 0, 0.38) 100%);
}

@keyframes listen-scanline-drift {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(4px);
  }
}

/* Gothic stained-glass hints (layered over backdrop art) */
.listen-environment-overlay[data-gothic="1"]::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 18% 22%, rgba(80, 120, 220, 0.12) 0%, transparent 28%),
    radial-gradient(circle at 82% 28%, rgba(120, 60, 180, 0.1) 0%, transparent 26%),
    radial-gradient(ellipse 100% 80% at 50% 100%, rgba(0, 0, 0, 0.4) 0%, transparent 55%);
  mix-blend-mode: screen;
}

/* Noir venetian blinds */
.listen-environment-overlay[data-noir="1"]::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    -18deg,
    rgba(0, 0, 0, 0) 0px,
    rgba(0, 0, 0, 0) 10px,
    rgba(0, 0, 0, 0.14) 10px,
    rgba(0, 0, 0, 0.14) 18px
  );
  mix-blend-mode: multiply;
}

.listen-intermission-card {
  position: fixed;
  inset: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  padding: 2rem;
  pointer-events: none;
  background: rgba(0, 0, 0, 0.55);
  opacity: 0;
  transition: opacity 0.45s ease;
}

.listen-intermission-card[hidden] {
  display: none !important;
}

.listen-intermission-card.is-visible {
  opacity: 1;
}

.listen-intermission-kicker {
  margin: 0;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--spotlight, #d4a853);
}

.listen-intermission-title {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.4rem, 4vw, 2rem);
  font-weight: 600;
  color: #f5e6c8;
  text-align: center;
}

.listen-intermission-sub {
  margin: 0;
  font-size: 0.88rem;
  color: rgba(220, 200, 170, 0.85);
  text-align: center;
}

/* Full-screen velvet curtain opening before chapter card (Cinema). */
.listen-theater-curtain {
  position: fixed;
  inset: 0;
  z-index: 7;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.listen-theater-curtain[hidden] {
  display: none !important;
}

.listen-theater-curtain.is-visible {
  opacity: 1;
}

.listen-theater-curtain-fallback {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: none;
}

.listen-theater-curtain.use-fallback .listen-theater-curtain-fallback {
  display: flex;
}

.listen-theater-curtain.use-fallback .listen-theater-curtain-video {
  display: none;
}

.listen-theater-curtain-panel {
  flex: 1;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.42) 0%, transparent 16%, transparent 84%, rgba(0, 0, 0, 0.42) 100%),
    repeating-linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.03) 0 3px,
      transparent 3px 14px
    ),
    linear-gradient(180deg, #4a0510 0%, #9b1022 42%, #6e0816 100%);
  box-shadow: inset 0 0 48px rgba(0, 0, 0, 0.55);
  transform: translateX(0);
  transition: transform 1.85s cubic-bezier(0.42, 0, 0.22, 1);
}

.listen-theater-curtain-panel--left {
  border-right: 1px solid rgba(0, 0, 0, 0.45);
}

.listen-theater-curtain-panel--right {
  border-left: 1px solid rgba(0, 0, 0, 0.45);
}

.listen-theater-curtain.is-opening-fallback .listen-theater-curtain-panel--left {
  transform: translateX(-102%);
}

.listen-theater-curtain.is-opening-fallback .listen-theater-curtain-panel--right {
  transform: translateX(102%);
}

.listen-theater-curtain-video {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

.listen-skip-intro-animations-hint {
  font-size: 0.72rem;
  line-height: 1.35;
  opacity: 0.82;
}

.listen-environment-background-sound-row[hidden],
.listen-environment-background-animations-row[hidden] {
  display: none !important;
}

.listen-end-credits {
  position: fixed;
  inset: 0;
  z-index: 6;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem 1.5rem min(12vh, 6.5rem);
  pointer-events: none;
  background: radial-gradient(
    ellipse 72% 58% at 50% 42%,
    rgba(0, 0, 0, 0.62) 0%,
    rgba(0, 0, 0, 0.88) 100%
  );
  overflow: hidden;
}

.listen-end-credits.is-book-anchored {
  inset: auto;
  z-index: 28;
  padding: 1.25rem 1rem 1.5rem;
  border-radius: 6px;
  /* Match closed back-cover tones; keep fully opaque so decorative lettering does not bleed through. */
  background: linear-gradient(145deg, #2a1810 0%, #1a0f08 48%, #120904 100%);
  box-shadow:
    inset 0 0 0 1px rgba(180, 140, 60, 0.22),
    0 10px 32px rgba(0, 0, 0, 0.45);
}

.listen-atmosphere-host.is-end-credits-active .listen-book-the-end {
  visibility: hidden;
}

.listen-end-credits[hidden] {
  display: none !important;
}

.listen-end-credits-kicker {
  margin: 0 0 0.35rem;
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(212, 168, 83, 0.85);
}

.listen-end-credits-title {
  margin: 0 0 1rem;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.6rem, 5vw, 2.4rem);
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0.12em;
  color: #f8edd4;
}

.listen-end-credits-cast {
  list-style: none;
  margin: 0;
  padding: 0;
  width: min(22rem, 100%);
  text-align: center;
  transform: translateY(10px);
  opacity: 0;
}

.listen-end-credits.is-rolling .listen-end-credits-cast {
  animation: listen-credits-roll 5.5s ease-out forwards;
}

.listen-end-credits-row {
  margin: 0.55rem 0;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.listen-end-credits-tagline {
  margin: 1.2rem 0 0;
  font-size: 0.65rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(180, 160, 130, 0.65);
  opacity: 0;
}

.listen-end-credits.is-rolling .listen-end-credits-tagline {
  animation: listen-credits-tagline-in 0.8s ease 4.2s forwards;
}

@keyframes listen-credits-roll {
  0% {
    transform: translateY(10px);
    opacity: 0;
  }
  18% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes listen-credits-tagline-in {
  to {
    opacity: 1;
  }
}

/* Book close ceremony — all Cinema books (not demo-only) */
.listen-atmosphere-host.is-book-closing[data-reader-layout="book"]
  .listen-book-page-flip {
  transform-origin: left center;
  animation: listen-demo-book-page-close 1.4s cubic-bezier(0.42, 0.02, 0.18, 1) forwards;
}

.listen-atmosphere-host.is-book-closing[data-reader-layout="book"]
  .listen-spread-page--current {
  animation: listen-demo-book-left-dim 1.4s ease forwards;
}

.listen-atmosphere-host.is-book-closed[data-reader-layout="book"]
  .listen-book-page-flip {
  transform: rotateY(-178deg);
  filter: brightness(0.78);
}

.listen-atmosphere-host.is-book-closing[data-reader-layout="web"],
.listen-atmosphere-host.is-book-closed[data-reader-layout="web"] {
  animation: listen-web-close-fade 1.2s ease forwards;
}

@keyframes listen-web-close-fade {
  to {
    filter: brightness(0.72);
  }
}

@media (prefers-reduced-motion: reduce) {
  .listen-location-wipe.is-wiping,
  .listen-environment-overlay[data-fire="1"]::before,
  .listen-env-drip,
  .listen-env-splash-ring,
  .listen-env-water-drip,
  .listen-env-water-splash-ring,
  .listen-env-fire-sprite,
  .listen-env-smoke-wisp {
    animation: none !important;
  }
  .listen-snow-flake,
  .listen-end-credits.is-rolling .listen-end-credits-cast,
  .listen-theater-curtain.is-opening-fallback .listen-theater-curtain-panel {
    animation: none !important;
    transition: none !important;
  }

  .listen-theater-curtain.is-opening-fallback .listen-theater-curtain-panel--left,
  .listen-theater-curtain.is-opening-fallback .listen-theater-curtain-panel--right {
    transform: translateX(0);
  }
  .listen-atmosphere-host.is-book-closing[data-reader-layout="book"]
    .listen-book-page-flip {
    animation: none !important;
  }

  .listen-atmosphere-host.is-book-opening[data-reader-layout="book"] .listen-book-closed-overlay,
  .listen-atmosphere-host.is-book-opening-flip[data-reader-layout="book"] .listen-book-closed-overlay,
  .listen-atmosphere-host.is-book-opening-flip[data-reader-layout="book"]
    .listen-spread-page--current
    .listen-book-page-body,
  .listen-atmosphere-host.is-book-opening-flip[data-reader-layout="book"]
    .listen-spread-page--companion
    .listen-book-page-body,
  .listen-atmosphere-host.is-book-opening-flip[data-reader-layout="book"]
    .listen-spread-page--opening-cover
    #listen-right-page-image-slot {
    animation: none !important;
    transition: none !important;
  }

  .listen-house-lights-dim.is-dimmed {
    background: rgba(0, 0, 0, 0.35);
    transition: none;
  }

  .listen-rain-overlay,
  .listen-snow-overlay,
  .listen-environment-backdrop,
  .listen-environment-props,
  .listen-mood-vignette {
    transform: none !important;
  }
}

/* Parallax-ready atmosphere layers */
.listen-rain-overlay,
.listen-snow-overlay,
.listen-environment-backdrop,
.listen-environment-overlay,
.listen-environment-props,
.listen-mood-vignette {
  will-change: transform;
  transition: transform 0.12s linear;
}

/* Listening environments are Listen-tab only (prefs may vary per book). */
body:not(.wizard-step-listen) .listen-environment-backdrop,
body:not(.wizard-step-listen) .listen-environment-overlay,
body:not(.wizard-step-listen) .listen-environment-props,
body:not(.wizard-step-listen) .listen-snow-overlay,
body:not(.wizard-step-listen) .listen-mood-vignette {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Dynamic mood vignette (director-driven) */
.listen-mood-vignette {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: calc(var(--vignette-strength, 0.35) * 0.95);
  background: radial-gradient(
    ellipse 72% 68% at 50% 48%,
    transparent 42%,
    rgba(0, 0, 0, 0.55) 100%
  );
}

.listen-mood-vignette[hidden] {
  display: none !important;
}

.listen-mood-vignette[data-mood="tension"],
.listen-mood-vignette[data-mood="mystery"] {
  background: radial-gradient(
    ellipse 58% 52% at 50% 50%,
    transparent 28%,
    rgba(8, 16, 36, 0.72) 100%
  );
}

.listen-mood-vignette[data-mood="romance"] {
  background: radial-gradient(
    ellipse 78% 70% at 50% 50%,
    transparent 45%,
    rgba(48, 18, 8, 0.45) 100%
  );
}

.listen-mood-vignette[data-mood="action"] {
  background: radial-gradient(
    ellipse 68% 62% at 50% 50%,
    transparent 38%,
    rgba(36, 4, 4, 0.52) 100%
  );
}

.listen-mood-vignette[data-horror="1"] {
  background: radial-gradient(
    ellipse 48% 42% at 50% 52%,
    transparent 18%,
    rgba(0, 0, 0, 0.88) 100%
  );
}

/* Fantasy tavern — edge vignette + floor warmth (no wood grain; PNG carries timber). */
.listen-environment-overlay[data-tavern="1"]::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(48, 28, 12, 0.28) 0%, transparent 8%, transparent 92%, rgba(48, 28, 12, 0.28) 100%),
    radial-gradient(ellipse 55% 45% at 50% 92%, rgba(255, 160, 60, 0.1) 0%, transparent 70%);
  mix-blend-mode: multiply;
}

.listen-environment-overlay[data-tavern="1"]::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 60% at 50% 100%, rgba(255, 140, 50, 0.1) 0%, transparent 65%);
  animation: listen-tavern-flicker 3.4s ease-in-out infinite alternate;
}

/* Backdrop PNG is detailed — drop synthetic overlays entirely. */
.listen-environment-overlay[data-environment="fantasy-tavern"][data-tavern="1"]::before {
  background: none;
  content: none;
}

.listen-environment-overlay[data-environment="fantasy-tavern"][data-tavern="1"]::after {
  background: radial-gradient(ellipse 70% 50% at 50% 100%, rgba(255, 140, 50, 0.06) 0%, transparent 65%);
}

@keyframes listen-tavern-flicker {
  0% {
    opacity: 0.75;
  }
  100% {
    opacity: 1;
  }
}

/* Horror shadow environment — persistent tight vignette */
.listen-environment-overlay[data-horror="1"]::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 42% 38% at 50% 54%,
    transparent 12%,
    rgba(0, 0, 0, 0.78) 100%
  );
}

/* Backdrop PNG carries the horror grade — no extra full-screen vignette. */
.listen-atmosphere-host[data-listen-environment="horror-shadow"]
  .listen-environment-overlay[data-horror="1"]::before {
  content: none;
}

.listen-atmosphere-host[data-listen-environment="horror-shadow"] .listen-atmosphere-overlay {
  background: transparent;
  box-shadow: none;
}

/* Director mood vignettes only (tension etc.) — keep subtle on horror backdrop. */
.listen-atmosphere-host[data-listen-environment="horror-shadow"] .listen-mood-vignette {
  opacity: calc(var(--vignette-strength, 0.35) * 0.55);
  background: radial-gradient(
    ellipse 78% 72% at 50% 48%,
    transparent 50%,
    rgba(0, 0, 0, 0.42) 100%
  );
}

/* Darkened cave — stone darkness with warm fire at the floor */
.listen-environment-overlay[data-cave="1"]::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 46% 40% at 50% 52%,
    transparent 14%,
    rgba(4, 8, 14, 0.82) 100%
  );
}

.listen-environment-overlay[data-cave="1"][data-fire="1"]::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 52% 34% at 50% 96%, rgba(255, 120, 40, 0.26) 0%, transparent 72%),
    radial-gradient(ellipse 36% 28% at 18% 92%, rgba(255, 100, 32, 0.14) 0%, transparent 68%),
    radial-gradient(ellipse 32% 26% at 84% 90%, rgba(255, 90, 28, 0.1) 0%, transparent 65%);
  animation: listen-cave-floor-glow 4.4s ease-in-out infinite alternate;
}

.listen-environment-props--effects-muted .listen-env-water-pool,
.listen-environment-props--effects-muted .listen-env-drips,
.listen-environment-props--effects-muted .listen-env-blood-pool,
.listen-environment-props--effects-muted .listen-env-knife {
  visibility: hidden !important;
}

.listen-environment-props--effects-muted .listen-env-water-drip,
.listen-environment-props--effects-muted .listen-env-water-splash-ring,
.listen-environment-props--effects-muted .listen-env-water-droplet,
.listen-environment-props--effects-muted .listen-env-drip,
.listen-environment-props--effects-muted .listen-env-splash-ring,
.listen-environment-props--effects-muted .listen-env-blood-droplet {
  animation: none !important;
  opacity: 0 !important;
}

.listen-atmosphere-host[data-listen-environment="darkened-cave"] .listen-atmosphere-overlay {
  background: rgba(6, 10, 16, 0.12);
  box-shadow: inset 0 0 100px rgba(0, 0, 0, 0.35);
}

.listen-atmosphere-host[data-listen-environment="fantasy-tavern"] .listen-atmosphere-overlay {
  box-shadow: inset 0 0 80px rgba(120, 70, 30, 0.12);
}

/* ── Film grammar + typography/camera (listen_cinema.js) ── */

.listen-scene-card {
  position: fixed;
  inset: 0;
  z-index: 5;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0 1.5rem 18vh;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.55s ease;
}

.listen-scene-card[hidden] {
  display: none !important;
}

.listen-scene-card.is-visible {
  opacity: 1;
}

.listen-scene-card-label {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.1rem, 3.2vw, 1.55rem);
  font-style: italic;
  letter-spacing: 0.06em;
  color: rgba(245, 230, 200, 0.92);
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.65);
  text-align: center;
}

.listen-atmosphere-host.listen-atmosphere-crossfade .listen-atmosphere-overlay {
  animation: listen-atmosphere-crossfade 0.82s ease;
}

@keyframes listen-atmosphere-crossfade {
  0% {
    opacity: 0.35;
  }
  45% {
    opacity: 0.08;
  }
  100% {
    opacity: 1;
  }
}

.listen-atmosphere-host.listen-film-silence-beat,
.listen-text-scroll.listen-film-silence-beat {
  filter: brightness(0.72);
  transition: filter 0.35s ease;
}

.listen-atmosphere-host.listen-film-silence-beat .listen-text {
  opacity: 0.55;
}

/* Camera: Ken Burns on chapter art during long narration */
.listen-illustration-bg.listen-camera-kenburns-layer {
  animation: listen-kenburns-pan 22s ease-in-out forwards;
  transform-origin: center center;
}

.listen-atmosphere-host.listen-camera-kenburns:not([data-reader-layout="book"])
  .listen-chapter-art
  img,
.listen-atmosphere-host.listen-camera-kenburns:not([data-reader-layout="book"])
  .listen-illustration-bg {
  animation: listen-kenburns-pan 22s ease-in-out forwards;
}

@keyframes listen-kenburns-pan {
  0% {
    transform: scale(1.04) translate(0, 0);
  }
  100% {
    transform: scale(1.12) translate(-1.8%, -1.2%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .listen-atmosphere-host.listen-atmosphere-crossfade .listen-atmosphere-overlay,
  .listen-illustration-bg.listen-camera-kenburns-layer,
  .listen-atmosphere-host.listen-camera-kenburns:not([data-reader-layout="book"])
    .listen-chapter-art
    img,
  .listen-atmosphere-host.listen-camera-kenburns:not([data-reader-layout="book"])
    .listen-illustration-bg {
    animation: none !important;
  }
}

.listen-atmosphere-host[data-reader-layout="web"]
  #listen-in-scene-body
  > #listen-scene-candle:not(.is-floating) {
  display: none !important;
}

.pack-cast-edit-banner {
  margin: 0.35rem 0 0;
  padding: 0.45rem 0.75rem;
  border-radius: 0.45rem;
  background: color-mix(in srgb, var(--accent, #c9a227) 16%, var(--bg));
  border: 1px solid color-mix(in srgb, var(--accent, #c9a227) 35%, transparent);
  color: var(--text);
  font-size: 0.9rem;
  line-height: 1.4;
}

body.pack-draft-cast-edit #cast-gold-verification-details,
body.pack-draft-cast-edit #cast-dev-metrics-details,
body.pack-draft-cast-edit #btn-refresh-cast,
body.pack-draft-cast-edit #btn-review-queue,
body.pack-draft-cast-edit #btn-add-cast,
body.pack-draft-cast-edit .cast-min-lines,
body.pack-draft-cast-edit .cast-refresh-wrap {
  display: none !important;
}

.cast-merge-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.65rem;
  margin-top: 1rem;
  padding-top: 0.85rem;
  border-top: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
}

.cast-merge-label {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 12rem;
  flex: 1 1 12rem;
}

/* Story mode (dialog only) — restore pre-paragraph demo spread height and cover-fit art.
 * Reading mode (full paragraph) uses .listen-page-image-slot rules above; untouched here. */
.listen-atmosphere-host[data-display-format="dialog"][data-reader-layout="book"]
  .listen-spread-pages-row {
  height: clamp(32rem, 74vh, 36rem);
  min-height: clamp(32rem, 74vh, 36rem);
  flex: 0 0 auto;
  align-items: stretch;
}

.listen-atmosphere-host[data-display-format="dialog"][data-reader-layout="book"]
  .listen-spread-page {
  align-self: stretch;
  height: 100%;
  min-height: 0;
}

.listen-atmosphere-host[data-display-format="dialog"][data-reader-layout="book"][data-reader-skin="fantasy-scroll"]
  .listen-scroll-parchment {
  min-height: clamp(32rem, 74vh, 36rem);
}

.listen-atmosphere-host[data-display-format="dialog"][data-reader-layout="book"]
  .listen-text-scroll {
  flex: 1 1 auto;
  min-height: 0;
}

.listen-atmosphere-host[data-display-format="dialog"][data-reader-layout="book"][data-companion-mode="image"]
  .listen-spread-page--companion:not(.listen-spread-page--image-side)
  .listen-book-page-body {
  flex: 1 1 auto;
  min-height: 0;
}

.listen-atmosphere-host[data-display-format="dialog"][data-reader-layout="book"][data-companion-mode="image"]
  .listen-spread-page--companion:not(.listen-spread-page--image-side)
  .listen-story-image-slot {
  flex: 1 1 0;
  align-self: stretch;
  min-height: 0;
  padding-bottom: 0;
}

.listen-atmosphere-host[data-display-format="dialog"][data-reader-layout="book"][data-companion-mode="image"]
  .listen-spread-page--companion:not(.listen-spread-page--image-side)
  .listen-story-image-slot
  .listen-story-image[hidden] {
  display: none !important;
  flex: 0 0 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  overflow: hidden;
  pointer-events: none;
}

.listen-atmosphere-host[data-display-format="dialog"][data-reader-layout="book"][data-companion-mode="image"]
  .listen-spread-page--companion:not(.listen-spread-page--image-side)
  .listen-chapter-art,
.listen-atmosphere-host[data-display-format="dialog"][data-reader-layout="book"][data-companion-mode="image"]
  .listen-spread-page--companion:not(.listen-spread-page--image-side)
  .listen-figure-card {
  flex: 1 1 0;
  align-self: stretch;
  min-height: 0;
  width: 100%;
  height: 100%;
  display: grid !important;
  grid-template-rows: minmax(0, 1fr);
  grid-template-columns: minmax(0, 1fr);
  place-items: stretch;
  overflow: hidden;
  background: transparent;
  border-bottom: none;
}

.listen-atmosphere-host[data-display-format="dialog"][data-reader-layout="book"][data-companion-mode="image"]
  .listen-spread-page--companion:not(.listen-spread-page--image-side)
  .listen-chapter-art img,
.listen-atmosphere-host[data-display-format="dialog"][data-reader-layout="book"][data-companion-mode="image"]
  .listen-spread-page--companion:not(.listen-spread-page--image-side)
  .listen-chapter-art-layer,
.listen-atmosphere-host[data-display-format="dialog"][data-reader-layout="book"][data-companion-mode="image"]
  .listen-spread-page--companion:not(.listen-spread-page--image-side)
  .listen-figure-card img {
  display: block;
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: none;
  margin: 0;
  object-fit: cover;
  object-position: center center;
  filter: none;
  background: transparent;
}

.listen-atmosphere-host[data-display-format="dialog"][data-reader-layout="book"][data-companion-mode="image"]
  .listen-spread-page--companion:not(.listen-spread-page--image-side)
  .listen-chapter-art::after {
  display: none;
}

/* Standard book companion art — crossfade layers (same timing as demo sample). */
.listen-atmosphere-host[data-display-format="dialog"][data-reader-layout="book"][data-companion-mode="image"]
  .listen-spread-page--companion:not(.listen-spread-page--image-side)
  .listen-chapter-art-layer {
  opacity: 0;
  transition: opacity 1.4s ease;
}

.listen-atmosphere-host[data-display-format="dialog"][data-reader-layout="book"][data-companion-mode="image"]
  .listen-spread-page--companion:not(.listen-spread-page--image-side)
  .listen-chapter-art img.listen-chapter-art-layer.is-active,
.listen-atmosphere-host[data-display-format="dialog"][data-reader-layout="book"][data-companion-mode="image"]
  .listen-spread-page--companion:not(.listen-spread-page--image-side)
  .listen-chapter-art-layer.is-active {
  opacity: 1;
  pointer-events: auto;
  z-index: 1;
}

.listen-atmosphere-host[data-display-format="dialog"][data-reader-layout="book"][data-companion-mode="image"]
  .listen-spread-page--companion:not(.listen-spread-page--image-side)
  .listen-chapter-art-layer:not(.is-active) {
  z-index: 0;
}

.listen-atmosphere-host[data-display-format="dialog"][data-reader-layout="book"][data-companion-mode="image"]
  .listen-spread-page--companion:not(.listen-spread-page--image-side)
  .listen-chapter-art.is-crossfading
  .listen-chapter-art-layer {
  transition-duration: 1.4s;
}

.listen-atmosphere-host[data-display-format="dialog"][data-reader-layout="book"][data-companion-mode="image"]
  .listen-spread-page--companion:not(.listen-spread-page--image-side)
  .listen-chapter-art.is-instant-swap
  .listen-chapter-art-layer {
  transition: none !important;
}

/* —— Home shelves (browse-first landing) —— */

body.wizard-step-home #library-sidebar {
  display: none !important;
}

body.wizard-step-home #wizard-steps-nav {
  display: none !important;
}

body.wizard-step-home .app {
  max-width: 1120px;
}

.panel-home {
  position: relative;
  padding-bottom: 2rem;
  isolation: isolate;
}

.panel-home::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: -2;
  border-radius: inherit;
  background:
    radial-gradient(ellipse 80% 55% at 12% -8%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 62%),
    radial-gradient(ellipse 70% 50% at 92% 108%, color-mix(in srgb, var(--spotlight) 12%, transparent), transparent 58%);
}

.home-ambient {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  border-radius: inherit;
  opacity: 0.045;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: home-ambient-drift 48s ease-in-out infinite alternate;
}

@keyframes home-ambient-drift {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(-1.5%, 1%, 0);
  }
}

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

.home-welcome-greeting {
  margin: 0 0 1rem;
}

.home-welcome-greeting-text {
  margin: 0;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 1.35rem;
  font-weight: 600;
  color: color-mix(in srgb, var(--text) 88%, var(--spotlight) 12%);
}

.home-command-strip {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.45fr) minmax(9rem, 0.42fr);
  gap: 0;
  margin-bottom: 1.5rem;
  border: 1px solid color-mix(in srgb, var(--border) 88%, var(--spotlight) 12%);
  border-radius: var(--radius-lg, 0.75rem);
  background: color-mix(in srgb, var(--panel) 90%, var(--accent) 10%);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #ffffff 6%, transparent),
    0 2px 14px color-mix(in srgb, #000000 18%, transparent);
  overflow: hidden;
}

.home-command-col {
  padding: 1.1rem 1.15rem;
  min-width: 0;
}

.home-command-col + .home-command-col {
  border-left: 1px solid color-mix(in srgb, var(--border) 75%, transparent);
}

.home-command-col--demo {
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--accent) 10%, transparent),
    color-mix(in srgb, var(--spotlight) 6%, transparent)
  );
}

.home-command-label {
  margin: 0 0 0.35rem;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 1.02rem;
  font-weight: 650;
  color: color-mix(in srgb, var(--text) 90%, var(--spotlight) 10%);
}

.home-command-copy {
  margin: 0 0 0.75rem;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.45;
}

.home-command-copy-sub {
  display: block;
  margin-top: 0.25rem;
  color: color-mix(in srgb, var(--muted) 82%, var(--spotlight) 18%);
}

.home-command-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: stretch;
}

.home-command-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.5rem;
  padding: 0.6rem 1.2rem;
  font-size: 0.95rem;
  line-height: 1.2;
}

.home-command-actions button.primary {
  border: 1px solid transparent;
}

.home-command-strip--demo-hidden {
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
}

.home-command-strip--demo-hidden .home-command-col--library .home-command-actions {
  flex-wrap: nowrap;
}

.home-command-strip--demo-hidden .home-command-col--library .home-command-actions button {
  white-space: nowrap;
}

.home-command-search-label {
  display: block;
  margin: 0 0 0.4rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.home-command-search-input {
  width: 100%;
  padding: 0.5rem 0.65rem;
  font-size: 0.92rem;
}

.home-featured-hero {
  margin-bottom: 1.5rem;
}

.home-featured-hero[hidden] {
  display: none !important;
}

.home-featured-hero-inner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1.25rem;
  align-items: center;
  padding: 1.15rem 1.25rem;
  border-radius: var(--radius-lg, 0.75rem);
  border: 1px solid color-mix(in srgb, var(--spotlight) 28%, var(--border));
  background:
    linear-gradient(
      125deg,
      color-mix(in srgb, var(--panel) 82%, var(--accent) 18%),
      color-mix(in srgb, var(--panel) 90%, var(--spotlight) 10%)
    );
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--spotlight) 12%, transparent),
    0 8px 28px color-mix(in srgb, #000 22%, transparent);
}

/* Match shelf tile ratio (8.75×12.5rem), scaled up ~25%. */
.home-featured-hero-cover {
  width: 11rem;
  flex-shrink: 0;
}

.home-featured-hero-cover .enhanced-story-cover-wrap--home {
  width: 11rem;
}

.home-featured-hero-cover .enhanced-story-cover-wrap--home .enhanced-story-cover {
  width: 11rem;
  height: 15.65rem;
  border: 2px solid color-mix(in srgb, var(--spotlight) 62%, var(--border));
  border-radius: 0.4rem;
  box-shadow:
    0 6px 20px color-mix(in srgb, #000 32%, transparent),
    0 0 0 1px color-mix(in srgb, var(--spotlight) 22%, transparent),
    0 0 18px color-mix(in srgb, var(--spotlight) 14%, transparent);
  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.18s ease;
}

@media (hover: hover) and (pointer: fine) {
  .home-featured-hero-cover:hover .enhanced-story-cover-wrap--home .enhanced-story-cover,
  .home-featured-hero-cover:focus-within .enhanced-story-cover-wrap--home .enhanced-story-cover {
    border-color: color-mix(in srgb, var(--spotlight) 82%, #fff 18%);
    transform: scale(1.02);
    box-shadow:
      0 10px 28px color-mix(in srgb, #000 38%, transparent),
      0 0 0 1px color-mix(in srgb, var(--spotlight) 35%, transparent),
      0 0 26px color-mix(in srgb, var(--spotlight) 22%, transparent);
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-featured-hero-cover .enhanced-story-cover-wrap--home .enhanced-story-cover {
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
  }

  .home-featured-hero-cover:hover .enhanced-story-cover-wrap--home .enhanced-story-cover,
  .home-featured-hero-cover:focus-within .enhanced-story-cover-wrap--home .enhanced-story-cover {
    transform: none;
  }
}

.home-featured-hero-eyebrow {
  margin: 0 0 0.3rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--spotlight);
}

.home-featured-hero-title {
  margin: 0 0 0.35rem;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 1.45rem;
  font-weight: 700;
  line-height: 1.2;
}

.home-featured-hero-stats {
  margin: 0 0 0.45rem;
  font-size: 0.88rem;
  color: color-mix(in srgb, var(--muted) 70%, var(--spotlight) 30%);
}

.home-featured-hero-summary {
  margin: 0 0 0.85rem;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.45;
  max-width: 42rem;
}

.home-featured-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.app-usage-strip-wrap {
  margin-bottom: 1rem;
}

.app-usage-strip-wrap[hidden] {
  display: none !important;
}

.home-top-strips {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 1.75rem;
}

.home-usage-strip {
  position: relative;
  padding: 0.85rem 1rem 0.95rem;
  border-radius: 0.75rem;
  border: 1px solid color-mix(in srgb, var(--border) 90%, transparent);
  background: color-mix(in srgb, var(--panel) 94%, var(--accent) 6%);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #ffffff 5%, transparent),
    0 1px 2px color-mix(in srgb, #000000 12%, transparent);
}

.home-usage-close {
  position: absolute;
  top: 0.55rem;
  right: 0.55rem;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--border) 90%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--text) 4%, transparent);
  color: var(--muted);
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
  z-index: 1;
}

.home-usage-close:hover,
.home-usage-close:focus-visible {
  color: var(--text);
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}

.home-usage-strip-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
  padding-right: 2.2rem;
}

.home-usage-strip-actions {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-shrink: 0;
}

.home-usage-title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
}

.home-usage-reset {
  margin: 0.2rem 0 0;
  font-size: 0.78rem;
}

.home-usage-meters {
  display: grid;
  gap: 0.65rem;
}

.home-usage-meter-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.3rem;
}

.home-usage-meter-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text);
}

.home-usage-meter-values,
.home-usage-stat-value {
  font-size: 0.76rem;
  color: var(--muted);
  text-align: right;
}

.home-usage-meter-track {
  height: 0.42rem;
  border-radius: 999px;
  overflow: hidden;
  background: color-mix(in srgb, var(--text) 10%, transparent);
}

.home-usage-meter-fill {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--accent) 82%, #ffffff 18%),
    color-mix(in srgb, var(--accent) 96%, #000000 4%)
  );
  transition: width 0.2s ease;
}

.home-usage-meter.is-warn .home-usage-meter-fill {
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--warning, #d4a017) 78%, #ffffff 22%),
    color-mix(in srgb, var(--warning, #d4a017) 92%, #000000 8%)
  );
}

.home-usage-meter.is-unlimited .home-usage-meter-fill {
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--accent) 48%, transparent),
    color-mix(in srgb, var(--accent) 62%, transparent)
  );
}

.home-usage-meter.is-unlimited .home-usage-meter-values {
  color: var(--muted);
}

.home-usage-meter.is-full .home-usage-meter-fill {
  background: linear-gradient(
    90deg,
    color-mix(in srgb, #e05252 78%, #ffffff 22%),
    color-mix(in srgb, #e05252 92%, #000000 8%)
  );
}

.home-usage-meter.is-warn .home-usage-meter-values,
.home-usage-meter.is-full .home-usage-meter-values {
  color: var(--text);
  font-weight: 600;
}

.home-usage-stat {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.15rem 0;
}

.home-top-strips .welcome-hero {
  margin-bottom: 0;
}

.home-top-strips .home-import-strip {
  margin-bottom: 0;
}

.home-shelves {
  display: flex;
  flex-direction: column;
  gap: 1.35rem;
}

.home-shelf-panel {
  padding: 0.8rem 0.9rem 0.72rem;
  border-radius: 0.75rem;
  border: 1px solid color-mix(in srgb, var(--border) 90%, transparent);
  background: color-mix(in srgb, var(--panel) 94%, var(--accent) 6%);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #ffffff 5%, transparent),
    0 1px 2px color-mix(in srgb, #000000 12%, transparent);
}

.home-shelf--purchases .home-shelf-header {
  margin-bottom: 0.75rem;
}

.home-purchases-groups {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.home-purchases-bundle-header {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 0;
}

.home-purchases-bundle.is-expanded .home-purchases-bundle-header {
  margin-bottom: 0.65rem;
}

.home-purchases-bundle-toggle {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex: 1;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.home-purchases-bundle-toggle:hover .home-purchases-bundle-title {
  color: var(--accent);
}

.home-purchases-bundle-toggle.is-open .sidebar-section-chevron {
  transform: rotate(90deg);
}

.home-purchases-bundle-title {
  font-size: 0.95rem;
  font-weight: 650;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-purchases-bundle-count {
  flex-shrink: 0;
}

.home-purchases-play-all {
  flex-shrink: 0;
  font-size: 0.72rem;
  padding: 0.28rem 0.65rem;
}

.home-purchases-ungrouped-panel .home-purchases-subheading {
  margin-top: 0;
}

.home-purchases-subheading {
  margin: 0 0 0.65rem;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--muted);
}

.home-purchases-ungrouped--labeled {
  margin-top: 0;
}

.home-shelf-tile--in-bundle .home-shelf-tile-meta {
  color: color-mix(in srgb, var(--accent) 55%, var(--muted));
}

.home-shelf-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.65rem;
  padding-inline: 0.15rem;
}

.home-shelf-toggle {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex: 1;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.home-shelf-toggle:hover .home-shelf-title {
  color: var(--accent);
}

.home-shelf-toggle.is-open .sidebar-section-chevron {
  transform: rotate(90deg);
}

.home-shelf.is-collapsed .home-shelf-header {
  margin-bottom: 0;
}

.home-shelf-title {
  margin: 0;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 1.15rem;
  font-weight: 650;
  letter-spacing: -0.01em;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#home-shelf-continue .home-shelf-title,
.home-shelf[data-home-shelf-id="home-shelf-continue"] .home-shelf-title {
  color: color-mix(in srgb, var(--text) 82%, var(--spotlight) 18%);
}

#home-shelf-featured .home-shelf-title,
.home-shelf[data-home-shelf-id="home-shelf-featured"] .home-shelf-title,
#home-shelf-purchases .home-shelf-title {
  color: color-mix(in srgb, var(--text) 88%, var(--spotlight) 12%);
}

.home-shelf-see-all {
  flex-shrink: 0;
}

.home-shelf-body {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.home-shelf-scroller {
  display: flex;
  gap: 0.85rem;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0.35rem 0.05rem 0.1rem;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  mask-image: linear-gradient(
    90deg,
    transparent 0,
    #000 1.25rem,
    #000 calc(100% - 1.25rem),
    transparent 100%
  );
}

.home-shelf-scroller::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.home-shelf-slider-wrap {
  padding: 0.35rem 0.05rem 0.05rem;
  margin-top: 0.15rem;
  border-top: 1px solid color-mix(in srgb, var(--border) 65%, transparent);
}

.home-shelf-slider {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  height: 0.45rem;
  margin: 0;
  border-radius: 999px;
  background: color-mix(in srgb, var(--border) 55%, transparent);
  outline: none;
  cursor: pointer;
}

.home-shelf-slider::-webkit-slider-runnable-track {
  height: 0.45rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--border) 55%, transparent);
}

.home-shelf-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 3.25rem;
  height: 1.05rem;
  margin-top: -0.3rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--border));
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--accent) 72%, #ffffff 28%),
    color-mix(in srgb, var(--accent) 92%, #000000 8%)
  );
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.22),
    0 4px 10px rgba(0, 0, 0, 0.18);
  cursor: grab;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.home-shelf-slider:active::-webkit-slider-thumb {
  cursor: grabbing;
  transform: scale(1.04);
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.28),
    0 6px 14px rgba(0, 0, 0, 0.22);
}

.home-shelf-slider::-moz-range-track {
  height: 0.45rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--border) 55%, transparent);
}

.home-shelf-slider::-moz-range-thumb {
  width: 3.25rem;
  height: 1.05rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--border));
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--accent) 72%, #ffffff 28%),
    color-mix(in srgb, var(--accent) 92%, #000000 8%)
  );
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.22),
    0 4px 10px rgba(0, 0, 0, 0.18);
  cursor: grab;
}

.home-shelf-slider:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent) 55%, transparent);
  outline-offset: 3px;
}

.home-shelf-tile {
  flex: 0 0 8.75rem;
  width: 8.75rem;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.home-shelf-tile-cover {
  position: relative;
}

.home-shelf-tile-update-row {
  margin: 0;
  line-height: 1;
}

.home-shelf-update-pill {
  font-size: 0.62rem;
  padding: 0.14rem 0.45rem;
  vertical-align: middle;
}

.home-shelf-update-pill.is-updating,
.home-shelf-update-pill:disabled {
  opacity: 0.9;
  cursor: wait;
}

.home-shelf-tile-cover .enhanced-story-cover-wrap--home {
  width: 100%;
}

.home-shelf-tile-cover .enhanced-story-cover-wrap--home .enhanced-story-cover {
  width: 100%;
  height: 12.5rem;
  border-radius: 0.35rem;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28);
  cursor: pointer;
  transform-origin: center bottom;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

@media (hover: hover) and (pointer: fine) {
  .home-shelf-tile-cover:hover .enhanced-story-cover-wrap--home .enhanced-story-cover,
  .home-shelf-tile-cover:focus-within .enhanced-story-cover-wrap--home .enhanced-story-cover {
    transform: scale(1.03);
    box-shadow:
      0 10px 24px rgba(0, 0, 0, 0.38),
      0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent),
      0 0 22px color-mix(in srgb, var(--spotlight) 18%, transparent);
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-shelf-tile-cover .enhanced-story-cover-wrap--home .enhanced-story-cover {
    transition: box-shadow 0.18s ease;
  }

  .home-shelf-tile-cover:hover .enhanced-story-cover-wrap--home .enhanced-story-cover,
  .home-shelf-tile-cover:focus-within .enhanced-story-cover-wrap--home .enhanced-story-cover {
    transform: none;
  }
}

.home-shelf-tile-title {
  margin: 0;
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.home-shelf-tile-meta {
  margin: 0;
  font-size: 0.72rem;
  line-height: 1.3;
  color: var(--muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.home-shelf-tile-action {
  align-self: flex-start;
  margin-top: 0.15rem;
  padding: 0.2rem 0.55rem;
  font-size: 0.72rem;
}

.home-shelf-empty-copy {
  margin: 0;
  color: var(--muted);
  font-size: 0.95rem;
}

.home-import-strip {
  margin: 0;
  padding: 1.15rem 1.25rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 0.75rem);
  background: color-mix(in srgb, var(--panel) 88%, var(--accent) 12%);
}

.home-import-strip-inner {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.home-import-controls {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
  gap: 1rem;
}

.home-import-controls-spacer {
  flex: 1 1 auto;
  min-width: 0;
}

.home-import-title {
  margin: 0 0 0.35rem;
  font-size: 1.05rem;
  font-weight: 650;
}

.home-import-lead {
  margin: 0;
  max-width: 42rem;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.45;
}

.home-import-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  justify-content: flex-start;
  flex: 0 0 auto;
}

.home-import-search {
  flex: 0 0 auto;
  width: 13.5rem;
  max-width: 100%;
}

.home-import-search-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.home-import-search-row {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.home-import-search-input {
  flex: 1;
  min-width: 0;
  padding: 0.45rem 0.65rem;
  font-size: 0.92rem;
}

.home-import-search-clear {
  flex-shrink: 0;
  white-space: nowrap;
}

.app-modal-home-shelf-panel {
  width: min(92vw, 56rem);
  max-height: min(88vh, 48rem);
  display: flex;
  flex-direction: column;
}

.home-shelf-modal-header {
  margin-bottom: 0.75rem;
}

.home-shelf-modal-intro {
  margin: 0.35rem 0 0;
  line-height: 1.45;
}

.home-shelf-modal-grid {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 1rem;
  overflow-x: hidden;
  overflow-y: auto;
  flex: 1 1 auto;
  min-height: 8rem;
  max-height: min(58vh, 34rem);
  width: 100%;
  padding: 0.15rem 0.1rem 0.85rem;
  box-sizing: border-box;
}

.home-shelf-modal-empty {
  margin: 0.5rem 0 0;
  text-align: center;
}

.home-shelf-modal-grid .home-shelf-tile {
  flex: 0 0 auto;
}

.app-modal-home-shelf-panel .app-modal-actions {
  margin-top: 1.15rem;
  padding-top: 0.15rem;
  flex-shrink: 0;
}

@media (max-width: 720px) {
  .home-command-strip {
    grid-template-columns: 1fr;
  }

  .home-command-strip--demo-hidden {
    grid-template-columns: 1fr;
  }

  .home-command-strip--demo-hidden .home-command-col--library .home-command-actions {
    flex-wrap: wrap;
  }

  .home-command-col + .home-command-col {
    border-left: none;
    border-top: 1px solid color-mix(in srgb, var(--border) 75%, transparent);
  }

  .home-featured-hero-inner {
    grid-template-columns: 1fr;
    text-align: left;
  }

  .home-featured-hero-cover {
    width: 9.5rem;
  }

  .home-featured-hero-cover .enhanced-story-cover-wrap--home,
  .home-featured-hero-cover .enhanced-story-cover-wrap--home .enhanced-story-cover {
    width: 9.5rem;
    height: 13.55rem;
  }

  .home-welcome-greeting-text {
    font-size: 1.15rem;
  }

  .home-shelf-tile {
    flex-basis: 7.75rem;
    width: 7.75rem;
  }

  .home-shelf-tile-cover .enhanced-story-cover-wrap--home .enhanced-story-cover {
    height: 11rem;
  }

  .home-import-strip-inner {
    gap: 0.85rem;
  }

  .home-import-controls {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
  }

  .home-import-controls-spacer {
    display: none;
  }

  .home-import-search {
    width: 100%;
  }

  .home-import-actions {
    justify-content: stretch;
  }

  .home-import-actions .primary,
  .home-import-actions .secondary {
    width: 100%;
  }
}