:root {
  --bg: #0f1419;
  --panel: #1a2332;
  --panel-elevated: #222a38;
  --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;
  --panel-elevated: #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(--spotlight) 72%, var(--text) 28%);
}

* {
  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;
}

/* Home stays inert while Play/Edit/Download navigate away (activate / library refresh). */
body.library-play-busy #step-home,
body.library-play-busy #app-home-shelf-modal,
body.library-play-busy .enhanced-story-summary-tooltip {
  pointer-events: none !important;
}

body.library-play-busy.wizard-step-home #step-home {
  opacity: 0.72;
  transition: opacity 0.15s ease;
}

/* Keep the popup scrim above Home while busy (tooltips may already be closed). */
body.library-play-busy #story-summary-scrim:not([hidden]) {
  pointer-events: auto;
  cursor: wait;
}

/* Home settling after Listen to Home: block cover clicks until library refresh finishes. */
body.home-shelf-settling #step-home .home-command-strip,
body.home-shelf-settling #step-home .home-featured-hero,
body.home-shelf-settling #step-home .home-shelves,
body.home-shelf-settling #app-home-shelf-modal,
body.home-shelf-settling .enhanced-story-summary-tooltip {
  pointer-events: none !important;
}

/* Body-level fixed overlay so .panel-home isolation / tall shelves cannot hide the spinner. */
.home-shelf-settling-overlay {
  position: fixed;
  inset: 0;
  z-index: 14000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: color-mix(in srgb, #000 48%, transparent);
  pointer-events: auto;
}

.home-shelf-settling-overlay[hidden] {
  display: none !important;
}

.home-shelf-settling-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
  padding: 1.25rem 1.5rem;
  border-radius: 0.75rem;
  background: color-mix(in srgb, var(--surface, #1a1a1a) 92%, #000);
  border: 1px solid color-mix(in srgb, var(--border, #444) 80%, transparent);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
  min-width: 12rem;
}

.home-shelf-settling-spinner {
  width: 2.75rem;
  height: 2.75rem;
  border: 3px solid rgba(255, 255, 255, 0.18);
  border-top-color: var(--accent, #3b82f6);
  border-radius: 50%;
  animation: listen-boot-spin 0.85s linear infinite;
}

.home-shelf-settling-message {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text, #fff);
  text-align: center;
}

/* Cover detail popup: light scrim + locked home (not a full heavy modal). */
body.story-summary-open {
  overflow: hidden;
}

.story-summary-scrim {
  position: fixed;
  inset: 0;
  z-index: 16010;
  margin: 0;
  padding: 0;
  border: 0;
  cursor: default;
  background: color-mix(in srgb, #000 38%, transparent);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.story-summary-scrim[hidden] {
  display: none !important;
}

[data-theme="light"] .story-summary-scrim {
  background: color-mix(in srgb, #1a1d24 28%, transparent);
}

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

body.wizard-step-listen .sidebar-sections-scroll {
  overscroll-behavior: contain;
  /* flex-basis 0% keeps Legal/System pinned when sidebar radios/checkboxes
     receive focus (Chrome otherwise expands this flex item to content height). */
  flex: 1 1 0%;
  min-height: 0;
  max-height: 100%;
  overflow-anchor: none;
}

body.wizard-step-listen .sidebar-bottom-stack {
  /* Pin by flex layout — do not rely on margin-top:auto (focus scroll can
     inflate the scroll sibling and steal the free space). */
  flex: 0 0 auto;
  margin-top: 0;
}

.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%;
  /* Sit above immersion dock (+ optional global status) when those CSS vars are set. */
  bottom: calc(
    var(--listen-dock-h, 3.35rem) + var(--listen-status-h, 0px) + 0.75rem
  );
  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-center {
  transform: translate(-50%, calc(-50% - 0.35rem));
}

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

.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.4rem;
  padding: 0.38rem 0.7rem 0.38rem 0.55rem;
  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 {
  display: none;
  font-variant-numeric: tabular-nums;
  font-size: 0.78rem;
  min-width: 2.4rem;
}

.rec-clip-pill.is-recording .rec-clip-pill-time {
  display: inline;
}

.rec-clip-pill.is-recording {
  gap: 0.5rem;
  padding: 0.38rem 0.85rem 0.38rem 0.65rem;
  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;
  }
}

.catalog-curator-cache-panel {
  margin-top: 0.65rem;
  padding: 0;
  border-radius: 0.65rem;
  border: 1px dashed transparent;
  background: transparent;
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.catalog-curator-cache-panel[open] {
  border-color: var(--border);
  background: color-mix(in srgb, var(--panel) 92%, var(--accent) 8%);
}

.catalog-curator-cache-panel[hidden] {
  display: none;
}

.catalog-curator-cache-toggle {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.4rem;
  padding: 0.35rem 0.15rem;
  user-select: none;
  background: transparent;
}

.catalog-curator-cache-toggle::-webkit-details-marker {
  display: none;
}

.catalog-curator-cache-toggle::marker {
  content: "";
}

.catalog-curator-cache-panel[open] .catalog-curator-cache-toggle {
  justify-content: space-between;
  padding: 0.75rem 0.85rem 0.35rem;
}

.catalog-curator-cache-panel[open] .catalog-curator-cache-toggle:hover {
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}

.catalog-curator-cache-chevron {
  flex-shrink: 0;
  width: 1.35rem;
  height: 1.35rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  line-height: 1;
  color: var(--accent);
  transition: transform 0.15s ease;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45));
}

.catalog-curator-cache-panel[open] .catalog-curator-cache-chevron {
  transform: rotate(90deg);
  filter: none;
}

.catalog-curator-cache-title {
  display: none;
  margin: 0;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text);
}

.catalog-curator-cache-panel[open] .catalog-curator-cache-title {
  display: block;
}

.catalog-curator-cache-body {
  padding: 0 0.85rem 0.75rem;
}

.catalog-curator-cache-copy {
  margin: 0 0 0.5rem;
  font-size: 0.78rem;
  color: var(--muted);
}

.catalog-curator-cache-status {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.85rem;
  margin-bottom: 0.55rem;
  font-size: 0.76rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.catalog-curator-cache-status .is-ready {
  color: var(--ok, #2f9e44);
  font-weight: 600;
}

.catalog-curator-cache-status .is-not-ready {
  color: var(--warn, #c92a2a);
  font-weight: 600;
}

.catalog-curator-cache-progress {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin-bottom: 0.55rem;
  font-size: 0.76rem;
  color: var(--muted);
}

.catalog-curator-cache-progress[hidden] {
  display: none;
}

.catalog-curator-cache-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.catalog-curator-exclusive-option {
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
  flex: 1 1 100%;
  font-size: 0.78rem;
  color: var(--muted);
  line-height: 1.35;
  cursor: pointer;
}

.catalog-curator-exclusive-option input {
  margin-top: 0.15rem;
}

.catalog-curator-save-target {
  flex: 1 1 100%;
  margin: 0;
  padding: 0.45rem 0.55rem;
  border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  border-radius: 6px;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.85rem;
  align-items: center;
}

.catalog-curator-save-target-legend {
  padding: 0 0.2rem;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--muted);
}

.catalog-curator-save-target-option {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.78rem;
  color: var(--text, inherit);
  cursor: pointer;
}

.warm-exclusive-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 0.75rem;
  width: 100%;
  box-sizing: border-box;
  padding: 0.55rem 0.85rem;
  background: color-mix(in srgb, var(--warn, #c92a2a) 12%, var(--surface, #fff));
  border-bottom: 1px solid color-mix(in srgb, var(--warn, #c92a2a) 35%, var(--border));
  font-size: 0.82rem;
  color: var(--text, inherit);
  position: relative;
  z-index: 50;
}

.warm-exclusive-banner[hidden] {
  display: none !important;
}

.catalog-curator-cache-actions .secondary.is-busy {
  position: relative;
  pointer-events: none;
  opacity: 0.82;
}

.catalog-curator-cache-actions .secondary.is-busy .catalog-curator-btn-label {
  visibility: hidden;
}

.catalog-curator-cache-actions .catalog-curator-btn-spinner {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 1rem;
  height: 1rem;
  border: 2px solid rgba(125, 125, 125, 0.25);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: listen-validator-pill-spin 0.8s linear infinite;
}

.catalog-curator-cache-actions .catalog-curator-btn-spinner[hidden] {
  display: none;
}

.catalog-curator-deploy-dialog .app-modal-lead {
  margin-bottom: 0.65rem;
}

.catalog-curator-cache-progress .catalog-curator-cache-error {
  color: var(--warn, #c92a2a);
  white-space: normal;
}

.catalog-curator-cache-status[hidden] {
  display: none;
}

.catalog-curator-cache-ready-line {
  margin: 0 0 0.4rem;
  font-size: 0.8rem;
  font-weight: 600;
}

.catalog-curator-cache-ready-line.is-ready {
  color: var(--ok, #2f9e44);
}

.catalog-curator-cache-ready-line.is-not-ready {
  color: var(--warn, #c92a2a);
}

.catalog-curator-cache-profiles {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.76rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.catalog-curator-cache-profiles li + li {
  margin-top: 0.2rem;
}

.catalog-curator-cache-profiles .is-profile-ready {
  color: var(--text);
}

.catalog-curator-cache-profiles .is-profile-missing {
  color: var(--muted);
}

.catalog-curator-cache-deploy-hint {
  margin: 0.45rem 0 0;
  font-size: 0.74rem;
  color: var(--muted);
  line-height: 1.45;
}

.catalog-curator-cache-deploy-hint[hidden] {
  display: none;
}

.catalog-curator-cache-deploy-hint code {
  font-size: 0.92em;
}

.catalog-curator-cache-dialog-details {
  margin: 0 0 1rem;
  padding-left: 1.15rem;
  font-size: 0.88rem;
  color: var(--muted);
}

.catalog-curator-cache-dialog-details li + li {
  margin-top: 0.35rem;
}

.catalog-curator-cache-dialog-support {
  margin: 0 0 1rem;
  font-size: 0.88rem;
  color: var(--muted);
}

.catalog-curator-cache-dialog-support[hidden] {
  display: none !important;
}

.catalog-curator-cache-dialog-support > summary {
  cursor: pointer;
  color: var(--accent, #6ea8fe);
  font-weight: 600;
  list-style: none;
}

.catalog-curator-cache-dialog-support > summary::-webkit-details-marker {
  display: none;
}

.catalog-curator-cache-dialog-support > summary::before {
  content: "\25B8  ";
}

.catalog-curator-cache-dialog-support[open] > summary::before {
  content: "\25BE  ";
}

.catalog-curator-cache-dialog-support-hint {
  margin: 0.55rem 0 0.35rem;
  font-size: 0.8rem;
  line-height: 1.4;
  color: var(--muted);
}

.catalog-curator-cache-dialog-support .catalog-curator-cache-dialog-details {
  margin-bottom: 0;
}

.impersonation-banner {
  position: sticky;
  top: 0;
  z-index: 45;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 0.55rem 1rem;
  min-height: 2.5rem;
  border-bottom: 1px solid color-mix(in srgb, #c45c26 55%, transparent);
  background: linear-gradient(
    180deg,
    color-mix(in srgb, #c45c26 42%, var(--panel)) 0%,
    color-mix(in srgb, #c45c26 28%, var(--bg)) 100%
  );
  color: #fff8f2;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.35;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.22);
}

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

.impersonation-banner-content {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
  flex-wrap: wrap;
  justify-content: center;
  text-align: center;
}

.impersonation-banner-label {
  font-weight: 500;
  opacity: 0.9;
}

.impersonation-banner-exit {
  flex: 0 0 auto;
  appearance: none;
  border: 1px solid rgba(255, 255, 255, 0.45);
  background: rgba(0, 0, 0, 0.22);
  color: inherit;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 650;
  padding: 0.28rem 0.75rem;
  border-radius: 6px;
  cursor: pointer;
}

.impersonation-banner-exit:hover {
  background: rgba(0, 0, 0, 0.35);
  border-color: rgba(255, 255, 255, 0.7);
}

[data-theme="light"] .impersonation-banner {
  color: #3a1a08;
  border-bottom-color: color-mix(in srgb, #c45c26 40%, #d8c4b0);
  background: linear-gradient(
    180deg,
    color-mix(in srgb, #e8a06a 55%, #fff8f0) 0%,
    color-mix(in srgb, #e8a06a 35%, #f5ebe0) 100%
  );
  box-shadow: 0 2px 10px rgba(80, 40, 10, 0.12);
}

[data-theme="light"] .impersonation-banner-exit {
  border-color: color-mix(in srgb, #3a1a08 35%, transparent);
  background: rgba(255, 255, 255, 0.45);
}

[data-theme="light"] .impersonation-banner-exit:hover {
  background: rgba(255, 255, 255, 0.7);
}

.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: "\25B8 ";
}

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

.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: relative;
  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);
}

/* Home + import wizard + listen: no chrome strip ? header scrolls with the page. */
body.wizard-step-home .app-header,
body.wizard-import-flow .app-header,
body.wizard-step-listen .app-header {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: none;
  box-shadow: none;
}

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-brand-tm {
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 0.62em;
  font-weight: 650;
  letter-spacing: 0;
  line-height: 1;
  margin-left: 0.16em;
  vertical-align: super;
  color: color-mix(in srgb, var(--muted) 55%, var(--text) 45%);
}

.auth-brand-title .app-brand-tm {
  font-size: 0.58em;
}

.legal-header h1 .app-brand-tm {
  font-size: 0.52em;
  vertical-align: super;
}

.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: "\B7 ";
  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;
}

/* Home landing has Hear sample / Browse library ? keep step-1 markup for possible reuse. */
#step-1 #welcome-hero,
#step-1 #library-hero {
  display: none !important;
}

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.is-dragover {
  border-color: rgba(79, 140, 255, 0.7);
  background: rgba(79, 140, 255, 0.1);
}

.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-wrap--coming-soon .enhanced-story-cover img,
.enhanced-story-cover-wrap--coming-soon .enhanced-story-cover-placeholder {
  /* Clearer than a light dim, short of full B&W so art still reads as the cover */
  filter: grayscale(0.55) brightness(0.7) contrast(0.95);
}

.enhanced-story-coming-soon-badge {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  /* Extra width fills the diagonal; clipped by .enhanced-story-cover overflow */
  width: 160%;
  padding: 0.28em 0;
  transform: translate(-50%, -50%) rotate(-28deg);
  background: color-mix(in srgb, var(--panel, #1a1d24) 45%, #000 55%);
  color: var(--text, #e8eaed);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.1;
  pointer-events: none;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}

.enhanced-story-cover-wrap--home .enhanced-story-coming-soon-badge,
.home-shelf-tile--coming-soon .enhanced-story-coming-soon-badge {
  font-size: 0.68rem;
  padding: 0.32em 0;
}

.enhanced-story-card--coming-soon {
  opacity: 1;
}

.home-shelf-tile--coming-soon .home-shelf-tile-title {
  color: color-mix(in srgb, var(--muted, #9aa0a6) 45%, var(--text, #e8eaed));
}

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

.enhanced-story-cover.is-cover-loaded .enhanced-story-cover-placeholder {
  opacity: 0;
  pointer-events: none;
}

.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: 16025;
  transform: none !important;
  max-height: var(--tooltip-max-height, min(100vh - 1.5rem, 100dvh - 1.5rem));
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  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 .home-shelf-action-with-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
}

.enhanced-story-summary-tooltip__actions .home-shelf-action-with-icon svg {
  width: 0.95rem;
  height: 0.95rem;
  flex-shrink: 0;
  display: block;
}

.enhanced-story-summary-tooltip__actions .home-shelf-action-icon {
  min-width: 2.35rem;
  width: 2.35rem;
  height: 2.35rem;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.enhanced-story-summary-tooltip__actions .home-shelf-action-icon svg {
  width: 1.05rem;
  height: 1.05rem;
  display: block;
}

.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: 16020;
}

.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: 16021;
}

.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);
}

body.analysis-phase1-simplified #engine-choice-fieldset,
body.analysis-phase1-simplified .analysis-heuristic-hint,
body.analysis-phase1-simplified #analysis-ai-experimental {
  display: none !important;
}

.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-ai-enable-row {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  margin: 0;
  cursor: pointer;
}

.analysis-ai-enable-row input[type="checkbox"] {
  flex: 0 0 auto;
  margin: 0.2rem 0 0;
}

.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-collapsible--locked {
  opacity: 0.72;
}

.tts-tier-collapsible--locked .tts-tier-summary {
  cursor: default;
}

.tts-tier-collapsible--locked .tts-tier-summary:hover {
  background: transparent;
}

.tts-tier-lock-status {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--muted, #9aa3b5);
  letter-spacing: 0.01em;
}

.tts-tier-collapsible--locked .tts-tier-chevron {
  opacity: 0.45;
  transform: none;
}

.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: " \2014  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) 96%, var(--bg) 4%);
  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;
  /* Reserve the same 1px as secondary so heights match side-by-side. */
  border: 1px solid transparent;
}

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

button.secondary {
  background: var(--panel);
  color: var(--text);
  /* Always keep a 1px border (same as fill) so hover color change does not grow the box. */
  border: 1px solid var(--panel);
  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: "\25B8  ";
  color: var(--muted);
}

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

.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;
  /* Reserve space so transport/book never sit under the fixed immersion dock. */
  padding-bottom: calc(var(--listen-dock-h, 3.35rem) + 0.85rem);
}

/* 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: 26rem;
  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-progress {
  margin: 0.95rem 0 0;
  text-align: left;
}

.listen-boot-progress[hidden] {
  display: none;
}

.listen-boot-progress-track {
  height: 0.45rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--border) 80%, transparent);
  overflow: hidden;
  margin-bottom: 0.45rem;
}

.listen-boot-progress-fill {
  height: 100%;
  width: 0%;
  border-radius: inherit;
  background: var(--accent, #3b82f6);
  transition: width 0.25s ease;
}

.listen-boot-progress-fill.is-indeterminate {
  width: 32% !important;
  transition: none;
  animation: listen-audio-build-indeterminate 1.15s ease-in-out infinite;
}

.listen-boot-progress-status,
.listen-boot-progress-eta {
  margin: 0.25rem 0 0;
  font-size: 0.78rem;
  line-height: 1.35;
  color: var(--muted);
}

.listen-boot-progress-eta {
  opacity: 0.9;
  white-space: pre-line;
}

.listen-boot-hint {
  margin: 0.55rem 0 0;
  font-size: 0.78rem;
  line-height: 1.45;
}

.listen-boot-overlay-actions {
  display: flex;
  justify-content: center;
  margin-top: 1rem;
}

/* Author display:flex would otherwise keep Cancel visible when [hidden] is set. */
.listen-boot-overlay-actions[hidden] {
  display: none !important;
}

.listen-boot-overlay-actions .secondary {
  min-width: 6.5rem;
}

/* 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-environment-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,
.panel-listen.listen-startup-locked .listen-environment-trigger {
  pointer-events: none;
  opacity: 0.55;
}

.panel-listen.listen-startup-locked .listen-transport-play {
  cursor: wait;
}

/* Play on load off: cast splash hold — Play must stay clickable. */
.panel-listen.listen-startup-locked.listen-startup-awaiting-play .listen-transport-play {
  pointer-events: auto;
  opacity: 1;
  cursor: pointer;
}

@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;
}

.sidebar-playback-settings .listen-edit-mode-field {
  margin-top: 0;
}

.sidebar-playback-settings .listen-edit-mode-sidebar-hint {
  margin: 0.4rem 0 0;
}

.sidebar-playback-settings .listen-edit-mode-field.is-bulk-dirty .listen-edit-mode-sidebar-hint {
  color: var(--text);
}

.listen-process-changes-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: 0.65rem;
}

#listen-bulk-recache[hidden] {
  display: none;
}

.listen-process-changes-progress {
  margin-top: 0.65rem;
}

.listen-process-changes-progress[hidden] {
  display: none;
}

.listen-process-changes-progress-track {
  height: 0.5rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--border) 80%, transparent);
  overflow: hidden;
}

.listen-process-changes-progress-fill {
  height: 100%;
  width: 0%;
  border-radius: inherit;
  background: var(--accent);
  transition: width 0.25s ease;
}

.listen-process-changes-progress .meta {
  margin: 0.4rem 0 0;
}

.listen-process-changes-progress.is-autosave .listen-process-changes-progress-fill {
  opacity: 0.75;
}

.listen-process-changes-progress.is-autosave .meta {
  opacity: 0.9;
}

.sidebar-playback-settings .listen-edit-mode-field.is-autosaving .listen-edit-mode-sidebar-hint {
  color: var(--muted);
}

.listen-process-complete-panel {
  width: min(26rem, 100%);
}

.listen-process-complete-kicker {
  margin: 0 0 0.35rem;
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}

#listen-edit-mode-tooltip {
  max-width: min(22rem, calc(100vw - 1.25rem));
}

.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;
  align-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;
  /* Prevent iOS/iPad double-tap zoom when mashing Next/Prev quickly. */
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  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;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  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;
}

[data-theme="light"] .listen-progress-meta {
  color: color-mix(in srgb, var(--text) 78%, var(--muted) 22%);
}

.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,
.listen-environment-picker {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  min-width: 0;
}

/* display:flex above would otherwise keep [hidden] pickers visible */
.listen-chapter-picker[hidden],
.listen-environment-picker[hidden] {
  display: none !important;
}

.listen-chapter-picker {
  margin-left: auto;
  justify-content: flex-end;
}

.listen-text-meta-trailing {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-width: 0;
}

.listen-text-meta-trailing .listen-chapter-picker {
  margin-left: 0;
  /* Chapter label width can change; keep the book toggle pinned on the right. */
  flex: 0 1 auto;
  min-width: 0;
}

.listen-environment-picker {
  margin-left: 0;
  margin-right: auto;
  justify-content: flex-start;
}

.listen-chapter-picker.is-open,
.listen-environment-picker.is-open {
  z-index: 10041;
}

.listen-chapter-trigger,
.listen-environment-trigger {
  display: inline-flex;
  align-items: center;
  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;
  cursor: pointer;
}

.listen-chapter-trigger {
  justify-content: flex-end;
  text-align: right;
}

.listen-environment-trigger {
  justify-content: flex-start;
  text-align: left;
}

.listen-chapter-trigger:hover,
.listen-chapter-picker.is-open .listen-chapter-trigger,
.listen-environment-trigger:hover,
.listen-environment-picker.is-open .listen-environment-trigger {
  background: rgba(255, 255, 255, 0.06);
}

.listen-chapter-trigger:focus-visible,
.listen-environment-trigger:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

#listen-chapter-trigger-label,
#listen-environment-trigger-label {
  white-space: nowrap;
  flex: 0 1 auto;
}

#listen-chapter-trigger-label {
  text-align: right;
}

#listen-environment-trigger-label {
  text-align: left;
}

.listen-chapter-trigger-chevron,
.listen-environment-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,
.listen-environment-picker.is-open .listen-environment-trigger-chevron {
  transform: rotate(180deg);
}

.listen-chapter-menu,
.listen-environment-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);
}

/* Fit current cinema backgrounds (~8) without a scrollbar; scroll only if more are added. */
.listen-environment-menu {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: max-content;
  min-width: 0;
  max-width: none;
  max-height: min(22rem, 60vh);
  overflow-x: hidden;
}

/* Author display:flex above would otherwise override the UA [hidden] rule. */
.listen-environment-menu[hidden] {
  display: none !important;
}

.listen-chapter-menu-item,
.listen-environment-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;
}

/* Must come after the shared chapter/env item rule so min-width:100% cannot
   resolve against the portaled body/viewport and stretch the menu. */
.listen-environment-menu-item,
#listen-environment-trigger-label {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.listen-environment-menu-item {
  width: auto;
  min-width: 0;
  max-width: none;
  padding-right: 0.95rem;
  align-self: stretch;
}

.listen-environment-menu-icon {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  opacity: 0.88;
}

.listen-environment-menu-text {
  flex: 0 1 auto;
}

.listen-environment-menu-item[data-environment-id="default"],
.listen-environment-trigger[data-environment-id="default"] {
  color: color-mix(in srgb, #f0f2f5 82%, var(--text));
}

.listen-environment-menu-item[data-environment-id="cozy-hearth"],
.listen-environment-trigger[data-environment-id="cozy-hearth"] {
  color: #d4a07a;
}

.listen-environment-menu-item[data-environment-id="sci-fi-hologram"],
.listen-environment-trigger[data-environment-id="sci-fi-hologram"] {
  color: #b7c5d1;
}

.listen-environment-menu-item[data-environment-id="gothic-cathedral"],
.listen-environment-trigger[data-environment-id="gothic-cathedral"] {
  color: #b39bc4;
}

.listen-environment-menu-item[data-environment-id="noir-city"],
.listen-environment-trigger[data-environment-id="noir-city"] {
  color: #9aa1a8;
}

.listen-environment-menu-item[data-environment-id="fantasy-tavern"],
.listen-environment-trigger[data-environment-id="fantasy-tavern"] {
  color: #c9b46e;
}

.listen-environment-menu-item[data-environment-id="horror-shadow"],
.listen-environment-trigger[data-environment-id="horror-shadow"] {
  color: #c47a7a;
}

.listen-environment-menu-item[data-environment-id="darkened-cave"],
.listen-environment-trigger[data-environment-id="darkened-cave"] {
  color: #7eb0d4;
}

.listen-environment-menu-item[data-environment-id="study-time"],
.listen-environment-trigger[data-environment-id="study-time"] {
  color: #6b8f71;
}

.listen-environment-menu-item[data-environment-id="alone-time"],
.listen-environment-trigger[data-environment-id="alone-time"] {
  color: #c4879a;
}

.listen-chapter-menu-item:hover,
.listen-chapter-menu-item:focus-visible,
.listen-environment-menu-item:hover,
.listen-environment-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-environment-menu-item.is-current {
  font-weight: 600;
  /* Keep the env tint; just brighten slightly vs the shared accent override. */
  filter: brightness(1.12);
  background: rgba(255, 255, 255, 0.05);
}

.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;
}

/* Pending: hide empty book chrome AND the host panel fill so the
   environment background shows through (no black rectangle). */
.listen-atmosphere-host.is-listen-spread-pending:not(.is-book-opening):not(.is-book-opening-flip):not(.is-book-opening-reveal) {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

.listen-atmosphere-host.is-listen-spread-pending .listen-reader-body,
.listen-atmosphere-host.is-listen-spread-pending .listen-scroll-frame,
.listen-atmosphere-host.is-listen-spread-pending .listen-spread-pages-row,
.listen-atmosphere-host.is-listen-spread-pending .listen-page-footer {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Cover-opening ceremony is intentional UI ? reveal it. */
.listen-atmosphere-host.is-listen-spread-pending.is-book-opening .listen-reader-body,
.listen-atmosphere-host.is-listen-spread-pending.is-book-opening .listen-scroll-frame,
.listen-atmosphere-host.is-listen-spread-pending.is-book-opening .listen-spread-pages-row,
.listen-atmosphere-host.is-listen-spread-pending.is-book-opening .listen-page-footer,
.listen-atmosphere-host.is-listen-spread-pending.is-book-opening-flip .listen-reader-body,
.listen-atmosphere-host.is-listen-spread-pending.is-book-opening-flip .listen-scroll-frame,
.listen-atmosphere-host.is-listen-spread-pending.is-book-opening-flip .listen-spread-pages-row,
.listen-atmosphere-host.is-listen-spread-pending.is-book-opening-flip .listen-page-footer {
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* Keep host clear during pending+opening so left column stays atmosphere. */
.listen-atmosphere-host.is-listen-spread-pending.is-book-opening,
.listen-atmosphere-host.is-listen-spread-pending.is-book-opening-flip {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

/* Boot overlay up: keep empty pages hidden; host panel must not paint a black card. */
#step-7.listen-boot-active .listen-atmosphere-host:not(.is-book-opening):not(.is-book-opening-flip):not(.is-book-opening-reveal) {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

#step-7.listen-boot-active .listen-atmosphere-host:not(.is-book-opening):not(.is-book-opening-flip) .listen-reader-body,
#step-7.listen-boot-active .listen-atmosphere-host:not(.is-book-opening):not(.is-book-opening-flip) .listen-scroll-frame,
#step-7.listen-boot-active .listen-atmosphere-host:not(.is-book-opening):not(.is-book-opening-flip) .listen-spread-pages-row,
#step-7.listen-boot-active .listen-atmosphere-host:not(.is-book-opening):not(.is-book-opening-flip) .listen-page-footer {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}


/* 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: flex;
  flex-wrap: nowrap;
  gap: 0.35rem;
  align-items: stretch;
}

.sidebar-playback-settings .listen-reader-layout-option {
  display: flex;
  flex: 1 1 0;
  margin: 0;
  min-width: 0;
}

.sidebar-playback-settings .listen-reader-layout-option span {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  box-sizing: border-box;
  text-align: center;
  white-space: nowrap;
  overflow: visible;
  padding: 0.34rem 0.45rem;
  font-size: 0.78rem;
  line-height: 1.2;
}

.sidebar-playback-settings .listen-display-format-field .listen-reader-layout-options {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.35rem;
}

.listen-layout-rebuild-hint {
  margin: 0.55rem 0 0;
  line-height: 1.35;
  max-width: 22rem;
}

.app-listen-presentation-panel {
  width: min(28rem, calc(100vw - 2rem));
}

.app-listen-presentation-fieldset {
  margin: 0 0 1rem;
  padding: 0;
  border: 0;
  min-width: 0;
}

.app-listen-presentation-fieldset legend {
  margin: 0 0 0.45rem;
  padding: 0;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text);
}

.app-listen-presentation-hint {
  margin: 0.45rem 0 0;
  line-height: 1.35;
}

.sidebar-playback-settings .listen-kokoro-runtime-field {
  margin-bottom: 0.65rem;
}

/* Author .sidebar-field { display:flex } overrides UA [hidden]; keep this parked UI invisible. */
#listen-kokoro-runtime-field[hidden],
.sidebar-playback-settings .listen-kokoro-runtime-field[hidden] {
  display: none !important;
}

.sidebar-playback-settings .listen-kokoro-runtime-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.4rem;
}

.sidebar-playback-settings .listen-kokoro-runtime-status {
  margin: 0.35rem 0 0;
  line-height: 1.35;
}

.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%);
}

.sidebar-playback-settings .sidebar-playback-group-title-row {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  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));
  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%
  );
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--spotlight) 6%, white 4%);
}

.sidebar-playback-settings .sidebar-playback-group-title-row .sidebar-playback-group-title {
  flex: 1;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  box-shadow: none;
}

.sidebar-playback-settings .sidebar-playback-group-title-row .field-help-wrap {
  flex-shrink: 0;
}

[data-theme="light"] .sidebar-playback-settings .sidebar-playback-group-title-row {
  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%
  );
  border-bottom-color: color-mix(in srgb, var(--spotlight) 16%, var(--border));
}

[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):not(.sidebar-playback-group-title-row) {
  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: center;
  justify-content: space-between;
  gap: 0.45rem;
  width: 100%;
}

.sidebar-slider-head-trailing {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  flex-shrink: 0;
}

.sidebar-slider-with-mute {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  width: 100%;
  min-width: 0;
}

.sidebar-slider-with-mute input[type="range"] {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
}

.listen-mute-btn--sidebar {
  width: 1.85rem;
  height: 1.85rem;
  flex-shrink: 0;
}

.listen-mute-btn--sidebar .listen-mute-icon {
  width: 0.95rem;
  height: 0.95rem;
}

.sidebar-playback-settings .listen-ambience-volume-field,
.sidebar-playback-settings .listen-environment-background-volume-row {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.sidebar-playback-settings .listen-ambience-volume-field.is-disabled,
.sidebar-playback-settings .listen-environment-background-volume-row.is-disabled {
  opacity: 0.72;
}

.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 > label:has(#listen-play-on-load) {
  margin-bottom: 0.75rem;
  padding-bottom: 0.15rem;
}

.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-keep-playing-locked-row,
.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;
}

/*
 * Book + paragraph: hide the full-height border-left accent on both pages
 * (keeps 3px gutter / padding; color only). Visible accent is the shorter
 * ::before rail on the active page only (rules below).
 * Rollback: delete this rule block (border-left-color: transparent).
 * Added 2026-08-20 for dual speaker-bar cleanup.
 */
.listen-atmosphere-host[data-reader-layout="book"][data-display-format="paragraph"]
  .listen-text.listen-text-dialogue,
.listen-atmosphere-host[data-reader-layout="book"][data-display-format="paragraph"]
  .listen-text.listen-text-narration {
  border-left-color: transparent;
}

.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"]):not([data-reader-skin="no-skin"])
  .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-page-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 + Minimal (dialog): if companion art mode is on but no image is actually
 * painted (missing segment image link / cleared src), hide the slot so the page
 * parchment shows instead of a black void.
 */
.listen-atmosphere-host[data-reader-layout="book"][data-display-format="dialog"]
  #listen-story-image-slot:not(:has(.listen-story-image:not([hidden]) img[src]:not([src=""]))) {
  display: none !important;
}

/* 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;
  /* 2026-07-21: was `filter: none` ? now skin-matched via --listen-skin-img-filter
     (see "BEGIN ? Skin-matched book image treatments" near end of this file).
     Rollback: restore `filter: none;` or `git checkout rollback/skin-img-before-2026-07-21 -- tools/wizard/wizard.css` */
  filter: var(--listen-skin-img-filter, none);
  mix-blend-mode: var(--listen-skin-img-blend, normal);
}

/* 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.
 * 2026-07-21: border/shadow/background honor --listen-skin-img-frame-* so textured
 * skins can drop the ?pasted photo? mount. Rollback with skin-img treatments block. */
.listen-atmosphere-host[data-reader-layout="book"] .listen-spread-page--image-side .listen-page-image img {
  box-sizing: border-box;
  border: var(
    --listen-skin-img-frame-border,
    1px solid color-mix(in srgb, var(--listen-skin-muted, var(--muted)) 38%, transparent)
  );
  border-radius: var(--listen-skin-img-frame-radius, 1px);
  box-shadow: var(
    --listen-skin-img-frame-shadow,
    0 1px 3px rgba(0, 0, 0, 0.16),
    inset 0 0 0 1px rgba(255, 255, 255, 0.06)
  );
  background: var(
    --listen-skin-img-frame-bg,
    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;
}

/* Book + Full Paragraph landscape size/center: CSS vars after book defaults (~8213);
 * equal padding override after spine-aware insets (~29994). */
.listen-atmosphere-host[data-reader-layout="book"][data-display-format="paragraph"]
  .listen-spread-page--image-side
  .listen-page-image.is-landscape {
  width: 100%;
  justify-content: center;
  align-items: center;
}

.listen-atmosphere-host[data-reader-layout="book"][data-display-format="paragraph"]
  .listen-spread-page--image-side
  .listen-page-image.is-landscape
  img,
.listen-atmosphere-host[data-reader-layout="book"][data-display-format="paragraph"]
  .listen-spread-page--image-side
  .listen-page-image-slot.is-landscape
  img {
  width: var(--listen-book-page-image-landscape-width, 100%);
  max-width: var(--listen-book-page-image-landscape-width, 100%);
  margin-inline: auto;
}

/* 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;
  /* 2026-07-21: was `filter: none` ? skin-matched (see END block). Rollback tag: rollback/skin-img-before-2026-07-21 */
  filter: var(--listen-skin-img-filter, none);
  mix-blend-mode: var(--listen-skin-img-blend, normal);
  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-reader-skin-field label.listen-scifi-option-row {
  flex-direction: row;
  align-items: center;
  gap: 0.45rem;
  margin-top: 0.55rem;
  margin-bottom: 0;
}

.listen-reader-skin-field label.listen-scifi-option-row[hidden] {
  display: none;
}

.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?v=20260722-muted");
  --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");
  /* 2026-07-21: photo-mount corner overlays for Academic / Romance image pages */
  --listen-skin-academic-tape-corners: url("/api/reader-skins/asset/decorations/academic-masking-tape-corners.png");
  --listen-skin-romance-scrapbook-corners: url("/api/reader-skins/asset/decorations/romance-scrapbook-corners.png");
  --listen-skin-stone: url("/api/reader-skins/asset/textures/stone-tablet-tile.svg");
  --listen-skin-stone-photo: url("/api/reader-skins/asset/textures/stone-tablet.png");
  --listen-skin-stone-photo-cracked: url("/api/reader-skins/asset/textures/stone-tablet-cracked.png");
  /* 2026-07-21 skin-img polish: corner crack chips for image overlays */
  --listen-skin-stone-corner-crack: url("/api/reader-skins/asset/decorations/stone-tablet-corner-crack.png");
  --listen-skin-noir-newsprint: url("/api/reader-skins/asset/textures/noir-newsprint.png");
  --listen-skin-noir-newsprint-tile: url("/api/reader-skins/asset/textures/noir-newsprint-tile.svg");
  --listen-skin-dark-parchment: url("/api/reader-skins/asset/textures/gothic-cathedral-parchment.png");
  --listen-skin-dark-parchment-tile: url("/api/reader-skins/asset/textures/dark-parchment-tile.svg");
  --listen-skin-suspense-thriller: url("/api/reader-skins/asset/textures/suspense-thriller.png");
  --listen-skin-suspense-thriller-tile: url("/api/reader-skins/asset/textures/suspense-thriller-tile.svg");
  --listen-skin-edge-tear: url("/api/reader-skins/asset/decorations/edge-tear.png");
  --listen-skin-well-worn-novel: url("/api/reader-skins/asset/textures/well-worn-novel.png?v=20260718-revert-worn");
  --listen-skin-well-worn-novel-binding: url("/api/reader-skins/asset/textures/well-worn-novel-binding.png");
  --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%;
}

/* Book + Full Paragraph only: slightly larger landscape overrides, equal L/R gaps. */
.listen-atmosphere-host[data-reader-layout="book"][data-display-format="paragraph"] {
  --listen-book-page-image-landscape-width: 100%;
  --listen-book-page-image-side-gap: clamp(0.4rem, 2.5%, 0.75rem);
  --listen-book-page-image-spine-gap: clamp(0.4rem, 2.5%, 0.75rem);
}

.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 {
  display: none !important;
}

/* Fore-edge page stacks (.listen-book-page-curl) are book chrome, not optional
   decorations ? keep them visible when Decorations is Off (Well-Worn default). */

.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: 34px;
  --listen-scroll-roller-cap-height: 34px;
  --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: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

[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: transparent;
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="fantasy-scroll"]
  .listen-reader-body {
  overflow: visible;
  padding: 0;
  background: transparent;
}

.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: #2b1b0d;
  border-bottom: 1px solid color-mix(in srgb, #8b6040 35%, transparent);
  box-shadow:
    0 4px 14px rgba(0, 0, 0, 0.32),
    inset 0 0 0 1px rgba(188, 137, 75, 0.18);
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="fantasy-scroll"]
  .listen-in-scene-header {
  border-color: rgba(101, 67, 34, 0.7);
  background:
    linear-gradient(90deg, rgba(58, 34, 16, 0.34), transparent 15% 85%, rgba(58, 34, 16, 0.34)),
    linear-gradient(180deg, rgba(76, 47, 22, 0.22), rgba(45, 27, 13, 0.32)),
    var(--listen-skin-parchment-photo),
    var(--listen-skin-parchment);
  background-size: 100% 100%, 100% 100%, cover, 256px 256px;
  box-shadow:
    inset 0 1px 0 rgba(255, 245, 214, 0.35),
    inset 0 -1px 0 rgba(92, 58, 28, 0.2);
}

.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 rgba(101, 67, 34, 0.7);
  border-top: none;
  border-radius: 0 0 10px 10px;
  background:
    linear-gradient(90deg, rgba(58, 34, 16, 0.3), transparent 15% 85%, rgba(58, 34, 16, 0.3)),
    linear-gradient(180deg, rgba(76, 47, 22, 0.26), rgba(45, 27, 13, 0.36)),
    var(--listen-skin-parchment-photo),
    var(--listen-skin-parchment);
  background-size: 100% 100%, 100% 100%, cover, 256px 256px;
}

.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-toggle,
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="fantasy-scroll"]
  .listen-in-scene-help-btn {
  color: #4a3828;
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="fantasy-scroll"]
  .listen-cast-spotlight-btn,
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="fantasy-scroll"]
  .listen-nav-btn {
  color: #2b1a0c;
  border-color: rgba(91, 58, 28, 0.5);
  background: rgba(238, 215, 170, 0.72);
  box-shadow: inset 0 1px 0 rgba(255, 247, 220, 0.42);
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="fantasy-scroll"]
  .listen-cast-spotlight-btn:hover,
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="fantasy-scroll"]
  .listen-nav-btn:hover:not(:disabled) {
  color: #1d1108;
  border-color: rgba(105, 61, 22, 0.78);
  background: rgba(248, 226, 181, 0.9);
}

/* Dock candle / sci-fi lamp on the right-page centerline, sitting on the cast bottom edge. */
.listen-in-scene-toolbar .listen-scene-candle:not(.is-floating) {
  position: absolute;
  left: 75%;
  top: auto;
  bottom: 0;
  z-index: 3;
  transform: translateX(-50%);
  pointer-events: auto;
}

.listen-scene-candle:not(.is-scifi-lamp) {
  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-in-scene-body > .listen-scene-candle.is-floating:not(.is-scifi-lamp) {
  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-scene-candle.is-floating.is-dragging:not(.is-scifi-lamp) {
  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-scene-candle:not(.is-scifi-lamp) .listen-scene-candle-stick {
  cursor: grab;
}

.listen-scene-candle[hidden] {
  display: none !important;
}

.listen-scene-candle: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%;
}

@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-scene-candle: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: 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-scene-candle:not(.is-scifi-lamp) .listen-scene-candle-stick:not(:disabled) {
  cursor: pointer;
}

.listen-scene-candle: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-scene-candle:not(.is-scifi-lamp).is-snuffing
  .listen-scene-candle-flame {
  animation: listen-candle-snuff 0.55s ease forwards !important;
}

.listen-scene-candle:not(.is-scifi-lamp).is-relighting
  .listen-scene-candle-flame {
  animation: listen-candle-relight 0.42s ease-out forwards !important;
}

.listen-scene-candle:not(.is-scifi-lamp) .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-scene-candle:not(.is-scifi-lamp).is-snuffing
  .listen-scene-candle-smoke {
  animation: listen-candle-smoke-rise 1.75s ease-out forwards;
}

.listen-scene-candle:not(.is-scifi-lamp):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;
  /* Soften the cap's hot specular so it matches the shaft sheen. */
  filter: brightness(0.82) contrast(0.92);
}

.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;
  /* Narrower than the cap flare so the finial base reads as the widest wood below the ball. */
  width: 52%;
  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: soft parchment fold + thin irregular crack (closer to Well-Worn). */
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="fantasy-scroll"]
  .listen-book-spine-seam {
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0.72rem;
  z-index: 6;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(78, 48, 24, 0.1) 18%,
    rgba(52, 32, 14, 0.26) 46%,
    rgba(40, 24, 10, 0.36) 50%,
    rgba(98, 64, 34, 0.18) 54%,
    rgba(78, 48, 24, 0.08) 82%,
    transparent 100%
  );
  box-shadow: none;
  filter: blur(0.15px);
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="fantasy-scroll"]
  .listen-book-spine-seam::before {
  content: "";
  position: absolute;
  top: 4%;
  bottom: 4%;
  left: calc(50% - 1px);
  width: 2px;
  opacity: 0.4;
  background: #4a2e16;
  border-radius: 0;
  box-shadow: none;
  clip-path: polygon(
    35% 0,
    75% 0,
    48% 12%,
    70% 25%,
    38% 39%,
    66% 54%,
    42% 70%,
    72% 84%,
    44% 100%,
    14% 100%,
    34% 84%,
    12% 70%,
    36% 54%,
    10% 39%,
    40% 25%,
    16% 12%
  );
}

[data-theme="dark"]
  .listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="fantasy-scroll"]
  .listen-book-spine-seam {
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(28, 16, 8, 0.14) 18%,
    rgba(18, 10, 4, 0.32) 46%,
    rgba(10, 6, 2, 0.42) 50%,
    rgba(48, 30, 14, 0.22) 54%,
    rgba(28, 16, 8, 0.1) 82%,
    transparent 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;
  border: none;
  backface-visibility: hidden;
}

.listen-atmosphere-host[data-reader-layout="book"]:not([data-reader-skin="fantasy-scroll"])
  .listen-book-page-body {
  display: contents;
}

/*
 * Book + paragraph (non-Fantasy): restore a real flex clip chain so text panes become
 * scrollports. Fantasy already has its own paragraph overrides; without this, pages grow
 * with content and in-page follow-scroll finds no overflow (Sci-fi / Academic / etc.).
 */
.listen-atmosphere-host[data-reader-layout="book"]:not([data-reader-skin="fantasy-scroll"])[data-display-format="paragraph"]
  .listen-spread-pages-row {
  align-items: stretch;
}

.listen-atmosphere-host[data-reader-layout="book"]:not([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"]:not([data-reader-skin="fantasy-scroll"])[data-display-format="paragraph"]
  .listen-book-page-face--front {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  width: 100%;
}

.listen-atmosphere-host[data-reader-layout="book"]:not([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"]:not([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;
  position: relative;
  width: 100%;
  overflow: hidden;
}

.listen-atmosphere-host[data-reader-layout="book"]:not([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"]:not([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;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.listen-atmosphere-host[data-reader-layout="book"]:not([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"]:not([data-reader-skin="fantasy-scroll"])[data-display-format="paragraph"]
  .listen-companion-text-scroll::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

/*
 * Book + dialog companion art (non-Fantasy): page bodies use display:contents so skin
 * layers paint correctly, but that also collapses segment-image flex height. Restore a
 * real flex clip chain on the companion page whenever chapter art is showing ? same
 * idea as the paragraph restore above / Well-Worn Novel's own override. Fantasy Scroll
 * already keeps a real flex body.
 */
.listen-atmosphere-host[data-reader-layout="book"]:not([data-reader-skin="fantasy-scroll"])[data-display-format="dialog"][data-companion-mode="image"]
  .listen-spread-page--companion
  .listen-book-page-face--front {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  width: 100%;
}

.listen-atmosphere-host[data-reader-layout="book"]:not([data-reader-skin="fantasy-scroll"])[data-display-format="dialog"][data-companion-mode="image"]
  .listen-spread-page--companion:not(.listen-spread-page--image-side)
  .listen-book-page-body {
  display: flex !important;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  position: relative;
  width: 100%;
  overflow: hidden;
}

.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;
  /* 2026-07-21: was `filter: none` ? skin-matched (see END block). Rollback tag: rollback/skin-img-before-2026-07-21 */
  filter: var(--listen-skin-img-filter, none);
  mix-blend-mode: var(--listen-skin-img-blend, normal);
  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;
}

/* Keep copy off the roller/spine edges (English + bilingual line share this pane). */
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="fantasy-scroll"]
  .listen-spread-page--current:not(.listen-spread-page--image-side)
  .listen-text-scroll {
  padding-left: 1.25rem;
  padding-right: 1.1rem;
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="fantasy-scroll"]
  .listen-spread-page--companion:not(.listen-spread-page--image-side)
  .listen-companion-text-scroll {
  padding-left: 1.1rem;
  padding-right: 1.25rem;
}

.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;
}

/* Fire/page washes stay off for the whole opening (closed cover + flip).
 * transition:none so suppress is instant ? otherwise the base glow transition
 * fades a visible wash out when opening classes apply on first load. */
.listen-atmosphere-host.is-book-closed[data-reader-layout="book"] .listen-env-page-glow,
.listen-atmosphere-host.is-demo-book-closed[data-reader-layout="book"] .listen-env-page-glow,
.listen-atmosphere-host.is-book-opening[data-reader-layout="book"] .listen-env-page-glow,
.listen-atmosphere-host.is-env-page-glows-suppressed[data-reader-layout="book"] .listen-env-page-glow {
  opacity: 0 !important;
  animation: none !important;
  transition: none !important;
}

.listen-atmosphere-host.is-book-closed[data-reader-layout="book"] .listen-env-page-glows,
.listen-atmosphere-host.is-demo-book-closed[data-reader-layout="book"] .listen-env-page-glows,
.listen-atmosphere-host.is-book-opening[data-reader-layout="book"] .listen-env-page-glows,
.listen-atmosphere-host.is-env-page-glows-suppressed[data-reader-layout="book"] .listen-env-page-glows {
  pointer-events: none !important;
}

/* Soft fade-in after the cover flip finishes (see beginEnvPageGlowsFadeIn). */
@keyframes listen-env-page-glow-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.listen-atmosphere-host.is-env-page-glows-intro[data-reader-layout="book"][data-listen-environment="cozy-hearth"][data-env-fire-hearth="1"]
  .listen-env-page-glow--hearth {
  animation:
    listen-env-page-glow-fade-in 1.5s ease forwards,
    listen-env-page-glow-pulse 2.6s ease-in-out 1.5s infinite alternate;
}

.listen-atmosphere-host.is-env-page-glows-intro[data-reader-layout="book"][data-listen-environment="fantasy-tavern"][data-env-fire-tavern-hearth="1"]
  .listen-env-page-glow--tavern-hearth {
  animation:
    listen-env-page-glow-fade-in 1.5s ease forwards,
    listen-env-page-glow-pulse 2.5s ease-in-out 1.5s infinite alternate;
}

.listen-atmosphere-host.is-env-page-glows-intro[data-reader-layout="book"][data-listen-environment="fantasy-tavern"][data-env-fire-tavern-left="1"]
  .listen-env-page-glow--tavern-left {
  animation:
    listen-env-page-glow-fade-in 1.5s ease forwards,
    listen-env-page-glow-pulse 2.4s ease-in-out 1.5s infinite alternate;
}

.listen-atmosphere-host.is-env-page-glows-intro[data-reader-layout="book"][data-listen-environment="fantasy-tavern"][data-env-fire-tavern-right="1"]
  .listen-env-page-glow--tavern-right {
  animation:
    listen-env-page-glow-fade-in 1.5s ease forwards,
    listen-env-page-glow-pulse 2.55s ease-in-out 1.5s infinite alternate;
}

.listen-atmosphere-host.is-env-page-glows-intro[data-reader-layout="book"][data-listen-environment="darkened-cave"][data-env-fire-cave-hearth="1"]
  .listen-env-page-glow--cave-hearth {
  animation:
    listen-env-page-glow-fade-in 1.5s ease forwards,
    listen-env-page-glow-pulse 2.4s ease-in-out 1.5s infinite alternate;
}

.listen-atmosphere-host.is-env-page-glows-intro[data-reader-layout="book"][data-listen-environment="darkened-cave"][data-env-fire-cave-torch="1"]
  .listen-env-page-glow--cave-torch {
  animation:
    listen-env-page-glow-fade-in 1.5s ease forwards,
    listen-env-page-glow-pulse 2.35s ease-in-out 1.5s infinite alternate;
}

.listen-atmosphere-host.is-book-opening:not(.is-book-opening-flip)[data-reader-layout="book"]
  .listen-spread-page-dim--row,
.listen-atmosphere-host.is-book-opening:not(.is-book-opening-flip)[data-reader-layout="book"]
  .listen-spread-page-dim--left,
.listen-atmosphere-host.is-book-opening:not(.is-book-opening-flip)[data-reader-layout="book"]
  .listen-spread-page-dim--right,
.listen-atmosphere-host.is-book-opening:not(.is-book-opening-flip)[data-reader-layout="book"]
  .listen-book-spine-seam {
  opacity: 0 !important;
  visibility: hidden !important;
}

.listen-atmosphere-host.is-book-opening:not(.is-book-opening-flip)[data-reader-skin="fantasy-scroll"]
  .listen-parchment-half--right,
.listen-atmosphere-host.is-book-opening:not(.is-book-opening-flip)[data-reader-skin="fantasy-scroll"]
  .listen-parchment-half--left,
.listen-atmosphere-host.is-book-opening:not(.is-book-opening-flip)[data-reader-skin="fantasy-scroll"]
  .listen-scroll-deco {
  opacity: 0 !important;
  visibility: hidden !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 during cover ceremony (all skins).
 * Fantasy-scroll also clips parchment; other skins hide the left page and
 * clear the host fill so the cinema background shows through. */
.listen-atmosphere-host.is-book-opening[data-reader-layout="book"],
.listen-atmosphere-host.is-book-opening-flip[data-reader-layout="book"] {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

.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"] {
  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;
  opacity: 0 !important;
  background: transparent !important;
  box-shadow: none !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;
}

/* Blank skin page under the cover — never flash first-page story art before open. */
.listen-atmosphere-host.is-book-opening[data-reader-layout="book"]
  .listen-spread-page--opening-cover
  .listen-story-image-slot,
.listen-atmosphere-host.is-book-opening-flip[data-reader-layout="book"]
  .listen-spread-page--opening-cover
  .listen-story-image-slot {
  visibility: hidden !important;
  pointer-events: none !important;
}

.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;
}

/* Cover board (brown + art) fades as one unit. Non-fantasy skins also turn the
 * slot itself; fantasy-scroll uses the page-flip turn above. */
.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: preserve-3d;
  animation: listen-book-opening-cover-fade 1.4s cubic-bezier(0.42, 0.02, 0.18, 1) forwards;
}

.listen-atmosphere-host.is-book-opening-flip[data-reader-layout="book"]:not([data-reader-skin="fantasy-scroll"])
  .listen-spread-page--opening-cover
  #listen-right-page-image-slot {
  animation:
    listen-book-opening-cover-fade 1.4s cubic-bezier(0.42, 0.02, 0.18, 1) forwards,
    listen-book-opening-cover-board-turn 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;
  margin: 0;
  background: transparent;
}

/* Keep cover art letterboxed on the brown board (same pre-open framing). */
.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. Pre-flip the body also
 * carries the board color; during flip the board moves onto the image slot so
 * it stays glued to the cover art as that slot fades with the page turn. */
.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;
  /* Brown board travels with the cover slot during the open animation. */
  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);
}

/* Perspective so the cover-board turn reads in 3D on non-fantasy skins. */
.listen-atmosphere-host.is-book-opening-flip[data-reader-layout="book"]:not([data-reader-skin="fantasy-scroll"])
  .listen-spread-page--opening-cover
  .listen-book-page-body {
  perspective: 1200px;
  transform-style: preserve-3d;
}

.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);
  }
}

/* Brown board + cover art swing open together (non-fantasy skins). */
@keyframes listen-book-opening-cover-board-turn {
  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;
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="fantasy-scroll"]
  .listen-spread-pages-row.is-book-page-right-active
  .listen-spread-page--companion {
  box-shadow: none;
}

[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: 26px;
    --listen-scroll-roller-cap-height: 26px;
  }

  .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: #1a2332;
  --listen-skin-muted: #4a5568;
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="academic"]
  #listen-in-scene-panel {
  margin: 0;
  box-shadow: 0 4px 12px rgba(18, 28, 44, 0.16);
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="academic"]
  .listen-in-scene-header,
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="academic"]
  .listen-in-scene-toolbar {
  border-color: color-mix(in srgb, #738198 42%, var(--border));
  background-color: #ebe6dc;
  background-image: var(--listen-skin-notebook);
  background-size: 256px 256px;
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="academic"]
  .listen-in-scene-toggle,
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="academic"]
  .listen-in-scene-help-btn {
  color: #4a5568;
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="academic"]
  .listen-nav-btn {
  color: #344154;
  border-color: rgba(74, 85, 104, 0.5);
  background: rgba(255, 255, 255, 0.78);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 1px 3px rgba(38, 48, 64, 0.18);
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="academic"]
  .listen-nav-btn:hover:not(:disabled) {
  color: #182234;
  border-color: rgba(56, 76, 108, 0.72);
  background: #ffffff;
}

[data-theme="dark"]
  .listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="academic"]
  .listen-in-scene-header,
[data-theme="dark"]
  .listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="academic"]
  .listen-in-scene-toolbar {
  background-color: #ebe6dc;
}

[data-theme="dark"]
  .listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="academic"]
  .listen-in-scene-toggle,
[data-theme="dark"]
  .listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="academic"]
  .listen-in-scene-help-btn {
  color: #4a5568;
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="academic"]
  .listen-spread-page
  .listen-page-skin-layer {
  background-color: #ebe6dc;
  background-image: var(--listen-skin-notebook);
  background-size: 256px 256px;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #8a9098 22%, transparent);
}

[data-theme="dark"]
  .listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="academic"]
  .listen-spread-page
  .listen-page-skin-layer {
  background-color: #ebe6dc;
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="academic"]
  .listen-spread-page
  .listen-text-scroll,
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="academic"]
  .listen-spread-page
  .listen-companion-text-scroll,
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="academic"]
  .listen-spread-page
  .listen-story-image-slot {
  background: transparent;
  box-shadow: none;
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="academic"]
  .listen-spread-page
  .listen-page-skin-layer::before {
  content: "";
  position: absolute;
  left: 3.85rem;
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgba(208, 80, 72, 0.55);
}

.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);
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="academic"]
  .listen-text-translation {
  color: var(--listen-skin-muted);
}

/* ---- Stone Tablet ---- */
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="stone-tablet"] {
  /*
   * Match the inactive/pending page look (same grey the dimmed companion already shows).
   * Active text used to stay near-black at opacity 1 while the right page was ink @ 0.72.
   */
  --listen-skin-ink: #8a8170;
  --listen-skin-muted: #7a746c;
  --listen-skin-spoken: #8a847c;
  --listen-stone-edge: #4a443c;
  --listen-stone-highlight: #f2eadc;
  --listen-stone-engrave-shadow:
    /* Soft recess ? dark enough to read as a cut, not a black outline. */
    -1.5px -1.5px 0 rgba(42, 38, 32, 0.7),
    -1px -1px 0 rgba(48, 44, 38, 0.55),
    0 -1px 0 rgba(40, 36, 30, 0.4),
    /* Lit stone lip ? this is what sells the chisel. */
    /*     1.5px 1.5px 0 rgba(255, 250, 240, 0.88), */
    1.5px 1.5px 0 rgba(250, 245, 235, 0.98),
    1px 1px 0 rgba(248, 240, 228, 0.78),
    0 1px 0 rgba(240, 232, 220, 0.55),
    1px 0 0 rgba(236, 228, 216, 0.45),
    /* Gentle groove into the slab. */
    0 0 1.5px rgba(30, 26, 22, 0.28);
  /* Match corner-crack beige/tan brightness (corners are the reference). */
  --listen-stone-page-base: #9a9286;
  --listen-stone-page-fill:
    linear-gradient(
      180deg,
      rgba(232, 224, 210, 0.55) 0%,
      rgba(200, 190, 176, 0.38) 48%,
      rgba(176, 166, 152, 0.42) 100%
    ),
    var(--listen-skin-stone-photo),
    var(--listen-skin-stone);
  --listen-skin-deco-opacity: 0.55;
  background: #12100e;
  border-color: color-mix(in srgb, #6a6358 50%, var(--border));
  box-shadow:
    0 10px 36px rgba(0, 0, 0, 0.5),
    inset 0 0 0 1px color-mix(in srgb, #8a8378 22%, transparent);
}

[data-theme="dark"]
  .listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="stone-tablet"] {
  --listen-skin-ink: #978d7b;
  --listen-skin-muted: #7e7870;
  --listen-skin-spoken: #8e887e;
  background: #0c0a09;
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="stone-tablet"]
  #listen-in-scene-panel {
  margin: 0;
  background-color: var(--listen-stone-page-base);
  background-image: var(--listen-stone-page-fill);
  background-size: auto, cover, 256px 256px;
  background-position: center, center top, 0 0;
  background-repeat: no-repeat, no-repeat, repeat;
  border-bottom: 1px solid color-mix(in srgb, #4a443c 55%, transparent);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28);
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="stone-tablet"]
  .listen-in-scene-header,
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="stone-tablet"]
  .listen-in-scene-toolbar {
  border-color: color-mix(in srgb, #5a544a 50%, transparent);
  background-color: transparent;
  background-image: var(--listen-stone-page-fill);
  background-size: auto, cover, 256px 256px;
  background-position: center, center, 0 0;
  background-repeat: no-repeat, no-repeat, repeat;
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="stone-tablet"]
  .listen-in-scene-toggle,
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="stone-tablet"]
  .listen-in-scene-help-btn {
  color: #2a241c;
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="stone-tablet"]
  .listen-nav-btn {
  color: #2a241c;
  border-color: rgba(60, 54, 46, 0.4);
  background: rgba(230, 224, 214, 0.55);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="stone-tablet"]
  .listen-nav-btn:hover:not(:disabled) {
  color: #14110e;
  border-color: rgba(40, 36, 30, 0.55);
  background: rgba(240, 234, 224, 0.75);
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="stone-tablet"]
  .listen-cast-spotlight-btn {
  color: #2a241c;
  border-color: rgba(70, 64, 56, 0.42);
  background: rgba(168, 160, 148, 0.72);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="stone-tablet"]
  .listen-cast-spotlight-btn:hover {
  background: rgba(188, 180, 168, 0.88);
  border-color: rgba(60, 54, 46, 0.55);
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="stone-tablet"]
  .listen-cast-spotlight-btn.is-current {
  background: rgba(198, 190, 176, 0.92);
  border-color: rgba(50, 46, 40, 0.65);
  box-shadow: 0 0 0 1px rgba(80, 74, 66, 0.35);
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="stone-tablet"]
  .listen-spread-pages-row {
  position: relative;
  align-items: stretch;
  background: #1a1714;
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="stone-tablet"]
  .listen-spread-page-dim--row,
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="stone-tablet"]
  .listen-spread-page-dim--left,
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="stone-tablet"]
  .listen-spread-page-dim--right {
  display: none !important;
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="stone-tablet"]
  .listen-spread-page
  .listen-page-skin-layer {
  background-color: var(--listen-stone-page-base);
  background-image: var(--listen-stone-page-fill);
  background-size: auto, cover, 280px 280px;
  background-position: center, center, 0 0;
  background-repeat: no-repeat, no-repeat, repeat;
  box-shadow:
    inset 0 0 0 1px rgba(20, 18, 14, 0.28),
    inset 0 0 22px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 250, 240, 0.18);
  overflow: hidden;
}

/* Subtle/Full: cracked corners baked into the page texture (not overlays). */
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="stone-tablet"][data-reader-decoration="subtle"]
  .listen-spread-page
  .listen-page-skin-layer,
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="stone-tablet"][data-reader-decoration="full"]
  .listen-spread-page
  .listen-page-skin-layer {
  background-image:
    linear-gradient(
      180deg,
      rgba(232, 224, 210, 0.55) 0%,
      rgba(200, 190, 176, 0.38) 48%,
      rgba(176, 166, 152, 0.42) 100%
    ),
    var(--listen-skin-stone-photo-cracked),
    var(--listen-skin-stone);
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="stone-tablet"][data-reader-decoration="full"]
  .listen-spread-page
  .listen-page-skin-layer {
  background-size: auto, cover, 240px 240px;
}

/* Right page: flip texture 180? so baked BR crack lands at upper-left. */
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="stone-tablet"]
  .listen-spread-page--companion
  .listen-page-skin-layer {
  transform: rotate(180deg);
  transform-origin: center center;
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="stone-tablet"]
  .listen-spread-page
  .listen-text-scroll,
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="stone-tablet"]
  .listen-spread-page
  .listen-companion-text-scroll,
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="stone-tablet"]
  .listen-spread-page
  .listen-story-image-slot {
  background: transparent;
  box-shadow: none;
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="stone-tablet"]
  .listen-text,
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="stone-tablet"]
  .listen-text-preview {
  color: var(--listen-skin-ink);
  /*   font-family: Cinzel, "Playfair Display", Georgia, "Times New Roman", serif; */
  font-family: Cinzel, "Playfair Display", Georgia, "Times New Roman", serif;
  font-weight: 600;
  letter-spacing: 0.015em;
  line-height: 1.55;
  text-transform: uppercase;
  -webkit-font-smoothing: antialiased;
  text-shadow: var(--listen-stone-engrave-shadow);
}

/* Keep active + pending pages on the same carved grey (don't darken active to near-black). */
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="stone-tablet"]
  .listen-text.listen-book-page-done,
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="stone-tablet"]
  .listen-text.listen-book-page-pending,
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="stone-tablet"]
  #listen-companion-text-scroll.listen-book-page-pending {
  opacity: 1;
  color: var(--listen-skin-ink);
  text-shadow: var(--listen-stone-engrave-shadow);
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="stone-tablet"]
  .listen-text
  .listen-word,
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="stone-tablet"]
  .listen-text-preview
  .listen-word {
  position: relative;
  color: var(--listen-skin-ink);
  text-shadow: var(--listen-stone-engrave-shadow);
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="stone-tablet"]
  .listen-text
  .listen-word:not(.listen-word-spoken):not(.listen-word-active),
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="stone-tablet"]
  .listen-text-preview
  .listen-word:not(.listen-word-spoken):not(.listen-word-active) {
  /* Wear classes below override opacity/color; default stays full if no wear class. */
  opacity: 1;
  text-shadow: var(--listen-stone-engrave-shadow);
}

/*
 * Sparse per-word weathering: one stable 1?3 word run per 18-word bucket.
 * Mild fade only ? most words stay full ink.
 */
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="stone-tablet"]
  .listen-text
  .listen-word.listen-stone-wear-0:not(.listen-word-spoken):not(.listen-word-active),
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="stone-tablet"]
  .listen-text-preview
  .listen-word.listen-stone-wear-0:not(.listen-word-spoken):not(.listen-word-active) {
  top: -0.4px;
  opacity: 0.75;
  color: color-mix(in srgb, var(--listen-skin-ink) 88%, #a89888 12%);
}
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="stone-tablet"]
  .listen-text
  .listen-word.listen-stone-wear-1:not(.listen-word-spoken):not(.listen-word-active),
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="stone-tablet"]
  .listen-text-preview
  .listen-word.listen-stone-wear-1:not(.listen-word-spoken):not(.listen-word-active) {
  top: 0.35px;
  opacity: 0.78;
  color: color-mix(in srgb, var(--listen-skin-ink) 80%, #b0a494 20%);
}
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="stone-tablet"]
  .listen-text
  .listen-word.listen-stone-wear-2:not(.listen-word-spoken):not(.listen-word-active),
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="stone-tablet"]
  .listen-text-preview
  .listen-word.listen-stone-wear-2:not(.listen-word-spoken):not(.listen-word-active) {
  top: -0.2px;
  opacity: 0.88;
  color: color-mix(in srgb, var(--listen-skin-ink) 90%, #9a9084 10%);
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="stone-tablet"]
  .listen-text
  .listen-word-active,
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="stone-tablet"]
  .listen-text-preview
  .listen-word-active {
  color: var(--listen-skin-ink);
  text-shadow: var(--listen-stone-engrave-shadow);
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="stone-tablet"]
  .listen-text
  .listen-word-spoken,
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="stone-tablet"]
  .listen-text-preview
  .listen-word-spoken {
  color: var(--listen-skin-spoken);
  opacity: 0.92;
  text-shadow:
    -1px -1px 0 rgba(42, 38, 32, 0.45),
    1px 1px 0 rgba(255, 250, 240, 0.55),
    0 0 1px rgba(30, 26, 22, 0.2);
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="stone-tablet"]
  .listen-text-translation {
  color: var(--listen-skin-muted);
  border-top-color: rgba(20, 18, 14, 0.25);
  text-shadow:
    -1px -1px 0 rgba(42, 38, 32, 0.4),
    1px 1px 0 rgba(255, 250, 240, 0.5);
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="stone-tablet"]
  .listen-page-number {
  color: color-mix(in srgb, var(--listen-skin-muted) 40%, var(--listen-skin-ink));
  opacity: 0.92;
  font-family: Cinzel, Georgia, serif;
  text-shadow: var(--listen-stone-engrave-shadow);
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="stone-tablet"][data-book-spread-active="left"]
  .listen-spread-page--companion::before,
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="stone-tablet"][data-book-spread-active="right"]
  .listen-spread-page--current::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background: rgba(12, 10, 8, 0.42);
}

/* ---- Old Newspaper (Noir) ---- */
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="old-newspaper"] {
  --listen-skin-ink: #141414;
  --listen-skin-muted: #5a5a5a;
  --listen-skin-spoken: #6e6e6e;
  --listen-noir-page-base: #dcd8d0;
  /* Mild crop of empty PNG top ? keep enough quiet newsprint under IN SCENE chrome. */
  --listen-noir-masthead-shift: clamp(0.7rem, 2.1vh, 1.25rem);
  /* Text clears masthead + double rule after the milder shift. */
  --listen-noir-masthead-reserve: clamp(2.85rem, 12vh, 4.75rem);
  --listen-noir-page-fill:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.12) 0%,
      rgba(236, 232, 224, 0.08) 42%,
      rgba(40, 40, 40, 0.06) 100%
    ),
    var(--listen-skin-noir-newsprint),
    var(--listen-skin-noir-newsprint-tile);
  --listen-skin-deco-opacity: 0.4;
  background: #121212;
  border-color: color-mix(in srgb, #6a6a6a 45%, var(--border));
  box-shadow:
    0 10px 36px rgba(0, 0, 0, 0.55),
    inset 0 0 0 1px color-mix(in srgb, #9a9a9a 18%, transparent);
}

[data-theme="dark"]
  .listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="old-newspaper"] {
  --listen-skin-ink: #101010;
  --listen-skin-muted: #555;
  --listen-skin-spoken: #6a6a6a;
  background: #0a0a0a;
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="old-newspaper"]
  #listen-in-scene-panel {
  margin: 0;
  background-color: var(--listen-noir-page-base);
  background-image: var(--listen-noir-page-fill);
  background-size: auto, cover, 256px 256px;
  /* Keep unshifted so masthead/rules stay below cast labels. */
  background-position: center, center top, 0 0;
  background-repeat: no-repeat, no-repeat, repeat;
  border-bottom: 1px solid rgba(30, 30, 30, 0.45);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="old-newspaper"]
  .listen-in-scene-header,
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="old-newspaper"]
  .listen-in-scene-toolbar {
  border-color: rgba(40, 40, 40, 0.4);
  background-color: transparent;
  background-image: var(--listen-noir-page-fill);
  background-size: auto, cover, 256px 256px;
  background-position: center, center top, 0 0;
  background-repeat: no-repeat, no-repeat, repeat;
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="old-newspaper"]
  .listen-in-scene-toggle,
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="old-newspaper"]
  .listen-in-scene-help-btn {
  color: #1a1a1a;
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="old-newspaper"]
  .listen-nav-btn {
  color: #1a1a1a;
  border-color: rgba(40, 40, 40, 0.4);
  background: rgba(236, 232, 224, 0.72);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="old-newspaper"]
  .listen-nav-btn:hover:not(:disabled) {
  color: #000;
  border-color: rgba(20, 20, 20, 0.55);
  background: rgba(248, 246, 240, 0.88);
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="old-newspaper"]
  .listen-cast-spotlight-btn {
  color: #1c1c1c;
  border-color: rgba(50, 50, 50, 0.42);
  background: rgba(168, 168, 164, 0.78);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="old-newspaper"]
  .listen-cast-spotlight-btn:hover {
  background: rgba(188, 188, 184, 0.9);
  border-color: rgba(30, 30, 30, 0.55);
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="old-newspaper"]
  .listen-cast-spotlight-btn.is-current {
  background: rgba(210, 208, 202, 0.95);
  border-color: rgba(20, 20, 20, 0.65);
  box-shadow: 0 0 0 1px rgba(60, 60, 60, 0.35);
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="old-newspaper"]
  .listen-spread-pages-row {
  position: relative;
  align-items: stretch;
  background: #1a1a1a;
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="old-newspaper"]
  .listen-spread-page-dim--row,
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="old-newspaper"]
  .listen-spread-page-dim--left,
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="old-newspaper"]
  .listen-spread-page-dim--right {
  display: none !important;
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="old-newspaper"]
  .listen-spread-page
  .listen-page-skin-layer {
  background-color: var(--listen-noir-page-base);
  background-image: var(--listen-noir-page-fill);
  background-size: auto, cover, 280px 280px;
  background-position: center, center calc(0% - var(--listen-noir-masthead-shift)), 0 0;
  background-repeat: no-repeat, no-repeat, repeat;
  box-shadow:
    inset 0 0 0 1px rgba(20, 20, 20, 0.35),
    inset 0 0 24px rgba(0, 0, 0, 0.08);
  overflow: hidden;
}

/* Image pages: keep the same newsprint photo + tile as text leaves so the spread
 * matches. Shift the masthead photo up so the baked banner/rules sit above the
 * hard-edged plate instead of reading through it (2026-07-21 / 2026-07-23). */
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="old-newspaper"]
  .listen-spread-page--image-side
  .listen-page-skin-layer {
  background-image: var(--listen-noir-page-fill);
  background-size: auto, cover, 280px 280px;
  background-position:
    center,
    center calc(0% - (var(--listen-noir-masthead-shift) + var(--listen-noir-masthead-reserve))),
    0 0;
  background-repeat: no-repeat, no-repeat, repeat;
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="old-newspaper"]
  .listen-spread-page--image-side
  .listen-page-footer {
  visibility: hidden;
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="old-newspaper"]
  .listen-spread-page
  .listen-text-scroll,
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="old-newspaper"]
  .listen-spread-page
  .listen-companion-text-scroll,
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="old-newspaper"]
  .listen-spread-page
  .listen-story-image-slot {
  background: transparent;
  box-shadow: none;
}

/* Clear the baked masthead + double rule after the upward texture shift. */
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="old-newspaper"]
  .listen-spread-page:not(.listen-spread-page--image-side)
  .listen-text-scroll,
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="old-newspaper"]
  .listen-spread-page:not(.listen-spread-page--image-side)
  .listen-companion-text-scroll {
  padding-top: var(--listen-noir-masthead-reserve);
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="old-newspaper"]
  .listen-text,
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="old-newspaper"]
  .listen-text-preview {
  color: var(--listen-skin-ink);
  font-family: "Special Elite", "Courier Prime", "Courier New", Courier, monospace;
  font-weight: 400;
  font-variant-ligatures: none;
  letter-spacing: 0.03em;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  /* Worn letterpress / halftone ink bleed on newsprint. */
  -webkit-text-stroke: 0.15px rgba(28, 26, 22, 0.22);
  paint-order: stroke fill;
  text-shadow:
    0 0 0.6px rgba(24, 22, 18, 0.65),
    0.45px 0.35px 0 rgba(20, 18, 14, 0.28),
    -0.35px -0.25px 0 rgba(20, 18, 14, 0.22),
    0.6px 0.8px 0 rgba(36, 34, 30, 0.14),
    -0.5px 0.6px 0 rgba(32, 30, 26, 0.1);
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="old-newspaper"]
  .listen-text
  .listen-word:not(.listen-word-spoken):not(.listen-word-active),
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="old-newspaper"]
  .listen-text-preview
  .listen-word:not(.listen-word-spoken):not(.listen-word-active) {
  color: var(--listen-skin-ink);
  opacity: 1;
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="old-newspaper"]
  .listen-text
  .listen-word-spoken,
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="old-newspaper"]
  .listen-text-preview
  .listen-word-spoken {
  color: var(--listen-skin-spoken);
  opacity: 0.82;
  -webkit-text-stroke: 0.12px rgba(28, 26, 22, 0.16);
  text-shadow:
    0 0 0.5px rgba(24, 22, 18, 0.45),
    0.35px 0.3px 0 rgba(20, 18, 14, 0.18),
    -0.25px -0.2px 0 rgba(20, 18, 14, 0.14);
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="old-newspaper"]
  .listen-text-translation {
  color: var(--listen-skin-muted);
  font-family: "Courier Prime", "Courier New", Courier, monospace;
  font-weight: 400;
  letter-spacing: 0.02em;
  -webkit-text-stroke: 0;
  text-shadow: none;
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="old-newspaper"]
  .listen-page-number {
  color: color-mix(in srgb, var(--listen-skin-muted) 75%, #111);
  opacity: 0.8;
  font-family: "Special Elite", "Courier Prime", Courier, monospace;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  -webkit-text-stroke: 0;
  text-shadow: 0 0 0.5px rgba(24, 22, 18, 0.35);
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="old-newspaper"][data-book-spread-active="left"]
  .listen-spread-page--companion::before,
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="old-newspaper"][data-book-spread-active="right"]
  .listen-spread-page--current::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background: rgba(10, 10, 10, 0.28);
}

/* ---- Dark Parchment (Gothic Cathedral) ---- */
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="dark-parchment"] {
  --listen-skin-ink: #2e0810;
  --listen-skin-muted: #4a1e28;
  --listen-skin-spoken: #3a121c;
  --listen-dark-parchment-base: #1a1418;
  --listen-dark-parchment-page: var(--listen-skin-dark-parchment);
  --listen-dark-parchment-fill: var(--listen-skin-dark-parchment);
  --listen-skin-deco-opacity: 0.4;
  background: #121018;
  border-color: color-mix(in srgb, #6a5c78 42%, var(--border));
  box-shadow:
    0 10px 36px rgba(0, 0, 0, 0.52),
    inset 0 0 0 1px color-mix(in srgb, #8a7a98 16%, transparent);
}

[data-theme="dark"]
  .listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="dark-parchment"] {
  --listen-skin-ink: #2e0810;
  --listen-skin-muted: #4a1e28;
  --listen-skin-spoken: #3a121c;
  background: #0a080c;
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="dark-parchment"]
  #listen-in-scene-panel {
  margin: 0;
  background-color: var(--listen-dark-parchment-base);
  background-image: var(--listen-dark-parchment-fill);
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  border-bottom: 1px solid rgba(50, 40, 60, 0.45);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.38);
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="dark-parchment"]
  .listen-in-scene-header,
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="dark-parchment"]
  .listen-in-scene-toolbar {
  border-color: rgba(60, 50, 72, 0.42);
  background-color: transparent;
  background-image: var(--listen-dark-parchment-fill);
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="dark-parchment"]
  .listen-in-scene-toggle,
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="dark-parchment"]
  .listen-in-scene-help-btn {
  color: #2a2218;
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="dark-parchment"]
  .listen-nav-btn {
  color: #2a2218;
  border-color: rgba(60, 50, 68, 0.42);
  background: rgba(220, 212, 200, 0.68);
  box-shadow: inset 0 1px 0 rgba(255, 252, 244, 0.35);
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="dark-parchment"]
  .listen-nav-btn:hover:not(:disabled) {
  color: #14100c;
  border-color: rgba(40, 32, 48, 0.55);
  background: rgba(236, 228, 216, 0.82);
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="dark-parchment"]
  .listen-cast-spotlight-btn {
  color: #2a2218;
  border-color: rgba(70, 60, 78, 0.42);
  background: rgba(168, 158, 148, 0.76);
  box-shadow: inset 0 1px 0 rgba(255, 252, 244, 0.22);
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="dark-parchment"]
  .listen-cast-spotlight-btn:hover {
  background: rgba(188, 178, 168, 0.9);
  border-color: rgba(50, 40, 58, 0.55);
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="dark-parchment"]
  .listen-cast-spotlight-btn.is-current {
  background: rgba(204, 194, 182, 0.94);
  border-color: rgba(40, 32, 48, 0.62);
  box-shadow: 0 0 0 1px rgba(80, 70, 88, 0.32);
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="dark-parchment"]
  .listen-spread-pages-row {
  position: relative;
  align-items: stretch;
  background: #141018;
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="dark-parchment"]
  .listen-spread-page-dim--row,
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="dark-parchment"]
  .listen-spread-page-dim--left,
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="dark-parchment"]
  .listen-spread-page-dim--right {
  display: none !important;
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="dark-parchment"]
  .listen-spread-page
  .listen-page-skin-layer {
  background-color: var(--listen-dark-parchment-base);
  background-image: var(--listen-dark-parchment-page);
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  box-shadow: none;
  overflow: hidden;
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="dark-parchment"]
  .listen-spread-pages-row.is-book-page-right-active
  .listen-spread-page--current,
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="dark-parchment"]
  .listen-spread-pages-row.is-book-page-left-active
  .listen-spread-page--companion,
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="dark-parchment"]
  .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="dark-parchment"]
  .listen-spread-page
  .listen-text-scroll,
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="dark-parchment"]
  .listen-spread-page
  .listen-companion-text-scroll,
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="dark-parchment"]
  .listen-spread-page
  .listen-story-image-slot {
  background: transparent;
  box-shadow: none;
}

/*
 * Light assist over text margins ? texture edges are pre-lifted; keep this soft.
 */
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="dark-parchment"]
  .listen-spread-page:not(.listen-spread-page--image-side)
  .listen-text-scroll::before,
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="dark-parchment"]
  .listen-spread-page:not(.listen-spread-page--image-side)
  .listen-companion-text-scroll::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(
      180deg,
      rgba(168, 158, 146, 0.22) 0%,
      rgba(148, 138, 126, 0.12) 7%,
      transparent 16%
    ),
    linear-gradient(
      0deg,
      rgba(168, 158, 146, 0.2) 0%,
      rgba(148, 138, 126, 0.1) 6%,
      transparent 14%
    ),
    linear-gradient(
      90deg,
      rgba(168, 158, 146, 0.18) 0%,
      transparent 10%,
      transparent 90%,
      rgba(168, 158, 146, 0.18) 100%
    );
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="dark-parchment"]
  .listen-spread-page:not(.listen-spread-page--image-side)
  .listen-text-scroll
  .listen-text,
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="dark-parchment"]
  .listen-spread-page:not(.listen-spread-page--image-side)
  .listen-companion-text-scroll
  .listen-text {
  position: relative;
  z-index: 1;
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="dark-parchment"]
  .listen-text,
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="dark-parchment"]
  .listen-text-preview {
  color: var(--listen-skin-ink);
  font-family: Almendra, "IM Fell English", "Playfair Display", Georgia, "Times New Roman", serif;
  font-weight: 600;
  font-variant: normal;
  text-transform: none;
  letter-spacing: 0.015em;
  line-height: 1.62;
  -webkit-font-smoothing: subpixel-antialiased;
  text-shadow: none;
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="dark-parchment"]
  .listen-text
  .listen-word,
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="dark-parchment"]
  .listen-text-preview
  .listen-word,
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="dark-parchment"]
  .listen-text
  .listen-word-gap {
  color: var(--listen-skin-ink);
  -webkit-text-stroke: 0;
  text-shadow: none;
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="dark-parchment"]
  .listen-text
  .listen-word:not(.listen-word-spoken):not(.listen-word-active),
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="dark-parchment"]
  .listen-text-preview
  .listen-word:not(.listen-word-spoken):not(.listen-word-active) {
  color: var(--listen-skin-ink);
  opacity: 1;
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="dark-parchment"]
  .listen-text
  .listen-word-active,
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="dark-parchment"]
  .listen-text-preview
  .listen-word-active {
  color: var(--listen-skin-ink);
  opacity: 1;
  text-shadow: none;
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="dark-parchment"]
  .listen-text
  .listen-word-spoken,
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="dark-parchment"]
  .listen-text-preview
  .listen-word-spoken,
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="dark-parchment"]
  .listen-text
  .listen-word-gap.listen-word-spoken {
  color: var(--listen-skin-spoken);
  opacity: 0.72;
  text-shadow: none;
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="dark-parchment"]
  .listen-text-translation {
  color: var(--listen-skin-muted);
  text-shadow: none;
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="dark-parchment"]
  .listen-page-number {
  color: var(--listen-skin-ink);
  opacity: 0.85;
  font-family: Almendra, "IM Fell English", "Playfair Display", Georgia, serif;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: none;
  text-shadow: none;
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="dark-parchment"][data-book-spread-active="left"]
  .listen-spread-page--companion::before,
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="dark-parchment"][data-book-spread-active="right"]
  .listen-spread-page--current::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background: rgba(14, 10, 18, 0.34);
}

/* ---- Suspense Thriller (Horror Shadow) ---- */
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="suspense-thriller"] {
  --listen-skin-ink: #12100e;
  --listen-skin-muted: #4a4844;
  --listen-skin-spoken: #5a5650;
  --listen-suspense-page-base: #d4ccc4;
  --listen-suspense-page-fill:
    linear-gradient(
      180deg,
      rgba(232, 228, 220, 0.28) 0%,
      rgba(212, 206, 196, 0.18) 46%,
      rgba(40, 38, 36, 0.1) 100%
    ),
    var(--listen-skin-suspense-thriller),
    var(--listen-skin-suspense-thriller-tile);
  --listen-skin-deco-opacity: 0.4;
  background: #0c0c0a;
  border-color: color-mix(in srgb, #5a5a58 42%, var(--border));
  box-shadow:
    0 10px 36px rgba(0, 0, 0, 0.58),
    inset 0 0 0 1px color-mix(in srgb, #7a7a78 14%, transparent);
}

[data-theme="dark"]
  .listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="suspense-thriller"] {
  --listen-skin-ink: #0e0c0a;
  --listen-skin-muted: #464442;
  --listen-skin-spoken: #524e48;
  background: #060606;
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="suspense-thriller"]
  #listen-in-scene-panel {
  margin: 0;
  background-color: var(--listen-suspense-page-base);
  background-image: var(--listen-suspense-page-fill);
  background-size: auto, cover, 256px 256px;
  background-position: center, center, 0 0;
  background-repeat: no-repeat, no-repeat, repeat;
  border-bottom: 1px solid rgba(30, 28, 26, 0.48);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="suspense-thriller"]
  .listen-in-scene-header,
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="suspense-thriller"]
  .listen-in-scene-toolbar {
  border-color: rgba(50, 48, 46, 0.44);
  background-color: transparent;
  background-image: var(--listen-suspense-page-fill);
  background-size: auto, cover, 256px 256px;
  background-position: center, center, 0 0;
  background-repeat: no-repeat, no-repeat, repeat;
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="suspense-thriller"]
  .listen-in-scene-toggle,
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="suspense-thriller"]
  .listen-in-scene-help-btn {
  color: #1e1c18;
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="suspense-thriller"]
  .listen-nav-btn {
  color: #1e1c18;
  border-color: rgba(50, 48, 46, 0.44);
  background: rgba(220, 214, 206, 0.68);
  box-shadow: inset 0 1px 0 rgba(255, 252, 248, 0.32);
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="suspense-thriller"]
  .listen-nav-btn:hover:not(:disabled) {
  color: #0a0806;
  border-color: rgba(30, 28, 26, 0.55);
  background: rgba(236, 230, 222, 0.82);
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="suspense-thriller"]
  .listen-cast-spotlight-btn {
  color: #1e1c18;
  border-color: rgba(60, 58, 54, 0.42);
  background: rgba(164, 158, 150, 0.76);
  box-shadow: inset 0 1px 0 rgba(255, 252, 248, 0.2);
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="suspense-thriller"]
  .listen-cast-spotlight-btn:hover {
  background: rgba(184, 178, 170, 0.9);
  border-color: rgba(40, 38, 34, 0.55);
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="suspense-thriller"]
  .listen-cast-spotlight-btn.is-current {
  background: rgba(200, 194, 186, 0.94);
  border-color: rgba(30, 28, 24, 0.62);
  box-shadow: 0 0 0 1px rgba(70, 68, 64, 0.32);
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="suspense-thriller"]
  .listen-spread-pages-row {
  position: relative;
  align-items: stretch;
  background: #10100e;
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="suspense-thriller"]
  .listen-spread-page-dim--row,
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="suspense-thriller"]
  .listen-spread-page-dim--left,
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="suspense-thriller"]
  .listen-spread-page-dim--right {
  display: none !important;
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="suspense-thriller"]
  .listen-spread-page
  .listen-page-skin-layer {
  background-color: var(--listen-suspense-page-base);
  background-image: var(--listen-suspense-page-fill);
  background-size: auto, cover, 280px 280px;
  background-position: center, center, 0 0;
  background-repeat: no-repeat, no-repeat, repeat;
  box-shadow:
    inset 0 0 0 1px rgba(24, 22, 20, 0.34),
    inset 0 0 28px rgba(0, 0, 0, 0.14);
  overflow: hidden;
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="suspense-thriller"]
  .listen-spread-page
  .listen-text-scroll,
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="suspense-thriller"]
  .listen-spread-page
  .listen-companion-text-scroll,
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="suspense-thriller"]
  .listen-spread-page
  .listen-story-image-slot {
  background: transparent;
  box-shadow: none;
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="suspense-thriller"]
  .listen-spread-page:not(.listen-spread-page--image-side)
  .listen-text-scroll::before,
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="suspense-thriller"]
  .listen-spread-page:not(.listen-spread-page--image-side)
  .listen-companion-text-scroll::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(
      ellipse 94% 90% at 50% 44%,
      rgba(236, 232, 224, 0.38) 0%,
      rgba(220, 214, 206, 0.22) 48%,
      rgba(200, 194, 186, 0.1) 78%,
      transparent 100%
    );
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="suspense-thriller"]
  .listen-spread-page:not(.listen-spread-page--image-side)
  .listen-text-scroll
  .listen-text,
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="suspense-thriller"]
  .listen-spread-page:not(.listen-spread-page--image-side)
  .listen-companion-text-scroll
  .listen-text {
  position: relative;
  z-index: 1;
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="suspense-thriller"]
  .listen-text,
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="suspense-thriller"]
  .listen-text-preview {
  color: var(--listen-skin-ink);
  font-family: "Playfair Display", Georgia, "Times New Roman", serif;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.58;
  text-shadow: none;
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="suspense-thriller"]
  .listen-text
  .listen-word:not(.listen-word-spoken):not(.listen-word-active),
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="suspense-thriller"]
  .listen-text-preview
  .listen-word:not(.listen-word-spoken):not(.listen-word-active) {
  color: var(--listen-skin-ink);
  opacity: 1;
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="suspense-thriller"]
  .listen-text
  .listen-word-spoken,
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="suspense-thriller"]
  .listen-text-preview
  .listen-word-spoken {
  color: var(--listen-skin-spoken);
  opacity: 0.82;
  text-shadow: none;
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="suspense-thriller"]
  .listen-text-translation {
  color: var(--listen-skin-muted);
  text-shadow: none;
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="suspense-thriller"]
  .listen-page-number {
  color: color-mix(in srgb, var(--listen-skin-muted) 75%, #10100e);
  opacity: 0.82;
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: none;
  text-shadow: none;
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="suspense-thriller"][data-book-spread-active="left"]
  .listen-spread-page--companion::before,
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="suspense-thriller"][data-book-spread-active="right"]
  .listen-spread-page--current::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background: rgba(8, 8, 6, 0.32);
}

/* ---- Well-Worn Novel (Cozy Hearth) ---- */
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="well-worn-novel"] {
  --listen-skin-ink: #5c4f3c;
  --listen-skin-muted: #76614d;
  --listen-skin-spoken: #988971;
  --listen-worn-page-base: #dccdb2;
  --listen-worn-page-fill:
    radial-gradient(
      ellipse 72% 58% at 50% 42%,
      rgba(255, 246, 220, 0.04) 0%,
      rgba(120, 88, 52, 0.1) 55%,
      rgba(72, 48, 26, 0.18) 100%
    ),
    linear-gradient(
      180deg,
      rgba(100, 72, 42, 0.08) 0%,
      transparent 28%,
      transparent 72%,
      rgba(90, 58, 30, 0.12) 100%
    ),
    var(--listen-skin-well-worn-novel);
  --listen-worn-binding-base: #6a4630;
  --listen-worn-binding-fill: var(--listen-skin-well-worn-novel-binding);
  --listen-folio-curl-height: 22px;
  --listen-folio-curl-width: 18px;
  overflow: visible;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

[data-theme="dark"]
  .listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="well-worn-novel"] {
  --listen-skin-ink: #6d604b; /* #38291d;  464543 */
  --listen-skin-muted: #76614d;
  --listen-skin-spoken: #988971; /* #8b755f; */
  background: transparent;
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="well-worn-novel"]
  #listen-in-scene-panel {
  margin: 0;
  background-color: var(--listen-worn-binding-base);
  background-image: var(--listen-worn-binding-fill);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-bottom: 1px solid rgba(86, 58, 32, 0.42);
  box-shadow: 0 4px 14px rgba(35, 18, 6, 0.3);
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="well-worn-novel"]
  .listen-in-scene-header,
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="well-worn-novel"]
  .listen-in-scene-toolbar {
  border-color: rgba(100, 68, 38, 0.34);
  background-color: var(--listen-worn-binding-base);
  background-image: var(--listen-worn-binding-fill);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="well-worn-novel"]
  .listen-in-scene-toggle,
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="well-worn-novel"]
  .listen-in-scene-help-btn {
  color: #f4dfb8;
  text-shadow: 0 1px 2px rgba(20, 10, 3, 0.65);
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="well-worn-novel"]
  .listen-in-scene-toggle-label {
  color: #f4dfb8;
  opacity: 0.95;
  text-shadow: 0 1px 2px rgba(20, 10, 3, 0.65);
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="well-worn-novel"]
  .listen-nav-btn {
  color: #3b2b1f;
  border-color: rgba(96, 64, 34, 0.38);
  background: rgba(242, 222, 184, 0.7);
  box-shadow: inset 0 1px 0 rgba(255, 252, 238, 0.45);
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="well-worn-novel"]
  .listen-nav-btn:hover:not(:disabled) {
  color: #21170f;
  border-color: rgba(76, 48, 24, 0.52);
  background: rgba(250, 234, 202, 0.88);
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="well-worn-novel"]
  .listen-cast-spotlight-btn {
  color: #3b2b1f;
  border-color: rgba(96, 64, 34, 0.36);
  background: rgba(190, 155, 106, 0.68);
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="well-worn-novel"]
  .listen-cast-spotlight-btn:hover,
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="well-worn-novel"]
  .listen-cast-spotlight-btn.is-current {
  background: rgba(215, 183, 132, 0.86);
  border-color: rgba(78, 50, 26, 0.5);
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="well-worn-novel"]
  .listen-spread-pages-row {
  position: relative;
  align-items: stretch;
  overflow: visible;
  background: transparent;
  perspective: 1400px;
  perspective-origin: 50% 42%;
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="well-worn-novel"]
  .listen-spread-page-dim--row,
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="well-worn-novel"]
  .listen-spread-page-dim--left,
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="well-worn-novel"]
  .listen-spread-page-dim--right {
  display: none !important;
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="well-worn-novel"]
  .listen-spread-page {
  overflow: visible;
  background: transparent !important;
  border: none;
}

/*
 * Minimal (dialog) only: paragraph mode already wins overflow:hidden via the shared
 * non-fantasy paragraph flex-clip rules, which contains mix-blend foxing on the skin
 * layer. Dialog kept overflow:visible, so multiply overlays composited through to the
 * environment. Match paragraph containment for this skin without touching other skins.
 */
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="well-worn-novel"][data-display-format="dialog"]
  .listen-spread-page {
  overflow: hidden;
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="well-worn-novel"][data-display-format="dialog"]
  .listen-book-page-face--front {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  width: 100%;
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="well-worn-novel"][data-display-format="dialog"]
  .listen-book-page-body {
  background-color: var(--listen-worn-page-base);
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="well-worn-novel"]
  .listen-book-page-flip,
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="well-worn-novel"]
  .listen-book-page-face {
  background: transparent;
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="well-worn-novel"]
  .listen-spread-page--current {
  transform: rotateY(1.6deg);
  transform-origin: 100% 46%;
  border: none;
  border-right: none;
  outline: none;
  box-shadow: none;
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="well-worn-novel"]
  .listen-spread-page--companion {
  transform: rotateY(-1.6deg);
  transform-origin: 0% 46%;
  border: none;
  outline: none;
  box-shadow: none;
}

/* Keep gutter depth on the clipped page body so the unclipped page box stays invisible. */
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="well-worn-novel"]
  .listen-spread-page--current
  .listen-book-page-body {
  box-shadow: inset -10px 0 16px -6px rgba(40, 24, 12, 0.22);
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="well-worn-novel"]
  .listen-spread-page--companion
  .listen-book-page-body {
  box-shadow: inset 10px 0 16px -6px rgba(40, 24, 12, 0.22);
}

/* Avoid opacity on the rectangular page wrappers (leaves a faint box edge); dim via clipped overlay. */
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="well-worn-novel"]
  .listen-spread-pages-row.is-book-page-right-active
  .listen-spread-page--current,
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="well-worn-novel"]
  .listen-spread-pages-row.is-book-page-left-active
  .listen-spread-page--companion,
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="well-worn-novel"]
  .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="well-worn-novel"]
  .listen-spread-pages-row.is-book-page-right-active
  .listen-spread-page--companion {
  box-shadow: none;
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="well-worn-novel"]
  .listen-book-page-body {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  width: 100%;
  overflow: hidden;
}

/* Smooth open-folio bow on top/bottom; subtle deckle only on outer vertical edges. */
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="well-worn-novel"]
  .listen-spread-page--current
  .listen-book-page-body {
  -webkit-clip-path: polygon(
    /* top bow */
    0% 18px,
    20% 10px,
    40% 6px,
    50% 4px,
    60% 6px,
    80% 11px,
    100% 20px,
    /* spine edge */
    100% calc(100% - 20px),
    /* bottom bow */
    80% calc(100% - 11px),
    60% calc(100% - 6px),
    50% calc(100% - 4px),
    40% calc(100% - 6px),
    20% calc(100% - 10px),
    0% calc(100% - 18px),
    /* outer left deckle (bottom ? top) ? soft amplitude */
    0.22% 90%,
    0% 78%,
    0.28% 66%,
    0.05% 54%,
    0.25% 42%,
    0% 30%,
    0.2% 18%,
    0.05% 8%
  );
  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),
    0.22% 90%,
    0% 78%,
    0.28% 66%,
    0.05% 54%,
    0.25% 42%,
    0% 30%,
    0.2% 18%,
    0.05% 8%
  );
}

/* Smooth open-folio bow; subtle deckle on outer right edge. */
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="well-worn-novel"]
  .listen-spread-page--companion
  .listen-book-page-body {
  -webkit-clip-path: polygon(
    /* top bow */
    0% 20px,
    20% 11px,
    40% 6px,
    50% 4px,
    60% 5px,
    80% 10px,
    100% 18px,
    /* outer right deckle (top ? bottom) ? soft amplitude */
    99.95% 8%,
    99.8% 18%,
    100% 30%,
    99.75% 42%,
    100% 54%,
    99.72% 66%,
    100% 78%,
    99.78% 90%,
    /* bottom-right into bottom bow */
    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,
    99.95% 8%,
    99.8% 18%,
    100% 30%,
    99.75% 42%,
    100% 54%,
    99.72% 66%,
    100% 78%,
    99.78% 90%,
    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)
  );
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="well-worn-novel"]
  .listen-spread-page
  .listen-page-skin-layer {
  background-color: var(--listen-worn-page-base);
  background-image: var(--listen-worn-page-fill);
  background-size: auto, auto, cover;
  background-position: center, center, center;
  background-repeat: no-repeat;
  box-shadow:
    inset 0 0 0 1px rgba(86, 54, 28, 0.32),
    inset 0 0 36px rgba(78, 50, 24, 0.16),
    inset 0 1px 0 rgba(255, 250, 232, 0.12);
  overflow: hidden;
}

/* Soft center desaturation / edge foxing over the baked texture. */
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="well-worn-novel"]
  .listen-spread-page
  .listen-page-skin-layer::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(
      ellipse 68% 55% at 50% 45%,
      rgba(255, 250, 235, 0.05) 0%,
      rgba(140, 110, 70, 0.08) 42%,
      rgba(70, 46, 24, 0.2) 100%
    ),
    linear-gradient(
      90deg,
      rgba(72, 48, 26, 0.1) 0%,
      transparent 18%,
      transparent 82%,
      rgba(72, 48, 26, 0.1) 100%
    );
  mix-blend-mode: multiply;
  opacity: 0.85;
}

/* Flip left page so coffee/stain details sit on the outer edge. */
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="well-worn-novel"]
  .listen-spread-page--current
  .listen-page-skin-layer {
  transform: scaleX(-1);
  transform-origin: center;
}

/* Soft hardcover gutter and a narrow, slightly irregular binding crack. */
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="well-worn-novel"]
  .listen-book-spine-seam {
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 0.9rem;
  z-index: 3;
  pointer-events: none;
  transform: translateX(-50%);
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(81, 48, 24, 0.12) 20%,
    rgba(55, 31, 14, 0.34) 46%,
    rgba(43, 23, 10, 0.46) 50%,
    rgba(107, 69, 35, 0.24) 54%,
    rgba(81, 48, 24, 0.1) 80%,
    transparent 100%
  );
  filter: blur(0.15px);
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="well-worn-novel"]
  .listen-book-spine-seam::before {
  content: "";
  position: absolute;
  top: 3%;
  bottom: 3%;
  left: calc(50% - 1px);
  width: 2px;
  opacity: 0.46;
  background: #3f2512;
  clip-path: polygon(
    35% 0,
    75% 0,
    48% 12%,
    70% 25%,
    38% 39%,
    66% 54%,
    42% 70%,
    72% 84%,
    44% 100%,
    14% 100%,
    34% 84%,
    12% 70%,
    36% 54%,
    10% 39%,
    40% 25%,
    16% 12%
  );
}

/* Stacked fore-edge lines (foxed brown palette). */
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="well-worn-novel"]
  .listen-book-page-curl {
  display: block !important;
  position: absolute;
  left: 0;
  right: 0;
  height: var(--listen-folio-curl-height);
  z-index: 9;
  pointer-events: none;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="well-worn-novel"]
  .listen-book-page-curl--top {
  top: 0;
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="well-worn-novel"]
  .listen-book-page-curl--bottom {
  bottom: 0;
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="well-worn-novel"]
  .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='%23241810' 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='%23e4d2b0' 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='%234a3018' 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='%23d0ba92' 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='%231c1008' stroke-width='0.85' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="well-worn-novel"]
  .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='%23241810' 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='%23e4d2b0' 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='%234a3018' 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='%23d0ba92' 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='%231c1008' stroke-width='0.85' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="well-worn-novel"]
  .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='%23241810' 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='%23e4d2b0' 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='%234a3018' 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='%23d0ba92' 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='%231c1008' stroke-width='0.85' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="well-worn-novel"]
  .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='%23241810' 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='%23e4d2b0' 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='%234a3018' 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='%23d0ba92' 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='%231c1008' stroke-width='0.85' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
}

/* Vertical fore-edge page stacks on the outer sides.
 * Full page height; soft wavy outer + inner edges (not a hard vertical cut). */
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="well-worn-novel"]
  .listen-book-page-curl--outer {
  top: 0;
  bottom: 0;
  width: var(--listen-folio-curl-width);
  height: auto;
  left: auto;
  right: auto;
  background-color: var(--listen-worn-page-base);
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="well-worn-novel"]
  .listen-spread-page--current
  .listen-book-page-curl--outer {
  left: 0;
  -webkit-clip-path: polygon(
    /* outer left (bottom ? top) */
    0% 100%,
    10% 90%,
    0% 78%,
    12% 66%,
    2% 54%,
    11% 42%,
    0% 30%,
    10% 18%,
    0% 8%,
    0% 0%,
    /* inner right (top ? bottom) */
    100% 0%,
    88% 8%,
    100% 18%,
    90% 30%,
    100% 42%,
    89% 54%,
    100% 66%,
    88% 78%,
    100% 90%,
    100% 100%
  );
  clip-path: polygon(
    0% 100%,
    10% 90%,
    0% 78%,
    12% 66%,
    2% 54%,
    11% 42%,
    0% 30%,
    10% 18%,
    0% 8%,
    0% 0%,
    100% 0%,
    88% 8%,
    100% 18%,
    90% 30%,
    100% 42%,
    89% 54%,
    100% 66%,
    88% 78%,
    100% 90%,
    100% 100%
  );
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 100' preserveAspectRatio='none'%3E%3Cpath d='M4 0 Q7 16 4 33 Q1 50 4 67 Q7 84 4 100' fill='none' stroke='%23241810' stroke-width='1.35' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M7 0 Q4 14 7 31 Q10 48 7 65 Q4 82 7 100' fill='none' stroke='%23e4d2b0' stroke-width='1.15' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M10 0 Q13 17 10 34 Q7 51 10 68 Q13 85 10 100' fill='none' stroke='%234a3018' stroke-width='1' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M13 0 Q10 15 13 32 Q16 49 13 66 Q10 83 13 100' fill='none' stroke='%23d0ba92' stroke-width='0.95' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M16 0 Q17.5 16 16 33 Q14 50 16 67 Q17.5 84 16 100' fill='none' stroke='%231c1008' stroke-width='0.85' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="well-worn-novel"]
  .listen-spread-page--companion
  .listen-book-page-curl--outer {
  right: 0;
  -webkit-clip-path: polygon(
    /* inner left (bottom ? top) */
    0% 100%,
    12% 90%,
    0% 78%,
    11% 66%,
    0% 54%,
    10% 42%,
    0% 30%,
    12% 18%,
    0% 8%,
    0% 0%,
    /* outer right (top ? bottom) */
    100% 0%,
    90% 8%,
    100% 18%,
    89% 30%,
    100% 42%,
    88% 54%,
    98% 66%,
    100% 78%,
    90% 90%,
    100% 100%
  );
  clip-path: polygon(
    0% 100%,
    12% 90%,
    0% 78%,
    11% 66%,
    0% 54%,
    10% 42%,
    0% 30%,
    12% 18%,
    0% 8%,
    0% 0%,
    100% 0%,
    90% 8%,
    100% 18%,
    89% 30%,
    100% 42%,
    88% 54%,
    98% 66%,
    100% 78%,
    90% 90%,
    100% 100%
  );
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 100' preserveAspectRatio='none'%3E%3Cpath d='M2 0 Q5 16 2 33 Q0 50 2 67 Q5 84 2 100' fill='none' stroke='%23241810' stroke-width='1.35' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M5 0 Q2 14 5 31 Q8 48 5 65 Q2 82 5 100' fill='none' stroke='%23e4d2b0' stroke-width='1.15' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M8 0 Q11 17 8 34 Q5 51 8 68 Q11 85 8 100' fill='none' stroke='%234a3018' stroke-width='1' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M11 0 Q8 15 11 32 Q14 49 11 66 Q8 83 11 100' fill='none' stroke='%23d0ba92' stroke-width='0.95' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M14 0 Q17 16 14 33 Q11 50 14 67 Q17 84 14 100' fill='none' stroke='%231c1008' 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="well-worn-novel"]
  .listen-spread-page--current
  .listen-book-page-curl--outer {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 100' preserveAspectRatio='none'%3E%3Cpath d='M4 0 Q7 16 4 33 Q1 50 4 67 Q7 84 4 100' fill='none' stroke='%23140c06' stroke-width='1.35' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M7 0 Q4 14 7 31 Q10 48 7 65 Q4 82 7 100' fill='none' stroke='%23c9b48c' stroke-width='1.15' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M10 0 Q13 17 10 34 Q7 51 10 68 Q13 85 10 100' fill='none' stroke='%23382814' stroke-width='1' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M13 0 Q10 15 13 32 Q16 49 13 66 Q10 83 13 100' fill='none' stroke='%23b89a70' stroke-width='0.95' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M16 0 Q17.5 16 16 33 Q14 50 16 67 Q17.5 84 16 100' fill='none' stroke='%230e0804' 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="well-worn-novel"]
  .listen-spread-page--companion
  .listen-book-page-curl--outer {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 100' preserveAspectRatio='none'%3E%3Cpath d='M2 0 Q5 16 2 33 Q0 50 2 67 Q5 84 2 100' fill='none' stroke='%23140c06' stroke-width='1.35' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M5 0 Q2 14 5 31 Q8 48 5 65 Q2 82 5 100' fill='none' stroke='%23c9b48c' stroke-width='1.15' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M8 0 Q11 17 8 34 Q5 51 8 68 Q11 85 8 100' fill='none' stroke='%23382814' stroke-width='1' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M11 0 Q8 15 11 32 Q14 49 11 66 Q8 83 11 100' fill='none' stroke='%23b89a70' stroke-width='0.95' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M14 0 Q17 16 14 33 Q11 50 14 67 Q17 84 14 100' fill='none' stroke='%230e0804' stroke-width='0.85' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
}

/*
 * Image pages: keep art under the outer curl so the curl?s wavy inner clip
 * forms the content edge. Top/bottom inset clears horizontal curls.
 * 2026-07-21: also inset from the outer side-page stack so art centers on the
 * inner page leaf, not the outer fore-edge stack.
 */
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="well-worn-novel"]
  .listen-book-page-curl {
  z-index: 12;
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="well-worn-novel"]
  .listen-spread-page--current.listen-spread-page--image-side
  .listen-page-image-slot {
  top: var(--listen-folio-curl-height, 22px);
  bottom: var(--listen-folio-curl-height, 22px);
  /* Equal leaf padding: side-page stack (18px) + same pad as the spine side. */
  left: calc(18px + 1.75rem);
  right: 1.75rem;
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="well-worn-novel"]
  .listen-spread-page--companion.listen-spread-page--image-side
  .listen-page-image-slot {
  top: var(--listen-folio-curl-height, 22px);
  bottom: var(--listen-folio-curl-height, 22px);
  /* Outer (right) must clear the fore-edge stack AND match spine gap. */
  right: calc(18px + 1.75rem);
  left: 1.75rem;
}

/* =============================================================================
 * BEGIN ? Shared folio novel chrome ? 2026-07-21
 * Side-page stacks, top/bottom page-edge lines, spine seam, open-folio bow.
 * Applied to: Suspense Thriller, Dark Parchment, Academic Notebook
 * (Well-Worn Novel keeps its own tuned rules above; Fantasy Scroll has its own.)
 * Rollback: delete this block (search "BEGIN ? Shared folio novel chrome").
 * ============================================================================= */

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="academic"] {
  --listen-folio-curl-height: 22px;
  --listen-folio-curl-width: 18px;
  --listen-folio-page-base: #ebe6dc;
  --listen-folio-spine-deep: rgba(40, 50, 70, 0.42);
  --listen-folio-spine-mid: rgba(70, 85, 110, 0.28);
  --listen-folio-gutter: rgba(40, 50, 70, 0.18);
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="suspense-thriller"] {
  --listen-folio-curl-height: 22px;
  --listen-folio-curl-width: 18px;
  /* Side-page stacks: mid-dark between page paper and Dark Parchment (2026-07-21). */
  --listen-folio-page-base: #4a443c;
  --listen-folio-spine-deep: rgba(24, 20, 16, 0.5);
  --listen-folio-spine-mid: rgba(60, 52, 44, 0.32);
  --listen-folio-gutter: rgba(30, 26, 22, 0.22);
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="dark-parchment"] {
  --listen-folio-curl-height: 22px;
  --listen-folio-curl-width: 18px;
  --listen-folio-page-base: var(--listen-dark-parchment-base, #1a1418);
  --listen-folio-spine-deep: rgba(0, 0, 0, 0.55);
  --listen-folio-spine-mid: rgba(40, 32, 40, 0.4);
  --listen-folio-gutter: rgba(0, 0, 0, 0.35);
}

.listen-atmosphere-host[data-reader-layout="book"]:is(
  [data-reader-skin="academic"],
  [data-reader-skin="suspense-thriller"],
  [data-reader-skin="dark-parchment"]
) {
  overflow: visible;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.listen-atmosphere-host[data-reader-layout="book"]:is(
  [data-reader-skin="academic"],
  [data-reader-skin="suspense-thriller"],
  [data-reader-skin="dark-parchment"]
)
  .listen-spread-pages-row {
  position: relative;
  align-items: stretch;
  overflow: visible;
  background: transparent;
  perspective: 1400px;
  perspective-origin: 50% 42%;
}

.listen-atmosphere-host[data-reader-layout="book"]:is(
  [data-reader-skin="academic"],
  [data-reader-skin="suspense-thriller"],
  [data-reader-skin="dark-parchment"]
)
  .listen-spread-page-dim--row,
.listen-atmosphere-host[data-reader-layout="book"]:is(
  [data-reader-skin="academic"],
  [data-reader-skin="suspense-thriller"],
  [data-reader-skin="dark-parchment"]
)
  .listen-spread-page-dim--left,
.listen-atmosphere-host[data-reader-layout="book"]:is(
  [data-reader-skin="academic"],
  [data-reader-skin="suspense-thriller"],
  [data-reader-skin="dark-parchment"]
)
  .listen-spread-page-dim--right {
  display: none !important;
}

.listen-atmosphere-host[data-reader-layout="book"]:is(
  [data-reader-skin="academic"],
  [data-reader-skin="suspense-thriller"],
  [data-reader-skin="dark-parchment"]
)
  .listen-spread-page {
  overflow: visible;
  background: transparent !important;
  border: none;
}

.listen-atmosphere-host[data-reader-layout="book"]:is(
  [data-reader-skin="academic"],
  [data-reader-skin="suspense-thriller"],
  [data-reader-skin="dark-parchment"]
)
  .listen-book-page-flip,
.listen-atmosphere-host[data-reader-layout="book"]:is(
  [data-reader-skin="academic"],
  [data-reader-skin="suspense-thriller"],
  [data-reader-skin="dark-parchment"]
)
  .listen-book-page-face {
  background: transparent;
}

.listen-atmosphere-host[data-reader-layout="book"]:is(
  [data-reader-skin="academic"],
  [data-reader-skin="suspense-thriller"],
  [data-reader-skin="dark-parchment"]
)
  .listen-spread-page--current {
  transform: rotateY(1.6deg);
  transform-origin: 100% 46%;
  border: none;
  outline: none;
  box-shadow: none;
}

.listen-atmosphere-host[data-reader-layout="book"]:is(
  [data-reader-skin="academic"],
  [data-reader-skin="suspense-thriller"],
  [data-reader-skin="dark-parchment"]
)
  .listen-spread-page--companion {
  transform: rotateY(-1.6deg);
  transform-origin: 0% 46%;
  border: none;
  outline: none;
  box-shadow: none;
}

.listen-atmosphere-host[data-reader-layout="book"]:is(
  [data-reader-skin="academic"],
  [data-reader-skin="suspense-thriller"],
  [data-reader-skin="dark-parchment"]
)
  .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"]:is(
  [data-reader-skin="academic"],
  [data-reader-skin="suspense-thriller"],
  [data-reader-skin="dark-parchment"]
)
  .listen-spread-page--current
  .listen-book-page-body {
  box-shadow: inset -10px 0 16px -6px var(--listen-folio-gutter);
  -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),
    0.22% 90%,
    0% 78%,
    0.28% 66%,
    0.05% 54%,
    0.25% 42%,
    0% 30%,
    0.2% 18%,
    0.05% 8%
  );
  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),
    0.22% 90%,
    0% 78%,
    0.28% 66%,
    0.05% 54%,
    0.25% 42%,
    0% 30%,
    0.2% 18%,
    0.05% 8%
  );
}

.listen-atmosphere-host[data-reader-layout="book"]:is(
  [data-reader-skin="academic"],
  [data-reader-skin="suspense-thriller"],
  [data-reader-skin="dark-parchment"]
)
  .listen-spread-page--companion
  .listen-book-page-body {
  box-shadow: inset 10px 0 16px -6px var(--listen-folio-gutter);
  -webkit-clip-path: polygon(
    0% 20px,
    20% 11px,
    40% 6px,
    50% 4px,
    60% 5px,
    80% 10px,
    100% 18px,
    99.95% 8%,
    99.8% 18%,
    100% 30%,
    99.75% 42%,
    100% 54%,
    99.72% 66%,
    100% 78%,
    99.78% 90%,
    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,
    99.95% 8%,
    99.8% 18%,
    100% 30%,
    99.75% 42%,
    100% 54%,
    99.72% 66%,
    100% 78%,
    99.78% 90%,
    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)
  );
}

.listen-atmosphere-host[data-reader-layout="book"]:is(
  [data-reader-skin="academic"],
  [data-reader-skin="suspense-thriller"],
  [data-reader-skin="dark-parchment"]
)
  .listen-book-spine-seam {
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 0.9rem;
  z-index: 3;
  pointer-events: none;
  transform: translateX(-50%);
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--listen-folio-spine-mid) 20%,
    var(--listen-folio-spine-deep) 46%,
    rgba(0, 0, 0, 0.35) 50%,
    var(--listen-folio-spine-mid) 54%,
    transparent 100%
  );
  filter: blur(0.15px);
}

.listen-atmosphere-host[data-reader-layout="book"]:is(
  [data-reader-skin="academic"],
  [data-reader-skin="suspense-thriller"],
  [data-reader-skin="dark-parchment"]
)
  .listen-book-spine-seam::before {
  content: "";
  position: absolute;
  top: 3%;
  bottom: 3%;
  left: calc(50% - 1px);
  width: 2px;
  opacity: 0.4;
  background: var(--listen-folio-spine-deep);
  clip-path: polygon(
    35% 0,
    75% 0,
    48% 12%,
    70% 25%,
    38% 39%,
    66% 54%,
    42% 70%,
    72% 84%,
    44% 100%,
    14% 100%,
    34% 84%,
    12% 70%,
    36% 54%,
    10% 39%,
    40% 25%,
    16% 12%
  );
}

.listen-atmosphere-host[data-reader-layout="book"]:is(
  [data-reader-skin="academic"],
  [data-reader-skin="suspense-thriller"],
  [data-reader-skin="dark-parchment"]
)
  .listen-book-page-curl {
  display: block !important;
  position: absolute;
  left: 0;
  right: 0;
  height: var(--listen-folio-curl-height);
  z-index: 12;
  pointer-events: none;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.listen-atmosphere-host[data-reader-layout="book"]:is(
  [data-reader-skin="academic"],
  [data-reader-skin="suspense-thriller"],
  [data-reader-skin="dark-parchment"]
)
  .listen-book-page-curl--top {
  top: 0;
}

.listen-atmosphere-host[data-reader-layout="book"]:is(
  [data-reader-skin="academic"],
  [data-reader-skin="suspense-thriller"],
  [data-reader-skin="dark-parchment"]
)
  .listen-book-page-curl--bottom {
  bottom: 0;
}

.listen-atmosphere-host[data-reader-layout="book"]:is(
  [data-reader-skin="academic"],
  [data-reader-skin="suspense-thriller"],
  [data-reader-skin="dark-parchment"]
)
  .listen-book-page-curl--outer {
  top: 0;
  bottom: 0;
  width: var(--listen-folio-curl-width);
  height: auto;
  left: auto;
  right: auto;
  background-color: var(--listen-folio-page-base);
}

.listen-atmosphere-host[data-reader-layout="book"]:is(
  [data-reader-skin="academic"],
  [data-reader-skin="suspense-thriller"],
  [data-reader-skin="dark-parchment"]
)
  .listen-spread-page--current
  .listen-book-page-curl--outer {
  left: 0;
  -webkit-clip-path: polygon(
    0% 100%,
    10% 90%,
    0% 78%,
    12% 66%,
    2% 54%,
    11% 42%,
    0% 30%,
    10% 18%,
    0% 8%,
    0% 0%,
    100% 0%,
    88% 8%,
    100% 18%,
    90% 30%,
    100% 42%,
    89% 54%,
    100% 66%,
    88% 78%,
    100% 90%,
    100% 100%
  );
  clip-path: polygon(
    0% 100%,
    10% 90%,
    0% 78%,
    12% 66%,
    2% 54%,
    11% 42%,
    0% 30%,
    10% 18%,
    0% 8%,
    0% 0%,
    100% 0%,
    88% 8%,
    100% 18%,
    90% 30%,
    100% 42%,
    89% 54%,
    100% 66%,
    88% 78%,
    100% 90%,
    100% 100%
  );
}

.listen-atmosphere-host[data-reader-layout="book"]:is(
  [data-reader-skin="academic"],
  [data-reader-skin="suspense-thriller"],
  [data-reader-skin="dark-parchment"]
)
  .listen-spread-page--companion
  .listen-book-page-curl--outer {
  right: 0;
  -webkit-clip-path: polygon(
    0% 100%,
    12% 90%,
    0% 78%,
    11% 66%,
    0% 54%,
    10% 42%,
    0% 30%,
    12% 18%,
    0% 8%,
    0% 0%,
    100% 0%,
    90% 8%,
    100% 18%,
    89% 30%,
    100% 42%,
    88% 54%,
    98% 66%,
    100% 78%,
    90% 90%,
    100% 100%
  );
  clip-path: polygon(
    0% 100%,
    12% 90%,
    0% 78%,
    11% 66%,
    0% 54%,
    10% 42%,
    0% 30%,
    12% 18%,
    0% 8%,
    0% 0%,
    100% 0%,
    90% 8%,
    100% 18%,
    89% 30%,
    100% 42%,
    88% 54%,
    98% 66%,
    100% 78%,
    90% 90%,
    100% 100%
  );
}

/* Per-skin edge-line palettes (SVG strokes must be baked into data-URIs). */
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="academic"]
  .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='%232a3544' 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='%23f7f4ee' 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='%235a6578' 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='%23e8e4dc' 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='%231a2332' stroke-width='0.85' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="academic"]
  .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='%232a3544' 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='%23f7f4ee' 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='%235a6578' 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='%23e8e4dc' 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='%231a2332' stroke-width='0.85' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="academic"]
  .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='%232a3544' 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='%23f7f4ee' 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='%235a6578' 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='%23e8e4dc' 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='%231a2332' stroke-width='0.85' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="academic"]
  .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='%232a3544' 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='%23f7f4ee' 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='%235a6578' 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='%23e8e4dc' 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='%231a2332' stroke-width='0.85' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="academic"]
  .listen-spread-page--current
  .listen-book-page-curl--outer {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 100' preserveAspectRatio='none'%3E%3Cpath d='M4 0 Q7 16 4 33 Q1 50 4 67 Q7 84 4 100' fill='none' stroke='%232a3544' stroke-width='1.35' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M7 0 Q4 14 7 31 Q10 48 7 65 Q4 82 7 100' fill='none' stroke='%23f7f4ee' stroke-width='1.15' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M10 0 Q13 17 10 34 Q7 51 10 68 Q13 85 10 100' fill='none' stroke='%235a6578' stroke-width='1' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M13 0 Q10 15 13 32 Q16 49 13 66 Q10 83 13 100' fill='none' stroke='%23e8e4dc' stroke-width='0.95' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M16 0 Q17.5 16 16 33 Q14 50 16 67 Q17.5 84 16 100' fill='none' stroke='%231a2332' stroke-width='0.85' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="academic"]
  .listen-spread-page--companion
  .listen-book-page-curl--outer {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 100' preserveAspectRatio='none'%3E%3Cpath d='M2 0 Q5 16 2 33 Q0 50 2 67 Q5 84 2 100' fill='none' stroke='%232a3544' stroke-width='1.35' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M5 0 Q2 14 5 31 Q8 48 5 65 Q2 82 5 100' fill='none' stroke='%23f7f4ee' stroke-width='1.15' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M8 0 Q11 17 8 34 Q5 51 8 68 Q11 85 8 100' fill='none' stroke='%235a6578' stroke-width='1' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M11 0 Q8 15 11 32 Q14 49 11 66 Q8 83 11 100' fill='none' stroke='%23e8e4dc' stroke-width='0.95' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M14 0 Q17 16 14 33 Q11 50 14 67 Q17 84 14 100' fill='none' stroke='%231a2332' stroke-width='0.85' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="suspense-thriller"]
  .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='%231a1814' 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='%238a8074' 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='%2338322c' 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='%236a6258' 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='%230c0a08' stroke-width='0.85' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="suspense-thriller"]
  .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='%231a1814' 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='%238a8074' 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='%2338322c' 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='%236a6258' 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='%230c0a08' stroke-width='0.85' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="suspense-thriller"]
  .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='%231a1814' 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='%238a8074' 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='%2338322c' 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='%236a6258' 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='%230c0a08' stroke-width='0.85' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="suspense-thriller"]
  .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='%231a1814' 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='%238a8074' 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='%2338322c' 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='%236a6258' 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='%230c0a08' stroke-width='0.85' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="suspense-thriller"]
  .listen-spread-page--current
  .listen-book-page-curl--outer {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 100' preserveAspectRatio='none'%3E%3Cpath d='M4 0 Q7 16 4 33 Q1 50 4 67 Q7 84 4 100' fill='none' stroke='%231a1814' stroke-width='1.35' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M7 0 Q4 14 7 31 Q10 48 7 65 Q4 82 7 100' fill='none' stroke='%238a8074' stroke-width='1.15' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M10 0 Q13 17 10 34 Q7 51 10 68 Q13 85 10 100' fill='none' stroke='%2338322c' stroke-width='1' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M13 0 Q10 15 13 32 Q16 49 13 66 Q10 83 13 100' fill='none' stroke='%236a6258' stroke-width='0.95' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M16 0 Q17.5 16 16 33 Q14 50 16 67 Q17.5 84 16 100' fill='none' stroke='%230c0a08' stroke-width='0.85' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="suspense-thriller"]
  .listen-spread-page--companion
  .listen-book-page-curl--outer {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 100' preserveAspectRatio='none'%3E%3Cpath d='M2 0 Q5 16 2 33 Q0 50 2 67 Q5 84 2 100' fill='none' stroke='%231a1814' stroke-width='1.35' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M5 0 Q2 14 5 31 Q8 48 5 65 Q2 82 5 100' fill='none' stroke='%238a8074' stroke-width='1.15' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M8 0 Q11 17 8 34 Q5 51 8 68 Q11 85 8 100' fill='none' stroke='%2338322c' stroke-width='1' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M11 0 Q8 15 11 32 Q14 49 11 66 Q8 83 11 100' fill='none' stroke='%236a6258' stroke-width='0.95' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M14 0 Q17 16 14 33 Q11 50 14 67 Q17 84 14 100' fill='none' stroke='%230c0a08' stroke-width='0.85' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="dark-parchment"]
  .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='%2308060a' 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='%236a6058' 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='%232a2420' 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='%234a423c' 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='%23040308' stroke-width='0.85' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="dark-parchment"]
  .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='%2308060a' 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='%236a6058' 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='%232a2420' 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='%234a423c' 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='%23040308' stroke-width='0.85' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="dark-parchment"]
  .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='%2308060a' 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='%236a6058' 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='%232a2420' 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='%234a423c' 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='%23040308' stroke-width='0.85' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="dark-parchment"]
  .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='%2308060a' 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='%236a6058' 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='%232a2420' 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='%234a423c' 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='%23040308' stroke-width='0.85' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="dark-parchment"]
  .listen-spread-page--current
  .listen-book-page-curl--outer {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 100' preserveAspectRatio='none'%3E%3Cpath d='M4 0 Q7 16 4 33 Q1 50 4 67 Q7 84 4 100' fill='none' stroke='%2308060a' stroke-width='1.35' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M7 0 Q4 14 7 31 Q10 48 7 65 Q4 82 7 100' fill='none' stroke='%236a6058' stroke-width='1.15' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M10 0 Q13 17 10 34 Q7 51 10 68 Q13 85 10 100' fill='none' stroke='%232a2420' stroke-width='1' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M13 0 Q10 15 13 32 Q16 49 13 66 Q10 83 13 100' fill='none' stroke='%234a423c' stroke-width='0.95' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M16 0 Q17.5 16 16 33 Q14 50 16 67 Q17.5 84 16 100' fill='none' stroke='%23040308' stroke-width='0.85' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="dark-parchment"]
  .listen-spread-page--companion
  .listen-book-page-curl--outer {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 100' preserveAspectRatio='none'%3E%3Cpath d='M2 0 Q5 16 2 33 Q0 50 2 67 Q5 84 2 100' fill='none' stroke='%2308060a' stroke-width='1.35' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M5 0 Q2 14 5 31 Q8 48 5 65 Q2 82 5 100' fill='none' stroke='%236a6058' stroke-width='1.15' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M8 0 Q11 17 8 34 Q5 51 8 68 Q11 85 8 100' fill='none' stroke='%232a2420' stroke-width='1' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M11 0 Q8 15 11 32 Q14 49 11 66 Q8 83 11 100' fill='none' stroke='%234a423c' stroke-width='0.95' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M14 0 Q17 16 14 33 Q11 50 14 67 Q17 84 14 100' fill='none' stroke='%23040308' stroke-width='0.85' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
}

/* Image inset: clear outer side-page stack, then match spine padding so the
 * plate reads centered on the leaf (not shoved against the fore-edge). */
.listen-atmosphere-host[data-reader-layout="book"]:is(
  [data-reader-skin="academic"],
  [data-reader-skin="suspense-thriller"],
  [data-reader-skin="dark-parchment"]
)
  .listen-spread-page--current.listen-spread-page--image-side
  .listen-page-image-slot {
  top: var(--listen-folio-curl-height);
  bottom: var(--listen-folio-curl-height);
  left: calc(
    var(--listen-folio-curl-width) + var(--listen-folio-img-spine-inset, clamp(1.25rem, 8%, 2rem))
  );
  right: var(--listen-folio-img-spine-inset, clamp(1.25rem, 8%, 2rem));
}

.listen-atmosphere-host[data-reader-layout="book"]:is(
  [data-reader-skin="academic"],
  [data-reader-skin="suspense-thriller"],
  [data-reader-skin="dark-parchment"]
)
  .listen-spread-page--companion.listen-spread-page--image-side
  .listen-page-image-slot {
  top: var(--listen-folio-curl-height);
  bottom: var(--listen-folio-curl-height);
  right: calc(
    var(--listen-folio-curl-width) + var(--listen-folio-img-spine-inset, clamp(1.25rem, 8%, 2rem))
  );
  left: var(--listen-folio-img-spine-inset, clamp(1.25rem, 8%, 2rem));
}

/* Image top/bottom follow the open-folio bow (not a straight rect). */
.listen-atmosphere-host[data-reader-layout="book"]:is(
  [data-reader-skin="well-worn-novel"],
  [data-reader-skin="fantasy-scroll"],

  [data-reader-skin="dark-parchment"]
)
  .listen-spread-page--current.listen-spread-page--image-side
  .listen-page-image,
.listen-atmosphere-host[data-reader-layout="book"]:is(
  [data-reader-skin="well-worn-novel"],
  [data-reader-skin="fantasy-scroll"],

  [data-reader-skin="dark-parchment"]
)
  .listen-spread-page--current.listen-spread-page--image-side
  .listen-page-image
  img {
  -webkit-clip-path: polygon(
    0% 14px,
    20% 7px,
    40% 3px,
    50% 2px,
    60% 3px,
    80% 8px,
    100% 16px,
    100% calc(100% - 16px),
    80% calc(100% - 8px),
    60% calc(100% - 3px),
    50% calc(100% - 2px),
    40% calc(100% - 3px),
    20% calc(100% - 7px),
    0% calc(100% - 14px)
  );
  clip-path: polygon(
    0% 14px,
    20% 7px,
    40% 3px,
    50% 2px,
    60% 3px,
    80% 8px,
    100% 16px,
    100% calc(100% - 16px),
    80% calc(100% - 8px),
    60% calc(100% - 3px),
    50% calc(100% - 2px),
    40% calc(100% - 3px),
    20% calc(100% - 7px),
    0% calc(100% - 14px)
  );
}

.listen-atmosphere-host[data-reader-layout="book"]:is(
  [data-reader-skin="well-worn-novel"],
  [data-reader-skin="fantasy-scroll"],

  [data-reader-skin="dark-parchment"]
)
  .listen-spread-page--companion.listen-spread-page--image-side
  .listen-page-image,
.listen-atmosphere-host[data-reader-layout="book"]:is(
  [data-reader-skin="well-worn-novel"],
  [data-reader-skin="fantasy-scroll"],

  [data-reader-skin="dark-parchment"]
)
  .listen-spread-page--companion.listen-spread-page--image-side
  .listen-page-image
  img,
.listen-atmosphere-host[data-reader-layout="book"]:is(
  [data-reader-skin="well-worn-novel"],
  [data-reader-skin="fantasy-scroll"],

  [data-reader-skin="dark-parchment"]
)
  .listen-spread-page--companion:not(.listen-spread-page--image-side)
  .listen-story-image,
.listen-atmosphere-host[data-reader-layout="book"]:is(
  [data-reader-skin="well-worn-novel"],
  [data-reader-skin="fantasy-scroll"],

  [data-reader-skin="dark-parchment"]
)
  .listen-spread-page--companion:not(.listen-spread-page--image-side)
  .listen-story-image
  img {
  -webkit-clip-path: polygon(
    0% 16px,
    20% 8px,
    40% 3px,
    50% 2px,
    60% 3px,
    80% 7px,
    100% 14px,
    100% calc(100% - 14px),
    80% calc(100% - 7px),
    60% calc(100% - 3px),
    50% calc(100% - 2px),
    40% calc(100% - 3px),
    20% calc(100% - 8px),
    0% calc(100% - 16px)
  );
  clip-path: polygon(
    0% 16px,
    20% 8px,
    40% 3px,
    50% 2px,
    60% 3px,
    80% 7px,
    100% 14px,
    100% calc(100% - 14px),
    80% calc(100% - 7px),
    60% calc(100% - 3px),
    50% calc(100% - 2px),
    40% calc(100% - 3px),
    20% calc(100% - 8px),
    0% calc(100% - 16px)
  );
}

/* Fantasy scroll: inset images from parchment margins (no outer page stack). */
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="fantasy-scroll"]
  .listen-spread-page--current.listen-spread-page--image-side
  .listen-page-image-slot {
  top: 22px;
  bottom: 22px;
  left: 0.55rem;
  right: var(--listen-folio-img-spine-inset, clamp(1.25rem, 8%, 2rem));
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="fantasy-scroll"]
  .listen-spread-page--companion.listen-spread-page--image-side
  .listen-page-image-slot {
  top: 22px;
  bottom: 22px;
  right: 0.55rem;
  left: var(--listen-folio-img-spine-inset, clamp(1.25rem, 8%, 2rem));
}

/* Fantasy Scroll + Full Paragraph overrides: equal L/R so plates center on the leaf.
 * Spine-biased inset (above) shoved art toward the outer edge. Landscape uses
 * Sci-Fi-like width; portrait keeps a modest equal margin. */
.listen-atmosphere-host[data-reader-layout="book"][data-display-format="paragraph"][data-reader-skin="fantasy-scroll"]
  .listen-spread-page--current.listen-spread-page--image-side
  .listen-page-image-slot,
.listen-atmosphere-host[data-reader-layout="book"][data-display-format="paragraph"][data-reader-skin="fantasy-scroll"]
  .listen-spread-page--companion.listen-spread-page--image-side
  .listen-page-image-slot {
  left: 0.75rem;
  right: 0.75rem;
}

.listen-atmosphere-host[data-reader-layout="book"][data-display-format="paragraph"][data-reader-skin="fantasy-scroll"]
  .listen-spread-page--current.listen-spread-page--image-side
  .listen-page-image-slot.is-landscape,
.listen-atmosphere-host[data-reader-layout="book"][data-display-format="paragraph"][data-reader-skin="fantasy-scroll"]
  .listen-spread-page--companion.listen-spread-page--image-side
  .listen-page-image-slot.is-landscape {
  left: 0.5rem;
  right: 0.5rem;
  --listen-skin-img-margin: clamp(0.4rem, 2.5%, 0.75rem);
  padding-left: var(--listen-skin-img-margin);
  padding-right: var(--listen-skin-img-margin);
  padding-top: var(--listen-skin-img-margin);
  padding-bottom: var(--listen-skin-img-margin);
}

/* Text pages: clear outer side-page stacks (Academic / Suspense / Dark Parchment).
 * Keep this tight ? only past the stack, not a wide empty leaf margin. */
.listen-atmosphere-host[data-reader-layout="book"]:is(
  [data-reader-skin="academic"],
  [data-reader-skin="suspense-thriller"],
  [data-reader-skin="dark-parchment"]
)
  .listen-spread-page--current:not(.listen-spread-page--image-side)
  .listen-text-scroll {
  padding-left: calc(var(--listen-folio-curl-width, 18px) + 0.2rem);
  padding-right: 0.85rem;
}

.listen-atmosphere-host[data-reader-layout="book"]:is(
  [data-reader-skin="academic"],
  [data-reader-skin="suspense-thriller"],
  [data-reader-skin="dark-parchment"]
)
  .listen-spread-page--companion:not(.listen-spread-page--image-side)
  .listen-companion-text-scroll {
  padding-left: 0.85rem;
  padding-right: calc(var(--listen-folio-curl-width, 18px) + 0.2rem);
}

/* Academic: red margin rule sits just inside the stack; text starts just after it. */
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="academic"]
  .listen-spread-page
  .listen-page-skin-layer::before {
  left: calc(var(--listen-folio-curl-width, 18px) + 0.45rem);
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="academic"]
  .listen-spread-page--current:not(.listen-spread-page--image-side)
  .listen-text-scroll {
  padding-left: calc(var(--listen-folio-curl-width, 18px) + 0.75rem) !important;
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="academic"]
  .listen-spread-page--companion:not(.listen-spread-page--image-side)
  .listen-companion-text-scroll {
  padding-left: calc(var(--listen-folio-curl-width, 18px) + 0.75rem) !important;
  padding-right: calc(var(--listen-folio-curl-width, 18px) + 0.2rem) !important;
}


/* =============================================================================
 * END ? Shared folio novel chrome ? 2026-07-21
 * ============================================================================= */

/* Dog-ear + edge tear photo overlays kept in DOM but disabled in JS for now. */
.listen-page-dogear,
.listen-page-edge-tear {
  display: none;
  position: absolute;
  pointer-events: none;
  overflow: hidden;
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="well-worn-novel"]
  .listen-page-dogear:not([hidden]) {
  display: block;
  z-index: 2;
  width: min(46%, 15rem);
  height: min(34%, 12rem);
  mix-blend-mode: multiply;
  opacity: 0.82;
  filter: contrast(1.04);
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="well-worn-novel"]
  .listen-page-dogear[data-worn-corner="tr"] {
  top: 0;
  right: 0;
  background-position: right top;
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="well-worn-novel"]
  .listen-page-dogear[data-worn-corner="tl"] {
  top: 0;
  left: 0;
  background-position: right top;
  transform: scaleX(-1);
  transform-origin: center;
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="well-worn-novel"]
  .listen-page-dogear[data-worn-corner="br"] {
  bottom: 0;
  right: 0;
  background-position: right top;
  transform: scaleY(-1);
  transform-origin: center;
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="well-worn-novel"]
  .listen-page-dogear[data-worn-corner="bl"] {
  bottom: 0;
  left: 0;
  background-position: right top;
  transform: scale(-1);
  transform-origin: center;
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="well-worn-novel"]
  .listen-page-edge-tear:not([hidden]) {
  display: block;
  z-index: 2;
  mix-blend-mode: multiply;
  opacity: 0.78;
  filter: contrast(1.06);
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="well-worn-novel"]
  .listen-page-edge-tear[data-worn-tear-edge="top"] {
  top: 0;
  left: 8%;
  right: 8%;
  height: min(28%, 9.5rem);
  background-position: center top;
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="well-worn-novel"]
  .listen-page-edge-tear[data-worn-tear-edge="bottom"] {
  bottom: 0;
  left: 8%;
  right: 8%;
  height: min(28%, 9.5rem);
  background-position: center top;
  transform: scaleY(-1);
  transform-origin: center;
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="well-worn-novel"]
  .listen-page-edge-tear[data-worn-tear-edge="left"] {
  top: 18%;
  bottom: 18%;
  left: 0;
  width: min(36%, 9.5rem);
  background-position: center top;
  transform: rotate(-90deg) translateX(-40%);
  transform-origin: left center;
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="well-worn-novel"]
  .listen-page-edge-tear[data-worn-tear-edge="right"] {
  top: 18%;
  bottom: 18%;
  right: 0;
  width: min(36%, 9.5rem);
  background-position: center top;
  transform: rotate(90deg) translateX(40%);
  transform-origin: right center;
}

[data-theme="dark"]
  .listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="well-worn-novel"]
  .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='%23140c06' 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='%23c9b48c' 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='%23382814' 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='%23b89a70' 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='%230e0804' 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="well-worn-novel"]
  .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='%23140c06' 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='%23c9b48c' 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='%23382814' 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='%23b89a70' 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='%230e0804' 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="well-worn-novel"]
  .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='%23140c06' 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='%23c9b48c' 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='%23382814' 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='%23b89a70' 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='%230e0804' 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="well-worn-novel"]
  .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='%23140c06' 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='%23c9b48c' 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='%23382814' 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='%23b89a70' 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='%230e0804' stroke-width='0.85' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="well-worn-novel"]
  .listen-spread-page
  .listen-text-scroll,
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="well-worn-novel"]
  .listen-spread-page
  .listen-companion-text-scroll,
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="well-worn-novel"]
  .listen-spread-page
  .listen-story-image-slot {
  background: transparent;
  box-shadow: none;
  padding-top: 0.55rem;
}

/* Keep paragraph text clear of fore-edge stacks and the spine gutter.
 * Outer pad only needs a hair past the side-page stack ? larger values push
 * copy inward and make the leaf look empty beside the IN SCENE chrome. */
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="well-worn-novel"]
  .listen-spread-page--current:not(.listen-spread-page--image-side)
  .listen-text-scroll {
  padding-left: calc(var(--listen-folio-curl-width, 18px) + 0.2rem);
  padding-right: 0.85rem;
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="well-worn-novel"]
  .listen-spread-page--companion:not(.listen-spread-page--image-side)
  .listen-companion-text-scroll {
  padding-left: 0.85rem;
  padding-right: calc(var(--listen-folio-curl-width, 18px) + 0.2rem);
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="well-worn-novel"]
  .listen-text,
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="well-worn-novel"]
  .listen-text-preview {
  color: var(--listen-skin-ink);
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1.62;
  text-shadow: 0 0.35px 0 rgba(70, 42, 20, 0.14);
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="well-worn-novel"]
  .listen-text
  .listen-word:not(.listen-word-spoken):not(.listen-word-active),
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="well-worn-novel"]
  .listen-text-preview
  .listen-word:not(.listen-word-spoken):not(.listen-word-active) {
  color: var(--listen-skin-ink);
  opacity: 1;
}

/* Occasional thumb-drag ink smudge ? one continuous run across 2?3 words. */
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="well-worn-novel"]
  .listen-text
  .listen-worn-ink-smudge-run,
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="well-worn-novel"]
  .listen-text-preview
  .listen-worn-ink-smudge-run {
  display: inline;
  padding: 0.08em 0.12em;
  margin: 0 -0.04em;
  border-radius: 0.65em;
  background: linear-gradient(
    100deg,
    rgba(78, 50, 24, 0.02) 0%,
    rgba(78, 50, 24, 0.1) 12%,
    rgba(70, 42, 18, 0.14) 50%,
    rgba(78, 50, 24, 0.1) 88%,
    rgba(78, 50, 24, 0.02) 100%
  );
  box-shadow:
    0 0 0.55em 0.12em rgba(70, 42, 18, 0.06),
    0.15em 0 0.45em rgba(70, 42, 18, 0.05),
    -0.15em 0 0.45em rgba(70, 42, 18, 0.05);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  filter: blur(0.2px);
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="well-worn-novel"]
  .listen-text
  .listen-worn-ink-smudge-run
  .listen-word:not(.listen-word-spoken):not(.listen-word-active),
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="well-worn-novel"]
  .listen-text-preview
  .listen-worn-ink-smudge-run
  .listen-word:not(.listen-word-spoken):not(.listen-word-active) {
  color: color-mix(in srgb, var(--listen-skin-ink) 68%, #6a4a2e 32%);
  opacity: 0.82;
  letter-spacing: 0.015em;
  text-shadow:
    0.9px 0 0.9px rgba(70, 42, 18, 0.3),
    2px 0 1.6px rgba(70, 42, 18, 0.16),
    3.2px 0 2.4px rgba(70, 42, 18, 0.08),
    -0.4px 0 0.6px rgba(90, 60, 30, 0.12);
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="well-worn-novel"]
  .listen-text
  .listen-word-spoken,
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="well-worn-novel"]
  .listen-text-preview
  .listen-word-spoken {
  color: var(--listen-skin-spoken);
  opacity: 0.82;
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="well-worn-novel"]
  .listen-text-translation {
  color: var(--listen-skin-muted);
  text-shadow: none;
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="well-worn-novel"]
  .listen-page-number {
  color: color-mix(in srgb, var(--listen-skin-muted) 82%, #38291d);
  opacity: 0.8;
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: none;
  text-shadow: none;
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="well-worn-novel"]
  .listen-page-footer {
  padding-bottom: 0.45rem;
}

/* Faint page creases / wrinkles ? SVG painted per spread via JS. */
.listen-page-creases {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="well-worn-novel"]
  .listen-page-creases {
  display: block;
  mix-blend-mode: multiply;
  opacity: 0.88;
  filter: blur(0.25px);
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="well-worn-novel"][data-book-spread-active="left"]
  .listen-spread-page--companion
  .listen-book-page-body::before,
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="well-worn-novel"][data-book-spread-active="right"]
  .listen-spread-page--current
  .listen-book-page-body::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background: rgba(67, 43, 24, 0.14);
}

/* ---- 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-header,
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="romance"]
  .listen-in-scene-toolbar {
  border-color: color-mix(in srgb, var(--listen-romance-accent) 28%, var(--border));
  background:
    linear-gradient(180deg, rgba(255, 247, 245, 0.88), rgba(255, 224, 224, 0.72)),
    var(--listen-skin-romance-paper);
  background-size: 100% 100%, 256px 256px;
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="romance"]
  .listen-in-scene-toggle,
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="romance"]
  .listen-in-scene-help-btn {
  color: var(--listen-romance-accent-deep);
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="romance"]
  .listen-cast-spotlight-btn,
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="romance"]
  .listen-nav-btn {
  color: #4c2028;
  border-color: rgba(139, 24, 48, 0.28);
  background: rgba(255, 246, 244, 0.78);
}

.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-page-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 \B7  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-page-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"][data-scifi-word-reveal="on"][data-playback-active="1"]
  .listen-text:not(.listen-book-page-done)
  .listen-word:not(.listen-word-revealed):not(.listen-word-reveal-current),
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="sci-fi"][data-scifi-word-reveal="on"][data-playback-active="1"]
  .listen-text:not(.listen-book-page-done)
  .listen-word-gap:not(.listen-word-revealed):not(.listen-word-reveal-current) {
  opacity: 0.09;
  text-shadow: none;
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="sci-fi"][data-scifi-word-reveal="on"][data-playback-active="1"]
  .listen-word-reveal-current {
  animation: listen-scifi-word-materialize 220ms ease-out both;
}

@keyframes listen-scifi-word-materialize {
  from {
    opacity: 0.09;
    filter: blur(1.5px);
    text-shadow: 0 0 10px color-mix(in srgb, var(--listen-scifi-accent) 70%, transparent);
  }
  65% {
    opacity: 1;
    filter: blur(0);
    text-shadow: 0 0 7px color-mix(in srgb, var(--listen-scifi-accent) 55%, transparent);
  }
  to {
    opacity: 1;
    filter: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="sci-fi"][data-scifi-word-reveal="on"]
    .listen-word,
  .listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="sci-fi"][data-scifi-word-reveal="on"]
    .listen-word-gap {
    opacity: 1 !important;
    animation: none !important;
    filter: none !important;
  }
}

.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-scifi-scan-animation="off"]
  .listen-spread-pages-row::after,
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="sci-fi"][data-scifi-scan-animation="off"]
  .listen-spread-pages-row.is-scifi-scan-play::after {
  display: none !important;
  animation: none !important;
}

.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 !important;
}

.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;
  /* 2026-07-21: was `filter: none` ? skin-matched (see END block). Rollback tag: rollback/skin-img-before-2026-07-21 */
  filter: var(--listen-skin-img-filter, none);
  mix-blend-mode: var(--listen-skin-img-blend, normal);
  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:not(.is-crossfading)
  .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:not(.is-crossfading)
  .listen-chapter-art-layer:not(.is-active) {
  visibility: hidden;
  pointer-events: none;
}

.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);
  /* Match .listen-text horizontal inset so bilingual lines don't hit the page edge. */
  padding: 0.55rem 1.25rem 0;
}
.listen-text-translation[hidden] {
  display: none;
}
[data-theme="light"] .listen-text-translation {
  border-top-color: rgba(0, 0, 0, 0.12);
}

/* Book layout: keep Spanish out of the page scroll so page-fit / follow-scroll stay unchanged. */
.listen-atmosphere-host[data-reader-layout="book"] .listen-text-translation {
  display: none !important;
}

.listen-book-translation-dock {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  margin: 0.45rem 0 0.35rem;
  padding: 0.55rem 1.1rem 0.6rem;
  max-height: 6.75em;
  overflow-x: hidden;
  overflow-y: auto;
  border-radius: 4px;
  border: 1px solid color-mix(in srgb, var(--listen-skin-muted, var(--muted)) 42%, transparent);
  background: var(--panel);
  color: var(--listen-skin-ink, var(--text));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--listen-skin-muted, var(--muted)) 12%, transparent);
}
.listen-book-translation-dock[hidden] {
  display: none !important;
}
.listen-book-translation-text {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.45;
  font-style: italic;
  color: var(--listen-skin-muted, var(--muted));
}

.listen-book-translation-dock[data-reader-skin="fantasy-scroll"] {
  background:
    var(--listen-skin-parchment-photo, none),
    var(--listen-skin-parchment, #e8d4b0);
  background-size: cover, 256px 256px;
  border-color: color-mix(in srgb, #8b6040 42%, transparent);
}
.listen-book-translation-dock[data-reader-skin="academic"] {
  background: var(--listen-skin-notebook, #f4efe4);
  border-color: color-mix(in srgb, #8a9098 28%, transparent);
}
.listen-book-translation-dock[data-reader-skin="sci-fi"] {
  background: color-mix(in srgb, #041018 78%, #0a2430);
  border-color: color-mix(in srgb, #3dd6f5 42%, transparent);
}
.listen-book-translation-dock[data-reader-skin="sci-fi"] .listen-book-translation-text {
  color: color-mix(in srgb, #9ae8f5 80%, white);
}
.listen-book-translation-dock[data-reader-skin="stone-tablet"] {
  background: #5c564c;
  border-color: #cfc6b6;
}
.listen-book-translation-dock[data-reader-skin="stone-tablet"] .listen-book-translation-text {
  color: #f4ece0;
}
.listen-book-translation-dock[data-reader-skin="dark-parchment"] {
  background: #3a3228;
  border-color: #d4c4a0;
  font-family: Georgia, "Iowan Old Style", "Palatino Linotype", Palatino, "Times New Roman", serif;
}
.listen-book-translation-dock[data-reader-skin="dark-parchment"] .listen-book-translation-text {
  color: #f0e4cc;
  font-size: 1rem;
  line-height: 1.45;
  font-weight: 500;
  font-style: italic;
  letter-spacing: 0.01em;
}
.listen-book-translation-dock[data-reader-skin="well-worn-novel"] {
  background: #c4b48e;
  border-color: #6a5230;
}
.listen-book-translation-dock[data-reader-skin="well-worn-novel"] .listen-book-translation-text {
  color: #24180c;
}
.listen-book-translation-dock[data-reader-skin="romance"] {
  background: #f4e4d4;
  border-color: #b88878;
}
.listen-book-translation-dock[data-reader-skin="romance"] .listen-book-translation-text {
  color: #3d2420;
}
.listen-book-translation-dock[data-reader-skin="old-newspaper"] {
  background: color-mix(in srgb, var(--panel) 30%, #ddd4c0);
  border-color: color-mix(in srgb, #6a6458 35%, transparent);
}
.listen-book-translation-dock[data-reader-skin="suspense-thriller"] {
  background: #1a1410;
  border-color: #c4a080;
}
.listen-book-translation-dock[data-reader-skin="suspense-thriller"] .listen-book-translation-text {
  color: #c4b4a0;
}

.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%
  );
}

/* Book-local hatch ?rain? (repeating diagonal stripes) is disabled ? outside
 * Cinema + Default it read as a sliding square texture. Visual rain is only
 * the Cinema particle overlay (see updateListenRainOverlay). */
.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: 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 {
  content: none;
  animation: none;
}

.listen-atmosphere-host[data-ambience="rain_heavy"] .listen-atmosphere-overlay::before,
.listen-atmosphere-host[data-ambience="storm"] .listen-atmosphere-overlay::before {
  animation: none;
}

.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 ? theatrical title plate (generic across all environments).
 * Plate sits on ::before so title/cast stay fully opaque while the stage art
 * can be semi-transparent and soft-edged into the room behind. */
.listen-stinger-curtain {
  --listen-stinger-fade-ms: 800ms;
  --listen-stinger-plate-opacity: 0.92;
  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: transparent;
  opacity: 0;
  transition: opacity var(--listen-stinger-fade-ms) ease;
  pointer-events: none;
}

.listen-stinger-curtain::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-color: rgba(8, 10, 14, 0.35);
  background-image: url("/api/immersion/image/stinger-curtain-title-card.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: var(--listen-stinger-plate-opacity);
  /* Soft feather so hard card edges dissolve into the environment. */
  -webkit-mask-image: radial-gradient(
    ellipse 88% 82% at 50% 48%,
    #000 38%,
    rgba(0, 0, 0, 0.85) 58%,
    rgba(0, 0, 0, 0.35) 74%,
    transparent 92%
  );
  mask-image: radial-gradient(
    ellipse 88% 82% at 50% 48%,
    #000 38%,
    rgba(0, 0, 0, 0.85) 58%,
    rgba(0, 0, 0, 0.35) 74%,
    transparent 92%
  );
  pointer-events: none;
}

.listen-stinger-curtain.is-visible {
  opacity: 1;
}

/* Instant cover while Listen intro boots (no fade-in ? hides env/cover flicker). */
.listen-stinger-curtain.is-stinger-armed {
  transition: none;
  opacity: 1;
}

/* Plate provides the stage spotlight; keep this node for layout stability but hide the old CSS orb. */
.listen-stinger-spotlight {
  display: none;
}

.listen-stinger-kicker {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--spotlight, #e8c57a) 88%, #fff 12%);
  position: relative;
  z-index: 1;
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.85),
    0 0 18px rgba(0, 0, 0, 0.55);
}

.listen-stinger-title {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 700;
  color: #f4f1ea;
  line-height: 1.25;
  max-width: 100%;
  position: relative;
  z-index: 1;
  text-shadow:
    0 1px 3px rgba(0, 0, 0, 0.9),
    0 0 24px rgba(0, 0, 0, 0.65);
}

.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);
}

/* Old newspaper: typewriter ink; dim trail uses muted gray. */
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="old-newspaper"]
  .listen-text
  .listen-word-spoken,
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="old-newspaper"]
  .listen-text
  .listen-word-gap.listen-word-spoken {
  color: var(--listen-skin-spoken);
  opacity: 0.82;
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="old-newspaper"]
  .listen-text
  .listen-word:not(.listen-word-spoken):not(.listen-word-active) {
  color: var(--listen-skin-ink);
  opacity: 1;
}

/* Dark parchment: flat maroon ink; dim trail stays in the same family. */
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="dark-parchment"]
  .listen-text
  .listen-word-spoken,
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="dark-parchment"]
  .listen-text
  .listen-word-gap.listen-word-spoken {
  color: var(--listen-skin-spoken);
  opacity: 0.72;
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="dark-parchment"]
  .listen-text
  .listen-word:not(.listen-word-spoken):not(.listen-word-active) {
  color: var(--listen-skin-ink);
  opacity: 1;
  text-shadow: none;
}

/* Suspense thriller: dark ink over stained case-file page. */
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="suspense-thriller"]
  .listen-text
  .listen-word-spoken,
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="suspense-thriller"]
  .listen-text
  .listen-word-gap.listen-word-spoken {
  color: var(--listen-skin-spoken);
  opacity: 0.82;
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="suspense-thriller"]
  .listen-text
  .listen-word:not(.listen-word-spoken):not(.listen-word-active) {
  color: var(--listen-skin-ink);
  opacity: 1;
}

.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.listen-volume-stack {
  flex-direction: column;
  align-items: stretch;
  gap: 0.28rem;
  min-width: min(11.5rem, 42vw);
}

.listen-volume-stack-title {
  font-size: 0.68rem;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted, rgba(255, 255, 255, 0.55));
  line-height: 1.1;
  text-align: left;
}

[data-theme="light"] .listen-volume-stack-title {
  color: color-mix(in srgb, var(--text) 55%, var(--muted) 45%);
}

.listen-volume-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
}

.listen-volume-row-label {
  flex: 0 0 4.6rem;
  font-size: 0.72rem;
  color: var(--text);
  opacity: 0.88;
  line-height: 1.1;
  white-space: nowrap;
}

[data-theme="light"] .listen-volume-row-label {
  opacity: 1;
  color: color-mix(in srgb, var(--text) 88%, var(--muted) 12%);
}

.listen-volume-row .listen-master-volume-slider {
  flex: 1 1 auto;
  width: auto;
  min-width: 3.5rem;
}

.listen-volume-row--dialog .listen-mute-btn,
.listen-volume-row--atmosphere .listen-mute-btn {
  flex: 0 0 auto;
}

.listen-master-volume-slider {
  width: min(7.5rem, 28vw);
  min-width: 4.5rem;
  margin: 0;
  accent-color: var(--accent);
}

@media (max-width: 640px) {
  .listen-volume-row-label {
    flex-basis: 3.8rem;
    font-size: 0.68rem;
  }

  .listen-master-volume.listen-volume-stack {
    min-width: min(12.5rem, 88vw);
  }
}

.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(--muted);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease;
}

[data-theme="light"] .listen-skip-time-btn {
  background: rgba(26, 26, 46, 0.04);
  color: color-mix(in srgb, var(--text) 82%, var(--muted) 18%);
}

/* iPad: keep page scale fixed; disable browser double-tap zoom globally. */
html.is-ipad-device,
html.is-ipad-device body {
  touch-action: manipulation;
}

.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;
  /* Above most chrome; below book summary popups/scrim (16010+). */
  z-index: 16000;
  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;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  flex-wrap: nowrap;
}

.cast-voice-preview .cast-icon-btn {
  width: 2.15rem;
  height: 2.15rem;
}

.cast-detail-preview-fx:not(:disabled) {
  color: #8b5a2b;
}

.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: "\25B8  ";
  color: var(--muted);
}

.cast-detail-collapsible[open] summary::before {
  content: "\25BE  ";
}

.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-listen-audio-build-panel {
  width: min(28rem, 100%);
}

.app-listen-audio-build-note {
  margin: -0.5rem 0 1rem;
}

.app-listen-audio-build-eta {
  margin: 0.35rem 0 0;
  opacity: 0.85;
  line-height: 1.35;
}

.app-listen-audio-build-progress {
  margin: 0 0 1.25rem;
}

.app-listen-audio-build-progress-track {
  height: 0.55rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--border) 80%, transparent);
  overflow: hidden;
  margin-bottom: 0.55rem;
}

.app-listen-audio-build-progress-fill {
  height: 100%;
  width: 0%;
  border-radius: inherit;
  background: var(--accent, #3b82f6);
  transition: width 0.25s ease;
}

.app-listen-audio-build-progress-fill.is-indeterminate {
  width: 32% !important;
  transition: none;
  animation: listen-audio-build-indeterminate 1.15s ease-in-out infinite;
}

.app-spanish-readalong-progress-panel {
  width: min(26rem, 100%);
}

.app-spanish-readalong-progress .app-modal-message {
  margin-bottom: 1rem;
}

@keyframes listen-audio-build-indeterminate {
  0% {
    transform: translateX(-120%);
  }
  100% {
    transform: translateX(320%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .app-listen-audio-build-progress-fill.is-indeterminate {
    animation: none;
    width: 18% !important;
  }
}

.listen-warm-strip {
  position: fixed;
  left: 50%;
  bottom: calc(
    var(--listen-dock-h, 3.35rem) + var(--listen-status-h, 0px) + 0.75rem
  );
  transform: translateX(-50%);
  z-index: 10060;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem 0.75rem;
  width: min(44rem, calc(100vw - 1.5rem));
  margin: 0;
  padding: 0.65rem 0.8rem;
  border-radius: 0.55rem;
  background: color-mix(in srgb, #0f172a 88%, var(--accent, #3b82f6) 12%);
  border: 1px solid color-mix(in srgb, var(--accent, #3b82f6) 55%, #fff 20%);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
  font-size: 0.82rem;
  color: #e2e8f0;
}

.listen-warm-strip.is-failed {
  border-color: color-mix(in srgb, #ef4444 70%, #fff 10%);
  background: color-mix(in srgb, #1c1010 90%, #ef4444 10%);
}

.listen-warm-strip.is-complete {
  border-color: color-mix(in srgb, #22c55e 65%, #fff 15%);
  background: color-mix(in srgb, #0f172a 86%, #22c55e 14%);
}

.listen-warm-strip[hidden] {
  display: none !important;
}

.listen-warm-strip-main {
  flex: 1 1 12rem;
  min-width: 0;
}

.listen-warm-strip-label {
  display: block;
  margin-bottom: 0.35rem;
  line-height: 1.35;
  font-weight: 600;
  color: #f8fafc;
}

.listen-warm-strip-track {
  height: 0.5rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  overflow: hidden;
}

.listen-warm-strip-fill {
  height: 100%;
  width: 0%;
  border-radius: inherit;
  background: var(--accent, #3b82f6);
  transition: width 0.25s ease;
}

.listen-warm-strip-fill.is-indeterminate {
  width: 32% !important;
  transition: none;
  animation: listen-warm-strip-indeterminate 1.2s ease-in-out infinite;
}

@keyframes listen-warm-strip-indeterminate {
  0% {
    transform: translateX(-30%);
  }
  100% {
    transform: translateX(280%);
  }
}

.listen-warm-strip-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.listen-warm-strip-actions .secondary {
  color: #f8fafc;
  border-color: rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.08);
}

.listen-warm-strip-actions .primary {
  min-width: 3.25rem;
}

.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: 0;
  flex: 0 0 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: "\25B8 ";
  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-auto-select-skin-row {
  margin: 0 0 0.5rem;
}

.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;
  box-sizing: border-box;
  width: min(18rem, calc(100vw - 1.25rem));
  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;
  white-space: normal;
  overflow-wrap: break-word;
  word-wrap: break-word;
  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;
  min-width: 0;
}

.sidebar-playback-settings .listen-highlight-speed-field .sidebar-slider-head {
  margin-bottom: 0.15rem;
}

.sidebar-playback-settings .listen-highlight-speed-field .field-help-tooltip,
.sidebar-playback-settings .listen-highlight-speed-field .field-help-tooltip-body,
.sidebar-playback-settings .listen-highlight-speed-field .field-help-tooltip-note {
  white-space: normal;
}

.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;
}

/* Author display:block would otherwise override the UA [hidden] rule. */
.listen-context-menu-item[hidden] {
  display: none !important;
}

.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-context-menu-divider {
  height: 1px;
  margin: 0.3rem 0.55rem;
  background: color-mix(in srgb, var(--border) 80%, transparent);
  border: 0;
}

.listen-context-menu-item-has-submenu::after {
  content: "\25B8 ";
  float: right;
  opacity: 0.7;
}

.listen-immersion-submenu {
  position: fixed;
  z-index: 12001;
  min-width: 14rem;
  max-width: min(18rem, calc(100vw - 1rem));
  max-height: min(70vh, 28rem);
  overflow: auto;
  padding: 0.35rem 0 0.45rem;
}

.listen-immersion-submenu-section + .listen-immersion-submenu-section {
  border-top: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
  margin-top: 0.25rem;
  padding-top: 0.25rem;
}

.listen-immersion-submenu-title {
  margin: 0;
  padding: 0.35rem 0.85rem 0.2rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.listen-immersion-submenu-empty {
  margin: 0;
  padding: 0.55rem 0.85rem;
}

.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%);
}

#app-edit-source-text .stacked-label {
  margin: 0;
}

#app-edit-source-text .app-modal-actions {
  margin-top: 1rem;
  padding-top: 0.15rem;
}

#app-edit-source-text-cleanse {
  margin-right: auto;
}

.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: "\25B8 ";
  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 { display: inline-flex } would otherwise override [hidden]. */
#btn-listen-chrome-toggle[hidden] {
  display: none !important;
}

#btn-listen-edit-source-text[hidden],
.listen-edit-source-btn[hidden] {
  display: none !important;
}

.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;
}

/* Author display:block above would otherwise override the UA [hidden] rule. */
.book-details-cover-preview[hidden] {
  display: none !important;
}

.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-hide-soon {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.78rem;
  color: var(--muted, #9aa0a6);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}

.library-modal-hide-soon input {
  width: 0.9rem;
  height: 0.9rem;
  margin: 0;
  accent-color: var(--accent, #3b82f6);
  cursor: pointer;
}

.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, 1fr) auto minmax(0, 1fr);
  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);
}

/*
 * Demo customer-recording chrome (data-demo-sample on #step-7):
 * hide curator strip, title bar clutter, skip-time pills, and cinema epilepsy note;
 * keep REC as a floating pill in a reserved strip above the stage.
 * Leaving demo clears the attribute.
 */
.panel-listen[data-demo-sample="1"] {
  position: relative;
  /* Blank strip above the stage so REC does not collide with chapter chrome. */
  padding-top: 2.65rem;
}

.panel-listen[data-demo-sample="1"] #catalog-curator-cache-panel,
.panel-listen[data-demo-sample="1"] .listen-cinema-disclaimer,
.panel-listen[data-demo-sample="1"] .listen-hero-leading > :not(#btn-rec-clip),
.panel-listen[data-demo-sample="1"] .listen-hero-title,
.panel-listen[data-demo-sample="1"] .listen-hero-actions,
.panel-listen[data-demo-sample="1"] .listen-skip-time {
  display: none !important;
}

.panel-listen[data-demo-sample="1"] .listen-hero {
  position: static;
  height: 0;
  margin: 0;
  overflow: visible;
  pointer-events: none;
}

.panel-listen[data-demo-sample="1"] .listen-hero-bar {
  position: absolute;
  top: 0.4rem;
  right: 0.85rem;
  z-index: 45;
  display: flex;
  width: auto;
  max-width: none;
  grid-template-columns: none;
  gap: 0;
  padding: 0;
  border: none;
  border-left: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  pointer-events: auto;
}

.panel-listen[data-demo-sample="1"] .listen-hero-actions {
  display: none;
}

.panel-listen[data-demo-sample="1"] .listen-hero-leading {
  display: flex;
  margin: 0;
  pointer-events: auto;
}

/* Keep play controls centered; empty left column balances the volume column. */
.panel-listen[data-demo-sample="1"] .listen-transport-row {
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
}

.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-purchase-thanks {
  z-index: 1100;
}

.app-modal-purchase-thanks .app-modal-backdrop {
  pointer-events: none;
}

.app-purchase-thanks-panel {
  width: min(24rem, 100%);
  text-align: center;
  padding: 1.7rem 1.6rem 1.55rem;
}

.app-purchase-thanks-spinner {
  width: 2.4rem;
  height: 2.4rem;
  margin: 0 auto 1.05rem;
  border: 3px solid color-mix(in srgb, var(--border) 70%, transparent);
  border-top-color: var(--accent, #6ea8fe);
  border-radius: 50%;
  animation: listen-boot-spin 0.85s linear infinite;
}

.app-modal-purchase-thanks .app-modal-title {
  margin: 0 0 0.55rem;
  font-size: 1.28rem;
}

.app-purchase-thanks-message {
  margin: 0;
  color: var(--text);
  font-size: 1rem;
  line-height: 1.5;
}

.app-purchase-thanks-status {
  margin: 0.85rem 0 0;
  color: var(--muted);
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.45;
}

.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-toggle-book-btn {
  position: relative;
  flex: 0 0 auto;
  color: var(--text);
}

.listen-hero-actions .listen-toggle-book-btn.listen-nav-btn--icon {
  width: 2rem;
  height: 2rem;
}

.listen-toggle-book-btn.listen-nav-btn--icon svg.listen-toggle-book-icon {
  /* Fill the control like Start Over ? not a tiny glyph inside a padded frame. */
  width: 1.35rem;
  height: 1.35rem;
}

.listen-toggle-book-btn .listen-toggle-book-icon {
  display: none;
}

.listen-toggle-book-btn:not(.is-book-hidden) .listen-toggle-book-icon--hide,
.listen-toggle-book-btn.is-book-hidden .listen-toggle-book-icon--show {
  display: block;
}

.listen-toggle-book-tooltip {
  right: 0;
  left: auto;
  top: calc(100% + 0.45rem);
  bottom: auto;
  width: max-content;
  max-width: min(18.5rem, 78vw);
  transform: translateY(-0.15rem);
}

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

.listen-toggle-book-btn:disabled .listen-toggle-book-tooltip {
  opacity: 0;
  visibility: hidden;
}

/* Ambience / No Skin: hide reading chrome so the background scene can breathe,
   but keep the title bar shell so Show/Hide book stays reachable. */
.panel-listen[data-listen-book-chrome="0"] .listen-hero-leading > *,
.panel-listen[data-listen-book-chrome="0"] .listen-hero-actions > :not(#btn-listen-toggle-book),
.panel-listen[data-listen-book-chrome="0"] #listen-in-scene-panel,
.panel-listen[data-listen-book-chrome="0"] #catalog-curator-cache-panel {
  display: none !important;
}

.panel-listen[data-listen-book-chrome="0"] .listen-hero-bar {
  border: none !important;
  border-left: none !important;
  background: transparent !important;
  box-shadow: none !important;
  padding-left: 0;
  padding-right: 0;
  grid-template-columns: minmax(2.75rem, 1fr) auto minmax(2.75rem, 1fr);
}

.panel-listen[data-listen-book-chrome="0"] .listen-hero-leading,
.panel-listen[data-listen-book-chrome="0"] .listen-hero-title {
  visibility: hidden;
  pointer-events: none;
  min-width: 2.75rem;
}

.panel-listen[data-listen-book-chrome="0"] .listen-hero-title {
  grid-column: 2;
  justify-self: center;
}

.panel-listen[data-listen-book-chrome="0"] .listen-hero-actions {
  grid-column: 3;
  justify-self: end;
  align-self: center;
  visibility: visible;
  pointer-events: auto;
}

/* Hide-book spacing only: without the book chrome the stack collapses upward.
   Pad the reader section so passage + transport sit closer to mid/lower viewport.
   Does not change book geometry or playback layout internals. */
.panel-listen[data-listen-book-chrome="0"] .listen-section-reader {
  padding-top: clamp(3rem, 14vh, 7rem);
}

@media (max-height: 700px) {
  .panel-listen[data-listen-book-chrome="0"] .listen-section-reader {
    padding-top: clamp(1.25rem, 6vh, 3rem);
  }
}

.panel-listen[data-listen-book-visible="0"] .listen-scroll-frame {
  display: none !important;
}

/* No Skin always keeps the text frame ? Hide book only removes chrome. */
.panel-listen[data-listen-book-visible="0"]
  .listen-atmosphere-host[data-reader-skin="no-skin"]
  .listen-scroll-frame {
  display: contents !important;
}

.panel-listen[data-listen-book-visible="0"] .listen-atmosphere-host,
.panel-listen[data-listen-book-visible="0"]
  .listen-atmosphere-host[data-reader-layout],
.panel-listen[data-listen-book-visible="0"]
  .listen-atmosphere-host[data-reader-skin],
.panel-listen
  .listen-atmosphere-host[data-reader-skin="no-skin"],
.panel-listen
  .listen-atmosphere-host[data-reader-layout][data-reader-skin="no-skin"] {
  min-height: 0;
  height: auto;
  background: transparent !important;
  background-image: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
  overflow: hidden;
}

.panel-listen[data-listen-book-visible="0"] .listen-atmosphere-overlay,
.panel-listen[data-listen-book-visible="0"] #listen-illustration-bg,
.panel-listen
  .listen-atmosphere-host[data-reader-skin="no-skin"]
  .listen-atmosphere-overlay,
.panel-listen
  .listen-atmosphere-host[data-reader-skin="no-skin"]
  #listen-illustration-bg {
  display: none !important;
  opacity: 0 !important;
}

.panel-listen[data-listen-book-visible="0"] .listen-reader-body,
.panel-listen
  .listen-atmosphere-host[data-reader-skin="no-skin"]
  .listen-reader-body {
  display: flex !important;
  flex-direction: column;
  gap: 0;
  min-height: 0 !important;
  height: clamp(32rem, 74vh, 36rem);
  background: transparent !important;
}

.panel-listen[data-listen-book-visible="0"] .listen-text-meta,
.panel-listen:has(.listen-atmosphere-host[data-reader-skin="no-skin"])
  .listen-text-meta {
  margin-bottom: 0.35rem;
}

/* ---- No Skin: web-view playback, words on cinema backdrop (no page chrome) ---- */
.listen-atmosphere-host[data-reader-skin="no-skin"] .listen-scroll-roller,
.listen-atmosphere-host[data-reader-skin="no-skin"] .listen-book-spine-seam,
.listen-atmosphere-host[data-reader-skin="no-skin"] .listen-spread-page-dim,
.listen-atmosphere-host[data-reader-skin="no-skin"] .listen-book-page-curl,
.listen-atmosphere-host[data-reader-skin="no-skin"] .listen-page-skin-layer,
.listen-atmosphere-host[data-reader-skin="no-skin"] .listen-page-creases,
.listen-atmosphere-host[data-reader-skin="no-skin"] .listen-page-dogear,
.listen-atmosphere-host[data-reader-skin="no-skin"] .listen-page-edge-tear,
.listen-atmosphere-host[data-reader-skin="no-skin"] .listen-page-footer,
.listen-atmosphere-host[data-reader-skin="no-skin"] .listen-scifi-spread-glow,
.listen-atmosphere-host[data-reader-skin="no-skin"] .listen-env-page-glows,
.listen-atmosphere-host[data-reader-skin="no-skin"] .listen-page-image-slot,
.listen-atmosphere-host[data-reader-skin="no-skin"] .listen-story-image-slot,
.listen-atmosphere-host[data-reader-skin="no-skin"] #listen-story-image-slot,
.listen-atmosphere-host[data-reader-skin="no-skin"] .listen-spread-page--companion,
.listen-atmosphere-host[data-reader-skin="no-skin"] #listen-companion-text-scroll,
.listen-atmosphere-host[data-reader-skin="no-skin"] .listen-book-page-face--back,
.listen-atmosphere-host[data-reader-skin="no-skin"] #listen-book-closed-overlay {
  display: none !important;
}

/* Keep scroll wrappers as display:contents so #listen-text stays in layout.
   Never hide .listen-scroll-parchment ? the passage is nested inside it. */
.listen-atmosphere-host[data-reader-skin="no-skin"] .listen-scroll-frame,
.listen-atmosphere-host[data-reader-skin="no-skin"] .listen-scroll-sheet,
.listen-atmosphere-host[data-reader-skin="no-skin"] .listen-scroll-parchment,
.listen-atmosphere-host[data-reader-skin="no-skin"] .listen-spread-pages-row {
  display: contents !important;
}

/* Candle leftovers only ? hearth smoke is clipped to the firebox instead. */
.listen-atmosphere-host[data-reader-skin="no-skin"] .listen-scroll-candle-glow,
.listen-atmosphere-host[data-reader-skin="no-skin"] .listen-scene-candle-smoke,
.listen-atmosphere-host[data-reader-skin="no-skin"] #listen-candle-drag-smoke {
  display: none !important;
  visibility: hidden !important;
  animation: none !important;
}

.listen-atmosphere-host[data-reader-skin="no-skin"] .listen-spread-page,
.listen-atmosphere-host[data-reader-skin="no-skin"] .listen-spread-page--current,
.listen-atmosphere-host[data-reader-skin="no-skin"] .listen-book-page-body,
.listen-atmosphere-host[data-reader-skin="no-skin"] .listen-book-page-flip,
.listen-atmosphere-host[data-reader-skin="no-skin"] .listen-book-page-face,
.listen-atmosphere-host[data-reader-skin="no-skin"] .listen-book-page-face--front,
.listen-atmosphere-host[data-reader-skin="no-skin"] .listen-text-scroll,
.listen-atmosphere-host[data-reader-skin="no-skin"] .listen-dialogue-panel {
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  border: none !important;
  outline: none !important;
}

/* Full open-book width; fixed page height with internal scroll (like book paragraph). */
.listen-atmosphere-host[data-reader-skin="no-skin"] .listen-spread-page--current {
  display: flex !important;
  flex-direction: column;
  flex: 1 1 auto;
  width: 100%;
  max-width: none;
  margin: 0;
  height: auto;
  min-height: 0;
  justify-content: flex-start;
  overflow: hidden;
}

.listen-atmosphere-host[data-reader-skin="no-skin"] .listen-book-page-body,
.listen-atmosphere-host[data-reader-skin="no-skin"] .listen-book-page-flip,
.listen-atmosphere-host[data-reader-skin="no-skin"] .listen-book-page-face--front {
  display: flex !important;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  width: 100%;
  overflow: hidden;
}

.listen-atmosphere-host[data-reader-skin="no-skin"] .listen-text-scroll,
.listen-atmosphere-host[data-reader-skin="no-skin"] .listen-dialogue-panel {
  overflow-x: hidden !important;
  overflow-y: auto !important;
  min-height: 0 !important;
  flex: 1 1 auto;
  height: auto;
  padding: 0.65rem 1.1rem 1.35rem !important;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.listen-atmosphere-host[data-reader-skin="no-skin"] .listen-text-scroll::-webkit-scrollbar,
.listen-atmosphere-host[data-reader-skin="no-skin"] .listen-dialogue-panel::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

/* Contrast only ? keep default listen font size / weight / family, left-aligned. */
.listen-atmosphere-host[data-reader-skin="no-skin"] .listen-text {
  text-align: left;
  color: #f3ebe0 !important;
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.72),
    0 0 14px rgba(0, 0, 0, 0.35);
  opacity: 1 !important;
  cursor: default;
  user-select: none;
}

.listen-atmosphere-host[data-reader-skin="no-skin"] .listen-text-scroll,
.listen-atmosphere-host[data-reader-skin="no-skin"] .listen-dialogue-panel,
.listen-atmosphere-host[data-reader-skin="no-skin"] .listen-spread-page,
.listen-atmosphere-host[data-reader-skin="no-skin"] .listen-book-page-body {
  cursor: default;
}

.listen-atmosphere-host[data-reader-skin="no-skin"][data-backdrop-tone="light"]
  .listen-text {
  color: #1c1612 !important;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.45),
    0 0 14px rgba(255, 255, 255, 0.28);
}

/* Speaker rail looks like a lone yellow line when words are still blank. */
.listen-atmosphere-host[data-reader-skin="no-skin"][data-display-format="paragraph"]
  .listen-text.listen-text-dialogue::before,
.listen-atmosphere-host[data-reader-skin="no-skin"][data-display-format="paragraph"]
  .listen-text.listen-text-narration::before {
  display: none !important;
}

.listen-atmosphere-host[data-reader-skin="no-skin"] .listen-text .listen-word,
.listen-atmosphere-host[data-reader-skin="no-skin"] .listen-text .listen-word-gap,
.listen-atmosphere-host[data-reader-skin="no-skin"] .listen-text .listen-word-spoken,
.listen-atmosphere-host[data-reader-skin="no-skin"] .listen-text .listen-word-active {
  color: inherit !important;
  background: transparent !important;
  opacity: 1 !important;
  cursor: default;
}

/* Spoken-word reveal: upcoming words are not laid out, so text fills from the
   top as it is spoken. (Opacity:0 still reserved space and made follow-scroll
   look like a one-line teleprompter on long pages.)
   Always hide unrevealed words while No Skin reveal is on ? including after
   paused Next/Prev, when playback-active is cleared by stopListen. */
.listen-atmosphere-host[data-reader-skin="no-skin"][data-word-reveal="on"]
  .listen-text
  .listen-word:not(.listen-word-revealed):not(.listen-word-reveal-current),
.listen-atmosphere-host[data-reader-skin="no-skin"][data-word-reveal="on"]
  .listen-text
  .listen-word-gap:not(.listen-word-revealed):not(.listen-word-reveal-current) {
  display: none !important;
}

.listen-atmosphere-host[data-reader-skin="no-skin"][data-word-reveal="on"]
  .listen-word-reveal-current {
  animation: listen-no-skin-word-materialize 240ms ease-out both;
}

@keyframes listen-no-skin-word-materialize {
  from {
    opacity: 0;
    filter: blur(1.2px);
  }
  to {
    opacity: 1;
    filter: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .listen-atmosphere-host[data-reader-skin="no-skin"][data-word-reveal="on"]
    .listen-word,
  .listen-atmosphere-host[data-reader-skin="no-skin"][data-word-reveal="on"]
    .listen-word-gap {
    display: inline !important;
    opacity: 1 !important;
    animation: none !important;
    filter: none !important;
  }
}

.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 {
  position: relative;
  margin: 0;
  min-width: 0;
  max-width: min(42rem, 100%);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
  justify-self: center;
  padding-bottom: 0;
  font-family: "Playfair Display", "Cormorant Garamond", Georgia, "Times New Roman", serif;
  font-size: 1.32rem;
  font-weight: 600;
  letter-spacing: 0.055em;
  line-height: 1.3;
  /* Match ImmersivePage wordmark “Page” (.app-brand-wordmark-read). */
  color: color-mix(in srgb, var(--spotlight) 72%, var(--text) 28%);
  text-shadow:
    0 1px 0 rgba(0, 0, 0, 0.45),
    0 -1px 0 rgba(255, 255, 255, 0.14),
    0 2px 6px rgba(0, 0, 0, 0.28);
}

.listen-hero-title::after {
  content: none;
}

.listen-footer {
  margin-top: var(--space-md);
  padding-top: 0;
  border-top: none;
}

/* Bottom-pinned Voice only / Light / Cinema + cinema disclaimer.
   Stacks above #global-status when that bar is visible (--listen-status-h). */
.listen-immersion-dock {
  position: fixed;
  left: 0;
  right: 0;
  bottom: var(--listen-status-h, 0px);
  z-index: 15950;
  box-sizing: border-box;
  padding: 0.65rem 1rem calc(0.55rem + env(safe-area-inset-bottom, 0px));
  background: transparent;
  border-top: none;
  pointer-events: none;
  overflow: visible;
}

.listen-immersion-dock .listen-immersion-chip {
  pointer-events: auto;
}

.panel-listen:not(.active) .listen-immersion-dock {
  display: none;
}

.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.45rem;
  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-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  width: 100%;
  gap: 0.35rem;
}

.listen-immersion-row-main {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  max-width: 100%;
}

.listen-immersion-chips {
  display: flex;
  flex-wrap: wrap;
  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-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);
}

.listen-chrome-chips {
  display: none;
}

.listen-chrome-toggle-btn .listen-chrome-toggle-icon {
  display: none;
}

.listen-chrome-toggle-btn .listen-chrome-toggle-icon--compress {
  display: block;
}

.listen-chrome-toggle-btn.is-minimal .listen-chrome-toggle-icon--compress {
  display: none;
}

.listen-chrome-toggle-btn.is-minimal .listen-chrome-toggle-icon--expand {
  display: block;
}

/* Header placement (left of account): keep tooltip on-screen. */
.app-header-actions #btn-listen-chrome-toggle .listen-hero-icon-tooltip {
  right: 0;
  left: auto;
  max-width: min(16rem, calc(100vw - 1.5rem));
  z-index: 80;
}

[data-theme="light"] .listen-hero-icon-tooltip {
  box-shadow: 0 8px 24px rgba(26, 26, 46, 0.16);
}

/* Minimal mode: hide secondary Listen chrome until Standard is selected.
   Keep Show/Hide book in the title-bar actions column. */
.panel-listen.listen-chrome-focus .listen-hero-actions > :not(#btn-listen-toggle-book),
.panel-listen.listen-chrome-focus .listen-hero-leading > *,
.panel-listen.listen-chrome-focus .listen-text-meta,
.panel-listen.listen-chrome-focus #listen-in-scene-panel,
.panel-listen.listen-chrome-focus .listen-skip-time,
.panel-listen.listen-chrome-focus .listen-master-volume,
.panel-listen.listen-chrome-focus .listen-status-line {
  display: none !important;
}

.panel-listen.listen-chrome-focus .listen-hero-bar {
  border: none !important;
  border-left: none !important;
  background: transparent !important;
  box-shadow: none !important;
  padding-left: 0;
  padding-right: 0;
  /* Keep 3-column grid so title stays centered when side controls are hidden. */
  grid-template-columns: minmax(2.75rem, 1fr) auto minmax(2.75rem, 1fr);
  align-items: center;
}

.panel-listen.listen-chrome-focus .listen-hero-leading {
  visibility: hidden;
  pointer-events: none;
  min-width: 2.75rem;
}

.panel-listen.listen-chrome-focus .listen-hero-title {
  grid-column: 2;
  justify-self: center;
  padding-bottom: 0.5rem;
  text-shadow:
    0 1px 0 rgba(0, 0, 0, 0.55),
    0 -1px 0 rgba(255, 255, 255, 0.16),
    0 2px 10px rgba(0, 0, 0, 0.4);
}

.panel-listen.listen-chrome-focus .listen-hero-actions {
  grid-column: 3;
  justify-self: end;
  align-self: center;
  visibility: visible;
  pointer-events: auto;
  min-width: 2.75rem;
}

.panel-listen.listen-chrome-focus .listen-hero-title::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0.08rem;
  transform: translateX(-50%);
  width: min(11rem, 48%);
  height: 1px;
  background: color-mix(in srgb, var(--spotlight) 58%, transparent);
  box-shadow: 0 0 6px color-mix(in srgb, var(--spotlight) 28%, transparent);
  pointer-events: none;
}

/* Minimal mode, or Cinema + non-Default backdrop: hide Light/Dark. */
body.listen-chrome-focus.wizard-step-listen .theme-toggle,
body.listen-theme-forced-dark .theme-toggle {
  display: none !important;
}

/* 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;
  position: relative;
  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: calc(100% + 0.45rem);
  bottom: auto;
  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);
}

/*
 * Current In Scene speaker pill — stronger ring + fill so it reads clearly
 * over book-skin button chrome (fantasy-scroll etc. were winning on border).
 * Rollback: restore prior .is-current block only:
 *   border-color: var(--spotlight);
 *   box-shadow: 0 0 0 1px color-mix(in srgb, var(--spotlight) 55%, transparent);
 * and delete the book [data-reader-skin] .is-current rule below.
 * Added 2026-08-20.
 */
.listen-cast-spotlight-btn.is-current {
  border-color: var(--spotlight);
  background: color-mix(in srgb, var(--spotlight) 18%, var(--panel));
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--spotlight) 70%, transparent),
    0 0 12px color-mix(in srgb, var(--spotlight) 32%, transparent);
  font-weight: 600;
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin]
  .listen-cast-spotlight-btn.is-current {
  border-color: var(--spotlight);
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--spotlight) 75%, transparent),
    0 0 14px color-mix(in srgb, var(--spotlight) 38%, transparent);
  font-weight: 600;
}

.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 (below pills while preset = cinema). */
.listen-cinema-disclaimer {
  margin: 0.15rem 0 0;
  max-width: min(36rem, calc(100vw - 2rem));
  text-align: center;
  font-size: 0.7rem;
  line-height: 1.25;
  color: var(--muted);
  opacity: 0.85;
  letter-spacing: 0.01em;
  white-space: nowrap;
  pointer-events: none;
}

@media (max-width: 40rem) {
  .listen-cinema-disclaimer {
    white-space: normal;
  }
}

.listen-cinema-disclaimer[hidden] {
  display: none !important;
}

.listen-cinema-disclaimer::before {
  content: "\26A0 ";
  margin-right: 0.4em;
  color: #d4a44a;
  font-size: 0.85em;
}

/* Non-Cinema Light: readable immersion chips on cream stage. */
[data-theme="light"] .listen-immersion-chip {
  background: var(--panel);
  border-color: var(--border);
  color: color-mix(in srgb, var(--text) 62%, var(--muted) 38%);
}

[data-theme="light"] .listen-immersion-chip.is-active {
  background: rgba(58, 111, 214, 0.14);
  border-color: var(--accent);
  color: var(--text);
}

[data-theme="light"] .listen-cinema-disclaimer {
  color: var(--muted);
}

/* 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 drops out at the bottom via mask — do NOT paint an opaque --bg wash.
 * That wash was wiping the Default Listen corner glow / grain under the rain.
 */
.listen-rain-overlay:not([hidden]) {
  -webkit-mask-image: linear-gradient(
    to top,
    transparent 0%,
    #000 14%,
    #000 100%
  );
  mask-image: linear-gradient(
    to top,
    transparent 0%,
    #000 14%,
    #000 100%
  );
}

.listen-rain-overlay:not([hidden])::after {
  content: none;
}

.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;
}

/* Author display:block otherwise overrides the HTML hidden attribute. */
.auth-skip[hidden] {
  display: none !important;
}

.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);
  /* Pin fireplace + window when cover crops; clip the right (armchair) instead. */
  background-position: left center;
}

.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);
}

.listen-environment-backdrop[data-environment="study-time"] {
  opacity: 0.96;
  /* Daylit classroom ? keep it readable, slight pullback so the notebook stays hero. */
  filter: brightness(0.94) contrast(1.02) saturate(0.96);
}

.listen-environment-backdrop[data-environment="study-time"]::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 54% 50% at 50% 42%, transparent 0%, transparent 46%, rgba(20, 24, 18, 0.1) 74%, rgba(20, 24, 18, 0.28) 100%),
    radial-gradient(ellipse 100% 90% at 50% 50%, transparent 34%, rgba(16, 20, 14, 0.14) 100%);
}

/* -- Study Time: window dust motes + desk foreground breathe (no masks) -- */
.listen-env-study-scene {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  --study-light-cycle: 12s;
  /* Wide diagonal shaft: window top-left -> desk (matches marked red bounds). */
  --study-god-ray-clip: polygon(0% 0%, 11% 0%, 98% 88%, 50% 100%, 0% 78%);
}

/* Soft daylight cone from the window onto the desk.
   Visible shaft with soft (not razor) edges ? like a volumetric beam. */
.listen-env-study-god-ray {
  position: absolute;
  inset: -8%;
  pointer-events: none;
  z-index: 0;
  background:
    linear-gradient(
      148deg,
      rgba(255, 252, 235, 0.55) 0%,
      rgba(255, 242, 205, 0.32) 28%,
      rgba(255, 232, 180, 0.18) 55%,
      rgba(255, 222, 165, 0.07) 78%,
      transparent 100%
    ),
    radial-gradient(
      ellipse 80% 65% at 16% 12%,
      rgba(255, 252, 240, 0.5) 0%,
      rgba(255, 240, 200, 0.16) 38%,
      transparent 65%
    );
  mix-blend-mode: screen;
  /* Tight core + short soft ramps so the edge reads, but isn't stark. */
  -webkit-mask-image: linear-gradient(
    148deg,
    transparent 0%,
    transparent 24%,
    rgba(0, 0, 0, 0.12) 29%,
    rgba(0, 0, 0, 0.45) 34%,
    rgba(0, 0, 0, 0.85) 40%,
    rgba(0, 0, 0, 0.95) 48%,
    rgba(0, 0, 0, 0.85) 56%,
    rgba(0, 0, 0, 0.45) 62%,
    rgba(0, 0, 0, 0.12) 68%,
    transparent 74%,
    transparent 100%
  );
  mask-image: linear-gradient(
    148deg,
    transparent 0%,
    transparent 24%,
    rgba(0, 0, 0, 0.12) 29%,
    rgba(0, 0, 0, 0.45) 34%,
    rgba(0, 0, 0, 0.85) 40%,
    rgba(0, 0, 0, 0.95) 48%,
    rgba(0, 0, 0, 0.85) 56%,
    rgba(0, 0, 0, 0.45) 62%,
    rgba(0, 0, 0, 0.12) 68%,
    transparent 74%,
    transparent 100%
  );
  filter: blur(16px);
  opacity: 0.72;
  animation: listen-study-god-ray-with-light var(--study-light-cycle, 12s) ease-in-out infinite
    alternate;
}

/* Light outer haze only ? keeps the edge soft without erasing the shaft. */
.listen-env-study-god-ray::after {
  content: "";
  position: absolute;
  inset: -6%;
  pointer-events: none;
  background: linear-gradient(
    148deg,
    rgba(255, 248, 220, 0.2) 0%,
    rgba(255, 235, 185, 0.08) 50%,
    transparent 85%
  );
  -webkit-mask-image: linear-gradient(
    148deg,
    transparent 0%,
    transparent 22%,
    rgba(0, 0, 0, 0.25) 32%,
    rgba(0, 0, 0, 0.55) 48%,
    rgba(0, 0, 0, 0.25) 64%,
    transparent 76%,
    transparent 100%
  );
  mask-image: linear-gradient(
    148deg,
    transparent 0%,
    transparent 22%,
    rgba(0, 0, 0, 0.25) 32%,
    rgba(0, 0, 0, 0.55) 48%,
    rgba(0, 0, 0, 0.25) 64%,
    transparent 76%,
    transparent 100%
  );
  filter: blur(28px);
  opacity: 0.65;
}


.listen-env-study-motes {
  position: absolute;
  /* Full plate; god-ray clip + JS spawn keep motes in the window-to-desk shaft. */
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
  -webkit-clip-path: var(--study-god-ray-clip);
  clip-path: var(--study-god-ray-clip);
  /* In sync with desk breathe: bright desk => motes visible; shadow => motes fade out. */
  animation: listen-study-motes-with-light var(--study-light-cycle, 12s) ease-in-out infinite
    alternate;
}

.listen-env-study-mote {
  position: absolute;
  left: var(--study-mote-x, 40%);
  top: var(--study-mote-y, 70%);
  width: var(--study-mote-size, 3.2px);
  height: var(--study-mote-size, 3.2px);
  border-radius: 50%;
  background: radial-gradient(
    circle at 40% 35%,
    rgba(255, 255, 245, 1) 0%,
    rgba(255, 245, 210, 0.85) 40%,
    rgba(255, 230, 170, 0.25) 70%,
    transparent 100%
  );
  box-shadow: 0 0 3px rgba(255, 245, 210, 0.7);
  opacity: 0;
  will-change: transform, opacity;
  /* Drift uses vw/vh ? % translate is relative to the mote itself (~3px) and barely moves. */
  --study-mote-dx: 3.2vw;
  --study-mote-dy: 6.5vh;
  animation: listen-study-mote-drift var(--study-mote-dur, 6.5s) linear infinite;
  animation-delay: var(--study-mote-delay, 0s);
}

.listen-env-study-mote--1 { --study-mote-size: 2.6px; }
.listen-env-study-mote--2 { --study-mote-size: 3.4px; }
.listen-env-study-mote--3 { --study-mote-size: 2.4px; }
.listen-env-study-mote--4 { --study-mote-size: 3.1px; }
.listen-env-study-mote--5 { --study-mote-size: 2.8px; }
.listen-env-study-mote--6 { --study-mote-size: 3.6px; }
.listen-env-study-mote--7 { --study-mote-size: 2.5px; }
.listen-env-study-mote--8 { --study-mote-size: 3.0px; }
.listen-env-study-mote--9 { --study-mote-size: 2.3px; }
.listen-env-study-mote--10 { --study-mote-size: 3.3px; }
.listen-env-study-mote--11 { --study-mote-size: 2.7px; }
.listen-env-study-mote--12 { --study-mote-size: 2.5px; }
.listen-env-study-mote--13 { --study-mote-size: 3.5px; }
.listen-env-study-mote--14 { --study-mote-size: 2.6px; }
.listen-env-study-mote--15 { --study-mote-size: 2.4px; }
.listen-env-study-mote--16 { --study-mote-size: 2.9px; }
.listen-env-study-mote--17 { --study-mote-size: 3.2px; }
.listen-env-study-mote--18 { --study-mote-size: 2.5px; }
.listen-env-study-mote--19 { --study-mote-size: 2.7px; }
.listen-env-study-mote--20 { --study-mote-size: 3.3px; }
.listen-env-study-mote--21 { --study-mote-size: 2.4px; }
.listen-env-study-mote--22 { --study-mote-size: 3.0px; }
.listen-env-study-mote--23 { --study-mote-size: 2.6px; }
.listen-env-study-mote--24 { --study-mote-size: 2.3px; }
.listen-env-study-mote--25 { --study-mote-size: 3.1px; }
.listen-env-study-mote--26 { --study-mote-size: 2.5px; }
.listen-env-study-mote--27 { --study-mote-size: 2.8px; }
.listen-env-study-mote--28 { --study-mote-size: 2.6px; }




@keyframes listen-study-mote-drift {
  0% {
    opacity: 0;
    transform: translate3d(0, 0, 0) scale(0.7);
  }
  12% {
    opacity: 0.85;
  }
  40% {
    opacity: 1;
    transform: translate3d(
        calc(var(--study-mote-dx, 3.2vw) * 0.45),
        calc(var(--study-mote-dy, 6.5vh) * 0.45),
        0
      )
      scale(1);
  }
  78% {
    opacity: 0.7;
    transform: translate3d(
        var(--study-mote-dx, 3.2vw),
        var(--study-mote-dy, 6.5vh),
        0
      )
      scale(0.95);
  }
  100% {
    opacity: 0;
    transform: translate3d(
        calc(var(--study-mote-dx, 3.2vw) * 1.08),
        calc(var(--study-mote-dy, 6.5vh) * 1.08),
        0
      )
      scale(0.6);
  }
}


/* Sparse muted leaves outside left windows (GIMP mask clips to glass).
   JS schedules gusts every 40?60s; each gust blows 1?3 leaves once. */
.listen-env-study-leaves {
  position: absolute;
  left: 0%;
  top: 0%;
  width: 24%;
  height: 40%;
  overflow: hidden;
  pointer-events: none;
  z-index: 2;
}

.listen-env-study-leaves[data-study-leaves-mask="art"] {
  /* Full cover box ? do not reset left/top to auto after inset (that broke layout). */
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: auto;
  height: auto;
  overflow: hidden;
  -webkit-mask-image: var(--study-leaves-mask-url);
  mask-image: var(--study-leaves-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: alpha;
  mask-mode: alpha;
}

.listen-env-study-leaf {
  position: absolute;
  left: var(--study-leaf-x, 8%);
  top: var(--study-leaf-y, 14%);
  width: var(--study-leaf-w, 13px);
  height: var(--study-leaf-h, 17px);
  background: var(
    --study-leaf-fill,
    linear-gradient(145deg, #6a7d4a 0%, #455533 55%, #2e3a22 100%)
  );
  border-radius: 2% 80% 10% 80%;
  box-shadow: inset -1px -1px 0 rgba(20, 30, 12, 0.22);
  opacity: 0;
  visibility: hidden;
  /* Soft + desaturated so they sit in the outdoor foliage. */
  filter: blur(0.45px) saturate(0.7) brightness(0.92);
  will-change: transform, opacity;
  --study-leaf-dx: 80px;
  --study-leaf-dy: 40px;
  --study-leaf-rot0: -20deg;
  --study-leaf-rot1: 110deg;
  --study-leaf-dur: 5s;
  animation: none;
}

.listen-env-study-leaf.is-blowing {
  opacity: 0.58;
  visibility: visible;
  animation: listen-study-leaf-blow var(--study-leaf-dur, 5s) linear 1 forwards;
}

.listen-env-study-leaf--1 {
  --study-leaf-fill: linear-gradient(145deg, #71824e 0%, #4a5a34 60%, #313c24 100%);
}

.listen-env-study-leaf--2 {
  --study-leaf-fill: linear-gradient(145deg, #8a7a48 0%, #5c5230 55%, #3a3520 100%);
}

.listen-env-study-leaf--3 {
  --study-leaf-fill: linear-gradient(145deg, #5f7344 0%, #3e4e2e 60%, #2a3420 100%);
}

/* Solid opacity ? clip/disappear only via the glass mask edges. */
@keyframes listen-study-leaf-blow {
  0% {
    opacity: 0.58;
    transform: translate3d(0, 0, 0) rotate(var(--study-leaf-rot0, -20deg)) scale(1);
  }
  100% {
    opacity: 0.58;
    transform: translate3d(var(--study-leaf-dx, 80px), var(--study-leaf-dy, 40px), 0)
      rotate(var(--study-leaf-rot1, 110deg)) scale(1);
  }
}

.listen-env-study-desk-breathe {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 55%;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(
      ellipse 95% 75% at 48% 100%,
      rgba(10, 6, 2, 0.72) 0%,
      rgba(20, 12, 6, 0.42) 40%,
      transparent 74%
    ),
    linear-gradient(
      to top,
      rgba(8, 4, 0, 0.55) 0%,
      rgba(8, 4, 0, 0.18) 45%,
      transparent 78%
    );
  opacity: 0.35;
  mix-blend-mode: normal;
  animation: listen-study-desk-breathe var(--study-light-cycle, 12s) ease-in-out infinite alternate;
}

@keyframes listen-study-desk-breathe {
  0% {
    opacity: 0.15;
    filter: brightness(1.15);
    transform: translate3d(0, 0.6%, 0) scale(1);
  }
  100% {
    opacity: 0.95;
    filter: brightness(0.75);
    transform: translate3d(0, -0.4%, 0) scale(1.02);
  }
}

/* Same timeline as desk breathe: lit (0%) => full motes; shadowed (100%) => nearly gone. */
@keyframes listen-study-motes-with-light {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0.06;
  }
}

@keyframes listen-study-god-ray-with-light {
  0% {
    opacity: 0.78;
  }
  100% {
    opacity: 0.12;
  }
}

.listen-environment-props.listen-env-reduced-motion .listen-env-study-mote,
.listen-environment-props.listen-env-reduced-motion .listen-env-study-motes,
.listen-environment-props.listen-env-reduced-motion .listen-env-study-god-ray,
.listen-environment-props.listen-env-reduced-motion .listen-env-study-leaves,
.listen-environment-props.listen-env-reduced-motion .listen-env-study-leaf,
.listen-environment-props.listen-env-reduced-motion .listen-env-study-desk-breathe {
  animation: none !important;
}

.listen-environment-props.listen-env-reduced-motion .listen-env-study-leaf {
  opacity: 0 !important;
}

.listen-environment-props.listen-env-reduced-motion .listen-env-study-mote {
  opacity: 0.4;
  transform: none;
}

.listen-environment-props.listen-env-reduced-motion .listen-env-study-motes {
  opacity: 0.55;
}

.listen-environment-props.listen-env-reduced-motion .listen-env-study-god-ray {
  opacity: 0.4;
}

.listen-environment-props.listen-env-reduced-motion .listen-env-study-desk-breathe {
  opacity: 0.55;
  transform: none;
}

.listen-environment-props--effects-muted .listen-env-study-motes,
.listen-environment-props--effects-muted .listen-env-study-god-ray,
.listen-environment-props--effects-muted .listen-env-study-leaves,
.listen-environment-props--effects-muted .listen-env-study-desk-breathe {
  visibility: hidden !important;
}

.listen-environment-backdrop[data-environment="alone-time"] {
  opacity: 0.97;
  filter: brightness(0.92) contrast(1.04) saturate(1.05);
}

.listen-environment-backdrop[data-environment="alone-time"]::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 52% 48% at 50% 44%, transparent 0%, transparent 42%, rgba(40, 18, 28, 0.16) 72%, rgba(28, 10, 18, 0.4) 100%),
    radial-gradient(ellipse 100% 90% at 50% 50%, transparent 30%, rgba(24, 10, 16, 0.22) 100%);
}

/* ?? Alone Time: bath candle, champagne, foam pops, petals, faucet drip ?? */
.listen-env-alone-scene {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.listen-env-alone-scene--backdrop {
  /* Tray tea-light flame (env-alone-time.png) ? tune in DevTools. */
  --alone-candle-left: 89.2%;
  --alone-candle-bottom: 34%;
  --alone-candle-width: 1.85%;
  --alone-candle-height: 4.6%;
  --alone-candle-smoke-left: 87.5%;
  --alone-candle-smoke-bottom: 36%;
  --alone-candle-smoke-width: 1.4%;
  --alone-candle-smoke-height: 5.5%;
  /* Champagne liquid column */
  --alone-champagne-left: 20.4%;
  --alone-champagne-top: 38%;
  --alone-champagne-width: 4.3%;
  --alone-champagne-height: 12.2%;
  /* Bathtub bubbles (avoid tray center) */
  --alone-foam-left: 35%;
  --alone-foam-top: 53%;
  --alone-foam-width: 32%;
  --alone-foam-height: 7.7%;
  /* Faucet spout tip ? foam */
  --alone-faucet-left: 52.25%;
  --alone-faucet-top: 46%;
  --alone-faucet-fall: 26%;
  /* Side-table decorative glows */
  --alone-side-1-left: 72.8%;
  --alone-side-1-top: 47.5%;
  --alone-side-2-left: 89.2%;
  --alone-side-2-top: 64.8%;
}

.listen-env-alone-scene--backdrop > .listen-env-bath-candle {
  position: absolute;
  left: var(--alone-candle-left);
  bottom: var(--alone-candle-bottom);
  top: auto;
  width: var(--alone-candle-width);
  height: var(--alone-candle-height);
  transform: translate(-50%, 0);
  z-index: 4;
  pointer-events: auto;
  background: none;
  mix-blend-mode: normal;
  filter: none;
  opacity: 1;
}

.listen-env-bath-candle > .listen-env-fire-hit {
  inset: -45% -60% -20%;
}

/* Soft CSS flame ? same language as .listen-scene-candle-flame (not tavern sprite). */
.listen-env-bath-candle-flame {
  position: absolute;
  left: 50%;
  bottom: 8%;
  width: 33%;
  height: 47%;
  transform: translateX(-50%);
  transform-origin: 50% 92%;
  border-radius: 50% 50% 42% 42%;
  pointer-events: none;
  background: radial-gradient(
    circle at 50% 85%,
    #ffe080 0%,
    #ffb040 35%,
    #ff6010 58%,
    transparent 78%
  );
  box-shadow:
    0 0 4px rgba(255, 200, 80, 0.85),
    0 0 11px rgba(255, 140, 40, 0.55),
    0 0 18px rgba(255, 100, 20, 0.28);
  filter: blur(0.7px) brightness(0.92) saturate(0.95);
  opacity: 0.88;
}

@media (prefers-reduced-motion: no-preference) {
  .listen-env-bath-candle:not(.is-snuffed):not(.is-snuffing):not(.is-relighting)
    .listen-env-bath-candle-flame {
    animation: listen-alone-bath-candle-flicker 2.6s ease-in-out infinite alternate;
  }
}

@keyframes listen-alone-bath-candle-flicker {
  0% {
    opacity: 0.72;
    transform: translateX(-50%) scale(0.9) rotate(-5deg);
    filter: blur(0.85px) brightness(0.82) saturate(0.92);
    box-shadow:
      0 0 3px rgba(255, 190, 70, 0.7),
      0 0 9px rgba(255, 130, 35, 0.42),
      0 0 15px rgba(255, 95, 18, 0.2);
  }
  100% {
    opacity: 0.92;
    transform: translateX(-50%) scale(1.06) rotate(4deg);
    filter: blur(0.55px) brightness(1.02) saturate(1);
    box-shadow:
      0 0 5px rgba(255, 200, 80, 0.9),
      0 0 12px rgba(255, 140, 40, 0.58),
      0 0 20px rgba(255, 100, 20, 0.3);
  }
}

.listen-env-bath-candle.is-snuffed:not(.is-snuffing) .listen-env-bath-candle-flame {
  opacity: 0 !important;
  transform: translateX(-50%) scale(0.15);
  pointer-events: none;
  animation: none !important;
  box-shadow: none;
  filter: none;
}

.listen-env-bath-candle.is-snuffing .listen-env-bath-candle-flame {
  animation: listen-alone-bath-candle-snuff 0.7s ease forwards !important;
}

.listen-env-bath-candle.is-relighting .listen-env-bath-candle-flame {
  animation: listen-alone-bath-candle-relight 0.55s ease-out forwards !important;
}

@keyframes listen-alone-bath-candle-snuff {
  0% {
    opacity: 0.88;
    transform: translateX(-50%) scale(1) rotate(0deg);
    filter: blur(0.7px) brightness(0.95);
  }
  45% {
    opacity: 0.4;
    transform: translateX(-50%) scale(0.5) rotate(7deg);
    filter: blur(1px) brightness(0.65);
  }
  100% {
    opacity: 0;
    transform: translateX(-50%) scale(0.12) rotate(-4deg);
    filter: blur(1.2px) brightness(0.35);
    box-shadow: none;
  }
}

@keyframes listen-alone-bath-candle-relight {
  0% {
    opacity: 0;
    transform: translateX(-50%) scale(0.15) rotate(-3deg);
    filter: blur(1px) brightness(0.45);
  }
  55% {
    opacity: 0.95;
    transform: translateX(-50%) scale(1.12) rotate(3deg);
    filter: blur(0.5px) brightness(1.1);
  }
  100% {
    opacity: 0.88;
    transform: translateX(-50%) scale(1) rotate(-2deg);
    filter: blur(0.7px) brightness(0.92);
  }
}

.listen-env-bath-candle-smoke {
  position: absolute;
  left: 50%;
  bottom: 72%;
  width: 70%;
  height: 55%;
  margin-left: -35%;
  pointer-events: none;
  opacity: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(180, 180, 180, 0.5) 0%, transparent 72%);
  filter: blur(1px);
  z-index: 3;
}

.listen-env-bath-candle:not(.is-snuffed):not(.is-snuffing)
  .listen-env-bath-candle-smoke.is-wisping {
  animation: listen-candle-smoke-rise 1.45s ease-out forwards;
}

.listen-env-alone-side-candle {
  position: absolute;
  width: 1.1%;
  height: 2.4%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(
    ellipse 50% 55% at 50% 58%,
    rgba(255, 230, 150, 0.95) 0%,
    rgba(255, 160, 60, 0.55) 38%,
    rgba(255, 100, 30, 0.12) 62%,
    transparent 78%
  );
  filter: blur(1.2px);
  animation: listen-alone-side-candle-flicker 2.4s ease-in-out infinite alternate;
  z-index: 3;
}

.listen-env-alone-side-candle--1 {
  left: var(--alone-side-1-left);
  top: var(--alone-side-1-top);
  animation-duration: 2.7s;
}

.listen-env-alone-side-candle--2 {
  left: var(--alone-side-2-left);
  top: var(--alone-side-2-top);
  width: 1.35%;
  height: 2.9%;
  animation-duration: 2.15s;
  animation-delay: -0.8s;
}

@keyframes listen-alone-side-candle-flicker {
  0% {
    opacity: 0.55;
    transform: translate(-50%, -50%) scale(0.92);
    filter: blur(1.2px) brightness(0.92);
  }
  100% {
    opacity: 0.95;
    transform: translate(-50%, -50%) scale(1.08);
    filter: blur(1.6px) brightness(1.12);
  }
}

.listen-env-alone-champagne-stage {
  position: absolute;
  left: var(--alone-champagne-left);
  top: var(--alone-champagne-top);
  width: var(--alone-champagne-width);
  height: var(--alone-champagne-height);
  overflow: hidden;
  pointer-events: none;
  z-index: 3;
  border-radius: 40% 40% 18% 18% / 12% 12% 30% 30%;
}

.listen-env-alone-champagne-bubble {
  position: absolute;
  width: var(--alone-bubble-size, 3.5px);
  height: var(--alone-bubble-size, 3.5px);
  border-radius: 50%;
  background: radial-gradient(
    circle at 35% 30%,
    rgba(255, 250, 230, 0.95) 0%,
    rgba(255, 220, 140, 0.55) 55%,
    rgba(255, 200, 100, 0.15) 100%
  );
  box-shadow: 0 0 3px rgba(255, 230, 160, 0.55);
  opacity: 0;
  animation: listen-alone-champagne-rise var(--alone-bubble-dur, 3.4s) linear forwards;
  will-change: transform, opacity;
}

@keyframes listen-alone-champagne-rise {
  0% {
    opacity: 0;
    transform: translate3d(0, 0, 0) scale(0.7);
  }
  12% {
    opacity: 0.85;
  }
  78% {
    opacity: 0.7;
  }
  100% {
    opacity: 0;
    transform: translate3d(0, var(--alone-bubble-rise, -80px), 0) scale(1.05);
  }
}

.listen-env-alone-foam-stage {
  position: absolute;
  left: var(--alone-foam-left);
  top: var(--alone-foam-top);
  width: var(--alone-foam-width);
  height: var(--alone-foam-height);
  overflow: hidden;
  pointer-events: none;
  z-index: 2;
}

.listen-env-alone-foam-pop {
  position: absolute;
  /* --alone-foam-oval-h is per-bubble; do not reuse --alone-foam-height (stage box). */
  width: var(--alone-foam-size, 8px);
  height: var(--alone-foam-oval-h, var(--alone-foam-size, 8px));
  margin-left: calc(var(--alone-foam-size, 8px) * -0.5);
  margin-top: calc(var(--alone-foam-oval-h, var(--alone-foam-size, 8px)) * -0.5);
  transform: rotate(var(--alone-foam-tilt, 0deg));
  pointer-events: none;
}

.listen-env-alone-foam-pop-film {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  /* Dingy bath-water grey - readable during the slow swell, not bright white. */
  border: 1.25px solid rgba(170, 174, 168, 0.62);
  background: radial-gradient(
    ellipse 70% 80% at 40% 35%,
    rgba(178, 182, 176, 0.38) 0%,
    rgba(148, 154, 148, 0.14) 55%,
    transparent 72%
  );
  opacity: 0;
  /* Linear grow so ease-out does not snap to full size in the first beat. */
  animation: listen-alone-foam-pop-film var(--alone-foam-dur, 2.8s) linear forwards;
  will-change: transform, opacity;
}

.listen-env-alone-foam-pop-bit {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--alone-foam-bit-size, 2px);
  height: var(--alone-foam-bit-size, 2px);
  margin: calc(var(--alone-foam-bit-size, 2px) * -0.5) 0 0 calc(var(--alone-foam-bit-size, 2px) * -0.5);
  border-radius: 50%;
  background: rgba(176, 180, 174, 0.88);
  box-shadow: 0 0 1.5px rgba(150, 156, 150, 0.55);
  opacity: 0;
  animation: listen-alone-foam-pop-bit var(--alone-foam-dur, 2.8s) linear forwards;
  will-change: transform, opacity;
}

@keyframes listen-alone-foam-pop-film {
  0% {
    opacity: 0;
    transform: scale(0.22);
  }
  10% {
    opacity: 0.78;
    transform: scale(0.32);
  }
  78% {
    opacity: 0.8;
    transform: scale(1);
  }
  /* Instant pop - no fade-out. */
  79%,
  100% {
    opacity: 0;
    transform: scale(1);
  }
}

@keyframes listen-alone-foam-pop-bit {
  0%,
  78% {
    opacity: 0;
    transform: rotate(var(--alone-foam-bit-angle, 0deg)) translateY(0) scale(0.4);
  }
  79% {
    opacity: 0.92;
    transform: rotate(var(--alone-foam-bit-angle, 0deg)) translateY(0) scale(1);
  }
  100% {
    opacity: 0;
    transform: rotate(var(--alone-foam-bit-angle, 0deg))
      translateY(var(--alone-foam-bit-dist, 10px)) scale(0.25);
  }
}

.listen-env-alone-petal {
  position: absolute;
  width: 2.1%;
  height: 1.35%;
  border-radius: 60% 40% 55% 45% / 55% 45% 60% 40%;
  background: radial-gradient(
    ellipse 70% 80% at 40% 35%,
    rgba(255, 170, 190, 0.55) 0%,
    rgba(220, 90, 130, 0.42) 55%,
    rgba(160, 50, 90, 0.18) 100%
  );
  filter: blur(0.4px);
  opacity: 0.55;
  pointer-events: none;
  z-index: 2;
  animation: listen-alone-petal-drift 11s ease-in-out infinite alternate;
}

.listen-env-alone-petal--1 {
  left: 38%;
  top: 44%;
  animation-duration: 12.5s;
}

.listen-env-alone-petal--2 {
  left: 58%;
  top: 48%;
  width: 1.7%;
  height: 1.1%;
  animation-duration: 9.8s;
  animation-delay: -3s;
}

.listen-env-alone-petal--3 {
  left: 47%;
  top: 52%;
  width: 2.4%;
  height: 1.5%;
  animation-duration: 14s;
  animation-delay: -6s;
}

.listen-env-alone-petal--4 {
  left: 67%;
  top: 42%;
  width: 1.5%;
  height: 1%;
  animation-duration: 10.5s;
  animation-delay: -1.5s;
}

@keyframes listen-alone-petal-drift {
  0% {
    transform: translate3d(0, 0, 0) rotate(-6deg);
  }
  100% {
    transform: translate3d(0.7%, -0.45%, 0) rotate(8deg);
  }
}

.listen-env-alone-faucet {
  position: absolute;
  left: var(--alone-faucet-left);
  top: var(--alone-faucet-top);
  width: 1.2%;
  height: calc(var(--alone-faucet-fall) + 2%);
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 3;
  overflow: visible;
}

.listen-env-alone-faucet-drip {
  position: absolute;
  left: 50%;
  top: 0;
  width: 4px;
  height: 8px;
  margin-left: -2px;
  border-radius: 50% 50% 42% 42% / 38% 38% 62% 62%;
  /* Murky bath-grey drip ? desaturate the cave-blue water look. */
  background:
    radial-gradient(
      ellipse 85% 72% at 50% 32%,
      rgba(205, 208, 204, 0.82) 0%,
      rgba(155, 160, 156, 0.72) 55%,
      rgba(105, 112, 108, 0.58) 100%
    );
  opacity: 0;
  transform-origin: top center;
  box-shadow: 0 0 4px rgba(120, 126, 122, 0.28);
  animation: listen-alone-faucet-drip-fall 5.6s linear infinite;
  will-change: top, transform, opacity;
}

.listen-env-alone-faucet-splash {
  position: absolute;
  left: 50%;
  top: var(--alone-faucet-fall);
  width: 10px;
  height: 5px;
  margin-left: -5px;
  margin-top: -2px;
  border: 1.5px solid rgba(168, 174, 168, 0.42);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  animation: listen-alone-faucet-splash 5.6s ease-out infinite;
}

@keyframes listen-alone-faucet-drip-fall {
  /* Same accel curve as cave water drip (s(t)=0.05t+0.95t?), lands at 47%. */
  0% {
    top: 0;
    opacity: 0;
    transform: scale(0.82, 0.28);
  }
  5% {
    top: 0;
    opacity: 0.78;
    transform: scale(0.88, 0.38);
  }
  11.8% {
    top: calc(0.012 * var(--alone-faucet-fall));
    opacity: 0.78;
    transform: scale(0.88, 0.41);
  }
  16.8% {
    top: calc(0.035 * var(--alone-faucet-fall));
    opacity: 0.78;
    transform: scale(0.87, 0.48);
  }
  21.8% {
    top: calc(0.081 * var(--alone-faucet-fall));
    opacity: 0.78;
    transform: scale(0.86, 0.62);
  }
  28.1% {
    top: calc(0.186 * var(--alone-faucet-fall));
    opacity: 0.78;
    transform: scale(0.84, 0.92);
  }
  34.4% {
    top: calc(0.361 * var(--alone-faucet-fall));
    opacity: 0.78;
    transform: scale(0.79, 1.38);
  }
  40.7% {
    top: calc(0.627 * var(--alone-faucet-fall));
    opacity: 0.78;
    transform: scale(0.73, 2.08);
  }
  44.9% {
    top: calc(0.862 * var(--alone-faucet-fall));
    opacity: 0.78;
    transform: scale(0.67, 2.72);
  }
  47% {
    top: var(--alone-faucet-fall);
    opacity: 0.78;
    transform: scale(0.64, 3.05);
  }
  48% {
    top: var(--alone-faucet-fall);
    opacity: 0.62;
    transform: scale(1.05, 0.55);
  }
  50% {
    opacity: 0.28;
    transform: scale(1.15, 0.38);
  }
  52%,
  100% {
    top: var(--alone-faucet-fall);
    opacity: 0;
    transform: scale(0.82, 0.28);
  }
}

@keyframes listen-alone-faucet-splash {
  0%,
  47% {
    opacity: 0;
    transform: scale(0.35);
  }
  51% {
    opacity: 0.52;
    transform: scale(1);
  }
  72% {
    opacity: 0;
    transform: scale(3.8);
  }
  100% {
    opacity: 0;
    transform: scale(3.8);
  }
}

.listen-environment-props.listen-env-reduced-motion .listen-env-alone-champagne-stage,
.listen-environment-props.listen-env-reduced-motion .listen-env-alone-foam-stage,
.listen-environment-props.listen-env-reduced-motion .listen-env-alone-faucet-drip,
.listen-environment-props.listen-env-reduced-motion .listen-env-alone-faucet-splash,
.listen-environment-props.listen-env-reduced-motion .listen-env-alone-petal,
.listen-environment-props.listen-env-reduced-motion .listen-env-alone-side-candle {
  animation: none !important;
}

.listen-environment-props--effects-muted .listen-env-alone-champagne-stage,
.listen-environment-props--effects-muted .listen-env-alone-foam-stage,
.listen-environment-props--effects-muted .listen-env-alone-faucet,
.listen-environment-props--effects-muted .listen-env-alone-petal,
.listen-environment-props--effects-muted .listen-env-alone-side-candle {
  visibility: hidden !important;
}

/* 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;
  /* Env fire snuff/relight v3 (midpoint of v1 and v2).
   * Rollback v1 (fires4): snuff 1.25s, relight 1.2s, companion-out 1.45s, companion-in 1.25s,
   * smoke 2.1s; JS 1350/1300ms; keyframes 0/22/48/72/100.
   * Rollback v2 (fires5): snuff 2.5s, relight 2.4s, companion-out 2.9s, companion-in 2.5s,
   * smoke 4.2s; JS 2700/2600ms; 8-step keyframes (keep those). */
  --listen-env-fire-snuff-dur: 1.875s;
  --listen-env-fire-relight-dur: 1.8s;
  --listen-env-fire-companion-out-dur: 2.175s;
  --listen-env-fire-companion-in-dur: 1.875s;
  --listen-env-fire-snuff-smoke-dur: 3.15s;
}

/* Clickable backdrop fires (hearth / torches). */
.listen-env-fire-hit {
  position: absolute;
  inset: -18% -12% -8%;
  z-index: 5;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  pointer-events: auto;
}

.listen-env-fire-source,
.listen-env-fire-source * {
  pointer-events: auto;
}

.listen-env-cozy-hearth-anchor > .listen-env-fire-hit,
.listen-env-hearth-anchor > .listen-env-fire-hit {
  inset: -25% -20% -35%;
}

/* Env fire snuff/relight ? v2 keyframes (finer clip steps; see rollback note on .listen-environment-props). */
.listen-env-fire-snuff-smoke {
  position: absolute;
  left: 50%;
  top: 8%;
  width: 1.1rem;
  height: 1.1rem;
  margin-left: -0.55rem;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  z-index: 4;
  background: radial-gradient(circle, rgba(190, 190, 190, 0.55) 0%, transparent 72%);
  filter: blur(1.2px);
}

.listen-env-fire-source.is-snuffing > .listen-env-fire-snuff-smoke {
  animation: listen-candle-smoke-rise var(--listen-env-fire-snuff-smoke-dur) ease-out forwards;
}

/* Hard-hide only after dwindle completes ? not while .is-snuffing is playing. */
.listen-env-fire-source.is-snuffed:not(.is-snuffing).listen-env-fire-sprite,
.listen-env-fire-source.is-snuffed:not(.is-snuffing) .listen-env-fire-sprite {
  opacity: 0 !important;
  animation: none !important;
  filter: none !important;
}

.listen-env-fire-source.is-snuffed:not(.is-snuffing).listen-env-fire-sprite::before,
.listen-env-fire-source.is-snuffed:not(.is-snuffing) .listen-env-fire-sprite::before {
  opacity: 0 !important;
  animation: none !important;
}

.listen-env-fire-source.is-snuffing.listen-env-fire-sprite {
  animation:
    listen-fire-sprite var(--listen-fire-speed, 2.35s) steps(calc(var(--listen-fire-frames) - 1)) infinite,
    /* Opacity/brightness only ? clip-path round caused a hard oval on torches too. */
    listen-env-fire-snuff-torch var(--listen-env-fire-snuff-dur) ease-in-out forwards !important;
}

.listen-env-fire-source.is-snuffing .listen-env-fire-sprite {
  animation:
    listen-fire-sprite var(--listen-fire-speed, 2.35s) steps(calc(var(--listen-fire-frames) - 1)) infinite,
    /* Opacity/brightness only ? clip-path round caused a hard glow oval on hearths. */
    listen-env-fire-snuff-nested var(--listen-env-fire-snuff-dur) ease-in-out forwards !important;
}

.listen-env-fire-source.is-relighting.listen-env-fire-sprite {
  animation:
    listen-fire-sprite var(--listen-fire-speed, 2.35s) steps(calc(var(--listen-fire-frames) - 1)) infinite,
    listen-env-fire-relight-torch var(--listen-env-fire-relight-dur) ease-in-out forwards !important;
}

.listen-env-fire-source.is-relighting .listen-env-fire-sprite {
  animation:
    listen-fire-sprite var(--listen-fire-speed, 2.35s) steps(calc(var(--listen-fire-frames) - 1)) infinite,
    listen-env-fire-relight-nested var(--listen-env-fire-relight-dur) ease-in-out forwards !important;
}

.listen-env-fire-source.is-snuffing [data-fire-smoke-for],
[data-fire-smoke-for].is-fire-fading-out {
  animation: listen-env-fire-companion-fade-out var(--listen-env-fire-companion-out-dur) ease forwards !important;
  visibility: visible;
}

[data-fire-smoke-for].is-fire-fading-in {
  animation: listen-env-fire-companion-fade-in var(--listen-env-fire-companion-in-dur) ease forwards !important;
  visibility: visible;
}

/*
 * Floor glow: JS drives opacity during snuff/relight (beginEnvironmentFireGlowFade)
 * so we fade from the live value ? no brighter "circle" pop, no forwards-revert to 0.
 * Flame ::before is left alone; it fades with the sprite opacity.
 */
[data-fire-glow-for].is-fire-fading-out,
[data-fire-glow-for].is-fire-fading-in {
  animation: none !important;
  visibility: visible !important;
  transform: none !important;
}

.listen-env-fire-source.is-snuffing .listen-env-cozy-ember-bed {
  animation: none !important;
  opacity: 0 !important;
  transition: opacity var(--listen-env-fire-snuff-dur) ease !important;
  visibility: visible !important;
}

.listen-env-fire-source.is-relighting .listen-env-cozy-ember-bed {
  animation: none !important;
  opacity: 1 !important;
  transition: opacity var(--listen-env-fire-relight-dur) ease !important;
  visibility: visible !important;
}

.listen-env-fire-source.is-snuffed:not(.is-snuffing) .listen-env-cozy-ember-bed,
[data-fire-smoke-for].is-fire-snuffed,
[data-fire-glow-for].is-fire-snuffed {
  opacity: 0 !important;
  animation: none !important;
  visibility: hidden;
  transition: none !important;
}

@keyframes listen-env-fire-snuff-torch {
  0% {
    opacity: 0.88;
    filter: brightness(1.12) saturate(1.05);
    transform: translate(-50%, 0);
  }
  12.5% {
    opacity: 0.84;
    filter: brightness(1.06) saturate(1.02);
    transform: translate(-50%, 0);
  }
  25% {
    opacity: 0.78;
    filter: brightness(0.98) saturate(0.97);
    transform: translate(-50%, 0);
  }
  37.5% {
    opacity: 0.68;
    filter: brightness(0.9) saturate(0.9);
    transform: translate(-50%, 0);
  }
  50% {
    opacity: 0.58;
    filter: brightness(0.82) saturate(0.84);
    transform: translate(-50%, 0);
  }
  62.5% {
    opacity: 0.44;
    filter: brightness(0.72) saturate(0.74);
    transform: translate(-50%, 0);
  }
  75% {
    opacity: 0.3;
    filter: brightness(0.58) saturate(0.6);
    transform: translate(-50%, 0);
  }
  87.5% {
    opacity: 0.14;
    filter: brightness(0.4) saturate(0.45);
    transform: translate(-50%, 0);
  }
  100% {
    opacity: 0;
    filter: brightness(0.25) saturate(0.35);
    transform: translate(-50%, 0);
  }
}

@keyframes listen-env-fire-snuff-nested {
  0% {
    opacity: 0.95;
    filter: brightness(1.08);
  }
  12.5% {
    opacity: 0.88;
    filter: brightness(1.02);
  }
  25% {
    opacity: 0.8;
    filter: brightness(0.96);
  }
  37.5% {
    opacity: 0.7;
    filter: brightness(0.88);
  }
  50% {
    opacity: 0.58;
    filter: brightness(0.8);
  }
  62.5% {
    opacity: 0.44;
    filter: brightness(0.68);
  }
  75% {
    opacity: 0.28;
    filter: brightness(0.52);
  }
  87.5% {
    opacity: 0.12;
    filter: brightness(0.34);
  }
  100% {
    opacity: 0;
    filter: brightness(0.2);
  }
}

@keyframes listen-env-fire-relight-torch {
  0% {
    opacity: 0;
    filter: brightness(0.4) saturate(0.5);
    transform: translate(-50%, 0);
  }
  12.5% {
    opacity: 0.12;
    filter: brightness(0.55) saturate(0.62);
    transform: translate(-50%, 0);
  }
  25% {
    opacity: 0.24;
    filter: brightness(0.68) saturate(0.74);
    transform: translate(-50%, 0);
  }
  37.5% {
    opacity: 0.38;
    filter: brightness(0.82) saturate(0.86);
    transform: translate(-50%, 0);
  }
  50% {
    opacity: 0.52;
    filter: brightness(0.96) saturate(0.96);
    transform: translate(-50%, 0);
  }
  62.5% {
    opacity: 0.68;
    filter: brightness(1.08) saturate(1.04);
    transform: translate(-50%, 0);
  }
  75% {
    opacity: 0.82;
    filter: brightness(1.16) saturate(1.08);
    transform: translate(-50%, 0);
  }
  87.5% {
    opacity: 0.86;
    filter: brightness(1.14) saturate(1.04);
    transform: translate(-50%, 0);
  }
  100% {
    opacity: 0.82;
    filter: brightness(1.12) saturate(1);
    transform: translate(-50%, 0);
  }
}

@keyframes listen-env-fire-relight-nested {
  0% {
    opacity: 0;
    filter: brightness(0.35);
  }
  12.5% {
    opacity: 0.14;
    filter: brightness(0.5);
  }
  25% {
    opacity: 0.28;
    filter: brightness(0.64);
  }
  37.5% {
    opacity: 0.42;
    filter: brightness(0.78);
  }
  50% {
    opacity: 0.56;
    filter: brightness(0.92);
  }
  62.5% {
    opacity: 0.72;
    filter: brightness(1.06);
  }
  75% {
    opacity: 0.88;
    filter: brightness(1.14);
  }
  87.5% {
    opacity: 0.96;
    filter: brightness(1.1);
  }
  100% {
    opacity: 1;
    filter: brightness(1);
  }
}

@keyframes listen-env-fire-companion-fade-out {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes listen-env-fire-companion-fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/* Directional page washes from backdrop fires. */
.listen-env-page-glows {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  overflow: hidden;
}

.listen-atmosphere-host[data-reader-layout="book"] .listen-env-page-glows--spread {
  display: block;
}

/* Curved folio skins: keep fire washes on the page silhouette, not the rectangular spread box. */
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="fantasy-scroll"]
  .listen-env-page-glows--spread,
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="well-worn-novel"]
  .listen-env-page-glows--spread {
  overflow: hidden;
  -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)
  );
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="fantasy-scroll"]
  .listen-scroll-parchment
  > .listen-env-page-glows:not(.listen-env-page-glows--spread) {
  display: block;
}

.listen-env-page-glow {
  position: absolute;
  inset: -6%;
  opacity: 0;
  transition: opacity 2.025s ease;
  pointer-events: none;
}

.listen-atmosphere-host[data-listen-environment="cozy-hearth"][data-env-fire-hearth="1"]
  .listen-env-page-glow--hearth {
  opacity: 1;
  transform-origin: 12% 92%;
  animation: listen-env-page-glow-pulse 2.6s ease-in-out infinite alternate;
  background: radial-gradient(
    ellipse 78% 70% at 12% 92%,
    rgba(255, 170, 70, 0.28) 0%,
    rgba(255, 120, 40, 0.12) 34%,
    rgba(255, 90, 30, 0.04) 58%,
    transparent 78%
  );
}

.listen-atmosphere-host[data-listen-environment="fantasy-tavern"][data-env-fire-tavern-hearth="1"]
  .listen-env-page-glow--tavern-hearth {
  opacity: 1;
  transform-origin: 50% 88%;
  animation: listen-env-page-glow-pulse 2.5s ease-in-out infinite alternate;
  background: radial-gradient(
    ellipse 82% 68% at 50% 88%,
    rgba(255, 170, 70, 0.26) 0%,
    rgba(255, 120, 40, 0.11) 36%,
    rgba(255, 90, 30, 0.04) 58%,
    transparent 78%
  );
}

.listen-atmosphere-host[data-listen-environment="fantasy-tavern"][data-env-fire-tavern-left="1"]
  .listen-env-page-glow--tavern-left {
  opacity: 1;
  transform-origin: 8% 22%;
  animation: listen-env-page-glow-pulse 2.4s ease-in-out infinite alternate;
  background: radial-gradient(
    ellipse 70% 62% at 8% 22%,
    rgba(255, 190, 95, 0.24) 0%,
    rgba(255, 140, 50, 0.1) 36%,
    rgba(255, 100, 35, 0.035) 58%,
    transparent 76%
  );
}

.listen-atmosphere-host[data-listen-environment="fantasy-tavern"][data-env-fire-tavern-right="1"]
  .listen-env-page-glow--tavern-right {
  opacity: 1;
  transform-origin: 92% 28%;
  animation: listen-env-page-glow-pulse 2.55s ease-in-out infinite alternate;
  background: radial-gradient(
    ellipse 70% 64% at 92% 28%,
    rgba(255, 190, 95, 0.24) 0%,
    rgba(255, 140, 50, 0.1) 36%,
    rgba(255, 100, 35, 0.035) 58%,
    transparent 76%
  );
}

.listen-atmosphere-host[data-listen-environment="darkened-cave"][data-env-fire-cave-hearth="1"]
  .listen-env-page-glow--cave-hearth {
  opacity: 1;
  transform-origin: 42% 72%;
  animation: listen-env-page-glow-pulse 2.4s ease-in-out infinite alternate;
  background: radial-gradient(
    ellipse 58% 52% at 42% 72%,
    rgba(255, 170, 70, 0.22) 0%,
    rgba(255, 120, 40, 0.09) 36%,
    rgba(255, 90, 30, 0.03) 56%,
    transparent 74%
  );
}

.listen-atmosphere-host[data-listen-environment="darkened-cave"][data-env-fire-cave-torch="1"]
  .listen-env-page-glow--cave-torch {
  opacity: 1;
  transform-origin: 10% 18%;
  animation: listen-env-page-glow-pulse 2.35s ease-in-out infinite alternate;
  background: radial-gradient(
    ellipse 68% 60% at 10% 18%,
    rgba(255, 185, 90, 0.26) 0%,
    rgba(255, 130, 45, 0.11) 34%,
    rgba(255, 95, 30, 0.035) 56%,
    transparent 74%
  );
}

@keyframes listen-env-page-glow-pulse {
  0% {
    filter: brightness(0.92) saturate(0.92);
    transform: scale(0.985);
  }
  100% {
    filter: brightness(1.12) saturate(1.08);
    transform: scale(1.02);
  }
}

@media (prefers-reduced-motion: reduce) {
  .listen-env-page-glow {
    animation: none !important;
  }
}

.listen-environment-props[data-props="cozy"],
.listen-environment-props[data-props="tavern"],
.listen-environment-props[data-props="cave"] {
  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).
   --env-pool-pin-inset-right keeps the pool in-view when cover crops sides.
   Lamp wash: env-horror-shadow-light-flicker.png (luminance mask, same 1024x640). */
.listen-env-horror-scene--backdrop {
  --horror-pool-inset-right: var(--env-pool-pin-inset-right, 6%);
  /* Subtle lamp pulse: opacity animates near 0 ? peak (keep peak low). */
  --horror-lamp-cone-opacity: 0.14;
  --horror-lamp-cone-blur: 44px;
}

.listen-env-horror-mask-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
}

.listen-env-horror-mask-layer[data-horror-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;
  /* Soft edges live in PNG alpha (GIMP Gaussian) ? not luminance. */
  -webkit-mask-mode: alpha;
  mask-mode: alpha;
}

/* Overhead lamp cone ? opacity driven by JS (random electrical shorts). */
.listen-env-horror-lamp-cone[data-horror-mask="art"] {
  z-index: 1;
  opacity: 0.02;
  -webkit-mask-image: var(--horror-lamp-cone-mask-url);
  mask-image: var(--horror-lamp-cone-mask-url);
  background: radial-gradient(
    ellipse 78% 88% at 50% 24%,
    rgba(255, 228, 180, 0.55) 0%,
    rgba(255, 200, 130, 0.28) 32%,
    rgba(200, 150, 90, 0.12) 58%,
    rgba(120, 80, 45, 0.04) 78%,
    transparent 100%
  );
  filter: blur(var(--horror-lamp-cone-blur, 44px));
  /* screen reads on brief flashes; soft-light was nearly invisible. */
  mix-blend-mode: screen;
}

.listen-env-horror-scene--backdrop .listen-env-blood-pool--right {
  right: var(--horror-pool-inset-right);
}

.listen-env-horror-scene--backdrop .listen-env-drip--pool {
  right: calc(var(--horror-pool-inset-right) + 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;
}

/* Hook blood drips ? clipped to env-horror-shadow-hook-drip-mask.png */
.listen-env-horror-hook-drip-stage {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 3;
  opacity: 0;
}

.listen-env-horror-hook-drip-stage[data-horror-mask="art"] {
  opacity: 1;
  -webkit-mask-image: var(--horror-hook-drip-mask-url);
  mask-image: var(--horror-hook-drip-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-horror-hook-drip {
  position: absolute;
  width: var(--horror-hook-drip-width, 4px);
  height: var(--horror-hook-drip-height, 26px);
  margin-left: calc(var(--horror-hook-drip-width, 4px) * -0.5);
  border-radius: 45% / 48%;
  transform-origin: top center;
  background: radial-gradient(
    ellipse 90% 85% at 50% 18%,
    rgba(72, 12, 22, 0.98) 0%,
    rgba(48, 6, 14, 0.92) 34%,
    rgba(28, 3, 8, 0.62) 68%,
    rgba(12, 1, 4, 0.14) 100%
  );
  /* Tight rim ? drip width matches mask strand. */
  box-shadow:
    0 0 0 0.75px rgba(120, 36, 48, 0.55),
    0 0 3px 1px rgba(96, 22, 34, 0.45),
    0 1px 2px rgba(10, 0, 2, 0.35);
  filter: blur(0.2px);
  opacity: 0;
  animation: listen-horror-hook-drip-slide var(--horror-hook-drip-dur, 3.2s) linear forwards;
}

.listen-env-horror-hook-drip--drag {
  animation-name: listen-horror-hook-drip-slide-drag;
}

.listen-env-horror-hook-drip--slip {
  animation-name: listen-horror-hook-drip-slide-slip;
}

@keyframes listen-horror-hook-drip-slide {
  0% {
    /* Soft spawn - small bead, partly transparent. */
    opacity: 0.4;
    transform: translateY(0) scale(0.38, 0.48);
  }
  33% {
    /* Full presence after ~1/3 of the fall; size capped at prior peak. */
    opacity: 0.95;
    transform: translateY(calc(var(--horror-hook-drip-slide, 90px) * 0.33))
      scale(0.9, 1);
  }
  72% {
    opacity: 0.82;
    transform: translateY(calc(var(--horror-hook-drip-slide, 90px) * 0.72))
      scale(0.82, 1.08);
  }
  100% {
    opacity: 0;
    transform: translateY(var(--horror-hook-drip-slide, 90px)) scale(0.75, 1.15);
  }
}

/* Subtle mid-strand hesitation (resistance), then eases onward. */
@keyframes listen-horror-hook-drip-slide-drag {
  0% {
    opacity: 0.4;
    transform: translateY(0) scale(0.38, 0.48);
  }
  22% {
    opacity: 0.78;
    transform: translateY(calc(var(--horror-hook-drip-slide, 90px) * 0.24))
      scale(0.72, 0.82);
  }
  48% {
    opacity: 0.95;
    transform: translateY(calc(var(--horror-hook-drip-slide, 90px) * 0.36))
      scale(0.9, 1);
  }
  68% {
    opacity: 0.88;
    transform: translateY(calc(var(--horror-hook-drip-slide, 90px) * 0.62))
      scale(0.86, 1.04);
  }
  100% {
    opacity: 0;
    transform: translateY(var(--horror-hook-drip-slide, 90px)) scale(0.75, 1.15);
  }
}

/* Subtle mid-strand slip - a bit faster through the middle, then settles. */
@keyframes listen-horror-hook-drip-slide-slip {
  0% {
    opacity: 0.4;
    transform: translateY(0) scale(0.38, 0.48);
  }
  26% {
    opacity: 0.82;
    transform: translateY(calc(var(--horror-hook-drip-slide, 90px) * 0.2))
      scale(0.7, 0.8);
  }
  48% {
    opacity: 0.95;
    transform: translateY(calc(var(--horror-hook-drip-slide, 90px) * 0.55))
      scale(0.9, 1);
  }
  74% {
    opacity: 0.82;
    transform: translateY(calc(var(--horror-hook-drip-slide, 90px) * 0.78))
      scale(0.8, 1.1);
  }
  100% {
    opacity: 0;
    transform: translateY(var(--horror-hook-drip-slide, 90px)) scale(0.75, 1.15);
  }
}

/* Subtle mid-strand hesitation (~resistance), then eases onward. */
@keyframes listen-horror-hook-drip-slide-drag {
  0% {
    opacity: 0.4;
    transform: translateY(0) scale(0.38, 0.48);
  }
  22% {
    opacity: 0.78;
    transform: translateY(calc(var(--horror-hook-drip-slide, 90px) * 0.24))
      scale(0.72, 0.82);
  }
  48% {
    opacity: 0.95;
    transform: translateY(calc(var(--horror-hook-drip-slide, 90px) * 0.36))
      scale(0.9, 1);
  }
  68% {
    opacity: 0.88;
    transform: translateY(calc(var(--horror-hook-drip-slide, 90px) * 0.62))
      scale(0.86, 1.04);
  }
  100% {
    opacity: 0;
    transform: translateY(var(--horror-hook-drip-slide, 90px)) scale(0.75, 1.15);
  }
}

/* Subtle mid-strand slip ? a bit faster through the middle, then settles. */
@keyframes listen-horror-hook-drip-slide-slip {
  0% {
    opacity: 0.4;
    transform: translateY(0) scale(0.38, 0.48);
  }
  26% {
    opacity: 0.82;
    transform: translateY(calc(var(--horror-hook-drip-slide, 90px) * 0.2))
      scale(0.7, 0.8);
  }
  48% {
    opacity: 0.95;
    transform: translateY(calc(var(--horror-hook-drip-slide, 90px) * 0.55))
      scale(0.9, 1);
  }
  74% {
    opacity: 0.82;
    transform: translateY(calc(var(--horror-hook-drip-slide, 90px) * 0.78))
      scale(0.8, 1.1);
  }
  100% {
    opacity: 0;
    transform: translateY(var(--horror-hook-drip-slide, 90px)) scale(0.75, 1.15);
  }
}

/* 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, campfire, one drip / pool ?? */
.listen-env-cave-scene--backdrop {
  /* Shared anchor ? drip horizontal center tracks pool / splash center.
     --env-pool-pin-inset-right keeps the pool in-view when cover crops sides. */
  --cave-pool-inset-right: var(--env-pool-pin-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%;
  /* Distant tunnel campfire (smaller than Cozy / Tavern hearth). */
  --cave-hearth-left: 39%;
  --cave-hearth-bottom: 33%;
  --cave-hearth-width: 6.2%;
  --cave-hearth-height: 7.2%;
  --cave-hearth-offset-x: 0%;
  --cave-hearth-offset-y: 0%;
  --cozy-spark-floor-dx-max: 28px;
  --cozy-spark-floor-drop-max: 12px;
}

.listen-env-hearth-anchor--cave {
  position: absolute;
  left: var(--cave-hearth-left);
  bottom: var(--cave-hearth-bottom);
  width: var(--cave-hearth-width);
  height: var(--cave-hearth-height);
  transform: translate(var(--cave-hearth-offset-x), var(--cave-hearth-offset-y));
  pointer-events: auto;
  z-index: 3;
}

.listen-env-hearth-anchor--cave > .listen-env-fire-hit {
  inset: -55% -70% -80%;
}

.listen-env-hearth-anchor--cave .listen-env-cozy-floor-glow--cave-hearth {
  opacity: 0.7;
  left: -55%;
  bottom: -70%;
  width: 210%;
  height: 140%;
  filter: blur(6px);
}

.listen-env-hearth-anchor--cave .listen-env-cozy-ember-bed {
  transform: scale(0.72);
  height: 42%;
}

.listen-env-hearth-anchor--cave .listen-env-cozy-hearth-flame {
  opacity: 0.78;
  height: 100%;
  --listen-fire-speed: 2.35s;
  filter: saturate(0.92) brightness(1.1) blur(0.35px);
}

.listen-env-hearth-anchor--cave .listen-env-cozy-hearth-flame::before {
  width: 120%;
  height: 150%;
  filter: blur(4px);
}

.listen-env-smoke-column--cave-hearth {
  opacity: 0.42;
  width: 55%;
  height: 160%;
  bottom: 70%;
  filter: blur(1px);
}

.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-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%;
  /* Mantel candle wick tip (env-cozy-hearth.png) ? left is flame center. */
  --cozy-candle-left: 15.82%;
  --cozy-candle-bottom: 75.5%;
  --cozy-candle-width: 1.7%;
  --cozy-candle-height: 4.1%;
  --cozy-candle-smoke-left: 8.35%;
  --cozy-candle-smoke-bottom: 50%;
  --cozy-candle-smoke-width: 1.5%;
  --cozy-candle-smoke-height: 6.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: auto;
  z-index: 2;
}

/* Mantel candle ? same fire sprite as tavern torches, scaled down onto the wick. */
.listen-env-cozy-scene--backdrop > .listen-env-torch-flame--cozy-candle {
  position: absolute;
  left: var(--cozy-candle-left);
  bottom: var(--cozy-candle-bottom);
  top: auto;
  width: var(--cozy-candle-width);
  height: var(--cozy-candle-height);
  transform: translate(-50%, 0);
  --listen-fire-speed: 2.55s;
  opacity: 0.86;
  filter: saturate(0.98) brightness(1.1) blur(0.35px);
  z-index: 3;
}

.listen-env-torch-flame--cozy-candle > .listen-env-fire-hit {
  inset: -35% -45% -10%;
}

.listen-env-torch-flame--cozy-candle::before {
  width: 125%;
  height: 120%;
  bottom: 4%;
  opacity: 0.9;
  filter: blur(4px);
}

.listen-env-smoke-column--cozy-candle {
  position: absolute;
  left: var(--cozy-candle-smoke-left);
  bottom: var(--cozy-candle-smoke-bottom);
  top: auto;
  width: var(--cozy-candle-smoke-width);
  height: var(--cozy-candle-smoke-height);
  margin-left: 0;
  transform: translateX(-50%);
  opacity: 0.4;
  z-index: 4;
}

.listen-env-smoke-column--cozy-candle .listen-env-smoke-wisp {
  width: 55%;
  left: 22%;
}

.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 fire sparks ? full-scene host (not clipped by flame anchors) */
.listen-env-fire-spark-host,
.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-fire-spark-host,
.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,
.listen-environment-props--effects-muted .listen-env-horror-hook-drip-stage {
  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-horror-lamp-cone,
.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-hud-glyph-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-scifi-hud-glyph-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,
.listen-environment-props--effects-muted .listen-env-page-glow {
  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-fire-spark-host,
.listen-environment-props.listen-env-reduced-motion .listen-env-cozy-spark-host {
  animation: none !important;
}

.listen-environment-props.listen-env-reduced-motion .listen-env-fire-spark-host,
.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;
}

.listen-environment-props.listen-env-reduced-motion .listen-env-smoke-column--cozy-candle {
  opacity: 0.22;
}

/* ?? 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%;
  /* Center stone fireplace ? same stack as Cozy Hearth. */
  --tavern-hearth-left: 37%;
  --tavern-hearth-bottom: 27%;
  --tavern-hearth-width: 26%;
  --tavern-hearth-height: 14%;
  --tavern-hearth-offset-x: 0%;
  --tavern-hearth-offset-y: -1%;
  --cozy-spark-floor-dx-max: 72px;
  --cozy-spark-floor-drop-max: 22px;
}

.listen-env-hearth-anchor--tavern {
  position: absolute;
  left: var(--tavern-hearth-left);
  bottom: var(--tavern-hearth-bottom);
  width: var(--tavern-hearth-width);
  height: var(--tavern-hearth-height);
  transform: translate(var(--tavern-hearth-offset-x), var(--tavern-hearth-offset-y));
  pointer-events: auto;
  z-index: 3;
}

.listen-env-hearth-anchor--tavern .listen-env-cozy-floor-glow {
  opacity: 0.62;
  left: -20%;
  bottom: -48%;
  width: 140%;
  height: 95%;
}

.listen-env-hearth-anchor--tavern .listen-env-cozy-hearth-flame {
  opacity: 0.74;
  --listen-fire-speed: 2.55s;
}

.listen-env-smoke-column--tavern-hearth {
  opacity: 0.52;
  height: 130%;
  bottom: 78%;
}

/* 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 {
  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-column.listen-env-smoke-column--tavern-left,
.listen-env-smoke-column.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.listen-env-smoke-column--tavern-left {
  left: var(--tavern-smoke-left);
  top: var(--tavern-smoke-top);
}

.listen-env-smoke-column.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-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))
    brightness(var(--noir-lamp-brightness, 1));
  mix-blend-mode: screen;
  /* Steady until JS electrical-short bursts (synced with SFX). */
}

/* 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))
    brightness(var(--noir-lamp-brightness, 1));
  mix-blend-mode: screen;
}

/* 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;
}

.listen-env-noir-rain-streak--drag {
  animation-name: listen-noir-rain-slide-drag;
}

.listen-env-noir-rain-streak--slip {
  animation-name: listen-noir-rain-slide-slip;
}

@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);
  }
}

/* Mild mid-pane hesitation ? catch-up stays near linear so it never shoots. */
@keyframes listen-noir-rain-slide-drag {
  0% {
    opacity: 0;
    transform: translateY(0) scale(0.45, 0.65);
  }
  8% {
    opacity: 0.52;
    transform: translateY(calc(var(--noir-rain-slide, 110px) * 0.07)) scale(0.52, 0.7);
  }
  40% {
    opacity: 0.5;
    transform: translateY(calc(var(--noir-rain-slide, 110px) * 0.32)) scale(0.72, 0.84);
  }
  58% {
    opacity: 0.48;
    transform: translateY(calc(var(--noir-rain-slide, 110px) * 0.48)) scale(0.8, 0.9);
  }
  80% {
    opacity: 0.28;
    transform: translateY(calc(var(--noir-rain-slide, 110px) * 0.78)) scale(0.92, 0.96);
  }
  100% {
    opacity: 0;
    transform: translateY(var(--noir-rain-slide, 110px)) scale(1, 1);
  }
}

/* Mild mid-pane slip ? only a tad faster than linear through the middle. */
@keyframes listen-noir-rain-slide-slip {
  0% {
    opacity: 0;
    transform: translateY(0) scale(0.45, 0.65);
  }
  8% {
    opacity: 0.52;
    transform: translateY(calc(var(--noir-rain-slide, 110px) * 0.07)) scale(0.52, 0.7);
  }
  35% {
    opacity: 0.5;
    transform: translateY(calc(var(--noir-rain-slide, 110px) * 0.32)) scale(0.68, 0.8);
  }
  55% {
    opacity: 0.42;
    transform: translateY(calc(var(--noir-rain-slide, 110px) * 0.6)) scale(0.88, 0.94);
  }
  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-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%
  );
  /* Held at what used to be the peak of the breathing loop — the travelling
     glyph sparks carry the motion now. */
  opacity: 0.82;
  filter: brightness(1.12);
}

/* Sparks that hop between glyph/hex cells of the left HUD (positions from JS) */
.listen-env-scifi-hud-glyph-lights-host {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 8;
}

.listen-env-scifi-hud-glyph-light {
  position: absolute;
  transform: translate(-50%, -50%);
  border-radius: 1px;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0;
  filter: blur(0.7px) brightness(1.2);
  will-change: opacity, box-shadow, left, top;
}

/* 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%;
  }
}

/* ?? 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-horror-lamp-cone,
.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-scifi-hud-glyph-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,
.listen-environment-props.listen-env-reduced-motion .listen-env-horror-hook-drip-stage {
  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],
.listen-environment-auto-select-skin-row[hidden],
.listen-environment-keep-skin-row[hidden],
.listen-environment-test-animations-row[hidden] {
  display: none !important;
}

/* Author display:flex/block on sidebar toggles overrides UA [hidden]. */
.sidebar-playback-settings .listen-highlight-toggle[hidden],
.sidebar-playback-settings .sidebar-field[hidden],
.sidebar-playback-settings .meta[hidden],
.sidebar-playback-settings .listen-speed-override-hint[hidden],
.sidebar-playback-settings .listen-speed-override-row[hidden] {
  display: none !important;
}

/* Power-user Playback Settings: visible on local origins (127.0.0.1 / LAN),
   hidden on immersivepage.com. html.dev-local-origin is set in index.html head. */
html:not(.dev-local-origin) .sidebar-playback-settings .listen-prod-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 / atmosphere layers are Listen-tab only. */
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,
body:not(.wizard-step-listen) .listen-fire-glow,
body:not(.wizard-step-listen) .listen-rain-overlay,
body:not(.wizard-step-listen) .listen-storm-flash,
body:not(.wizard-step-listen) .listen-house-lights-dim,
body:not(.wizard-step-listen) .listen-theater-curtain,
body:not(.wizard-step-listen) .listen-location-wipe,
body:not(.wizard-step-listen) .listen-scene-card,
body:not(.wizard-step-listen) .listen-intermission-card,
body:not(.wizard-step-listen) .listen-end-credits,
body:not(.wizard-step-listen) .listen-stinger-curtain {
  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);
}

.listen-atmosphere-host[data-listen-environment="study-time"] .listen-atmosphere-overlay {
  background: rgba(245, 244, 238, 0.04);
  box-shadow: inset 0 0 90px rgba(40, 48, 36, 0.12);
}

.listen-atmosphere-host[data-listen-environment="alone-time"] .listen-atmosphere-overlay {
  background: rgba(40, 16, 28, 0.08);
  box-shadow: inset 0 0 100px rgba(60, 20, 36, 0.22);
}

.listen-environment-overlay[data-environment="alone-time"][data-warm="1"]::after {
  background: radial-gradient(ellipse 88% 78% at 50% 48%, rgba(255, 160, 170, 0.05) 0%, transparent 70%);
}

/* ?? 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"]):not([data-reader-layout="storyboard"])
  .listen-chapter-art
  img,
.listen-atmosphere-host.listen-camera-kenburns:not([data-reader-layout="book"]):not([data-reader-layout="storyboard"])
  .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%);
  }
}

/* Storyboard: one zoom-in per still, then hold (restart on next image). */
@keyframes storyboard-kb-zoom-in {
  0% {
    transform: scale(1.04) translate(0, 0);
  }
  100% {
    transform: scale(1.12) translate(-1.8%, -1.2%);
  }
}

.listen-atmosphere-host[data-reader-layout="storyboard"].listen-storyboard-kenburns
  .listen-chapter-art-layer.is-active {
  animation: storyboard-kb-zoom-in 14s ease-out forwards;
  transform-origin: center center;
  will-change: transform;
}

/* Outgoing layer: freeze mid-zoom via inline transform (do not snap to end). */
.listen-atmosphere-host[data-reader-layout="storyboard"]
  .listen-chapter-art-layer.listen-storyboard-kb-hold {
  animation: none !important;
  transform-origin: center center;
}

.listen-atmosphere-host[data-reader-layout="storyboard"].listen-storyboard-kenburns.listen-storyboard-kb-paused
  .listen-chapter-art-layer.is-active {
  animation-play-state: paused;
}

@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,
  .listen-atmosphere-host[data-reader-layout="storyboard"].listen-storyboard-kenburns
    .listen-chapter-art-layer.is-active,
  .listen-atmosphere-host[data-reader-layout="storyboard"]
    .listen-chapter-art-layer.listen-storyboard-kb-hold {
    animation: none !important;
    transform: none !important;
  }
}

/* ---- Storyboard Cinema layout (full-bleed stills + caption overlay) ---- */
.listen-atmosphere-host[data-reader-layout="storyboard"] .listen-scroll-frame,
.listen-atmosphere-host[data-reader-layout="storyboard"] .listen-scroll-sheet,
.listen-atmosphere-host[data-reader-layout="storyboard"] .listen-scroll-parchment {
  display: contents;
}

.listen-atmosphere-host[data-reader-layout="storyboard"] .listen-reader-body {
  position: relative;
  min-height: min(70vh, 42rem);
  isolation: isolate;
}

.listen-atmosphere-host[data-reader-layout="storyboard"] .listen-spread-pages-row {
  display: block;
  position: relative;
  min-height: min(70vh, 42rem);
}

.listen-atmosphere-host[data-reader-layout="storyboard"] .listen-spread-page--companion {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.listen-atmosphere-host[data-reader-layout="storyboard"] #listen-story-image-slot,
.listen-atmosphere-host[data-reader-layout="storyboard"] .listen-chapter-art,
.listen-atmosphere-host[data-reader-layout="storyboard"] .listen-figure-card {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  background: #0a0a0c;
  max-height: none;
  min-height: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  overflow: hidden;
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  grid-template-columns: minmax(0, 1fr);
  place-items: stretch;
}

.listen-atmosphere-host[data-reader-layout="storyboard"] .listen-chapter-art::after,
.listen-atmosphere-host[data-reader-layout="storyboard"] .listen-figure-card::after {
  display: none;
}

.listen-atmosphere-host[data-reader-layout="storyboard"] .listen-chapter-art img,
.listen-atmosphere-host[data-reader-layout="storyboard"] .listen-figure-card img,
.listen-atmosphere-host[data-reader-layout="storyboard"] .listen-chapter-art-layer {
  grid-area: 1 / 1;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: cover;
  object-position: center;
  margin: 0;
  pointer-events: none;
}

.listen-atmosphere-host[data-reader-layout="storyboard"] .listen-chapter-art-layer {
  opacity: 0;
  transition: opacity 1.4s ease;
  z-index: 0;
}

.listen-atmosphere-host[data-reader-layout="storyboard"]
  .listen-chapter-art
  img.listen-chapter-art-layer.is-active,
.listen-atmosphere-host[data-reader-layout="storyboard"] .listen-chapter-art-layer.is-active {
  opacity: 1;
  pointer-events: auto;
  z-index: 1;
}

.listen-atmosphere-host[data-reader-layout="storyboard"]
  .listen-chapter-art:not(.is-crossfading)
  .listen-chapter-art-layer:not(.is-active) {
  visibility: hidden;
  pointer-events: none;
}

.listen-atmosphere-host[data-reader-layout="storyboard"]
  .listen-chapter-art.is-instant-swap
  .listen-chapter-art-layer {
  transition: none !important;
}

.listen-atmosphere-host[data-reader-layout="storyboard"] .listen-companion-text-scroll,
.listen-atmosphere-host[data-reader-layout="storyboard"] .listen-book-page-face--back,
.listen-atmosphere-host[data-reader-layout="storyboard"] #listen-book-closed-overlay,
.listen-atmosphere-host[data-reader-layout="storyboard"] .listen-page-footer--companion,
.listen-atmosphere-host[data-reader-layout="storyboard"] #listen-right-page-image-slot,
.listen-atmosphere-host[data-reader-layout="storyboard"] .listen-page-skin-layer,
.listen-atmosphere-host[data-reader-layout="storyboard"] .listen-page-creases,
.listen-atmosphere-host[data-reader-layout="storyboard"] .listen-page-dogear,
.listen-atmosphere-host[data-reader-layout="storyboard"] .listen-page-edge-tear,
.listen-atmosphere-host[data-reader-layout="storyboard"] .listen-book-page-curl {
  display: none !important;
}

.listen-atmosphere-host[data-reader-layout="storyboard"] #listen-in-scene-panel {
  display: none !important;
}

.listen-atmosphere-host[data-reader-layout="storyboard"] .listen-spread-page--current {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 4;
  max-height: 38%;
  margin: 0;
  padding: 0;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(6, 8, 12, 0.55) 28%,
    rgba(6, 8, 12, 0.82) 100%
  );
  border: none;
  box-shadow: none;
  pointer-events: auto;
}

.listen-atmosphere-host[data-reader-layout="storyboard"] .listen-book-page-flip,
.listen-atmosphere-host[data-reader-layout="storyboard"] .listen-book-page-face--front,
.listen-atmosphere-host[data-reader-layout="storyboard"] .listen-book-page-body {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}

.listen-atmosphere-host[data-reader-layout="storyboard"] #listen-text-scroll {
  max-height: 100%;
  overflow: auto;
  padding: 1.25rem 1.35rem 1.1rem;
  background: transparent;
}

.listen-atmosphere-host[data-reader-layout="storyboard"] #listen-dialogue-panel,
.listen-atmosphere-host[data-reader-layout="storyboard"] .listen-text {
  color: #f4f1ea;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.65);
}

.listen-atmosphere-host[data-reader-layout="storyboard"] .listen-page-footer {
  display: none !important;
}

.listen-storyboard-empty-hint {
  position: absolute;
  left: 50%;
  top: 42%;
  transform: translate(-50%, -50%);
  z-index: 5;
  max-width: min(28rem, 86vw);
  margin: 0;
  padding: 0.85rem 1rem;
  border-radius: 0.55rem;
  background: rgba(12, 14, 18, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #e8e4dc;
  text-align: center;
  line-height: 1.45;
}

.listen-atmosphere-host:not(.listen-storyboard-empty) .listen-storyboard-empty-hint {
  display: 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);
}

/* Author display:flex would otherwise override the UA [hidden] rule. */
.cast-merge-row[hidden] {
  display: none !important;
}

.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 {
  display: flex;
  flex-direction: column;
  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;
  /* 2026-07-21: was `filter: none` ? skin-matched (see END block). Rollback tag: rollback/skin-img-before-2026-07-21 */
  filter: var(--listen-skin-img-filter, none);
  mix-blend-mode: var(--listen-skin-img-blend, normal);
  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:not(.is-crossfading)
  .listen-chapter-art-layer:not(.is-active) {
  visibility: 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.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;
}

/*
 * Full-viewport atmosphere (gradients + grain). Previously this lived only on
 * .panel-home, so gutters outside the content column looked like a flat stripe.
 * Same treatment for the user-upload import wizard (Document ? Cast).
 * Default Listen environment (no themed backdrop) reuses the same look.
 */
body.wizard-step-home::before,
body.wizard-import-flow::before,
body.wizard-step-listen[data-listen-environment="default"]::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  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%),
    var(--bg);
}

body.wizard-step-home::after,
body.wizard-import-flow::after,
body.wizard-step-listen[data-listen-environment="default"]::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  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;
}

body.wizard-step-home .app-shell,
body.wizard-step-home .app,
body.wizard-import-flow .app-shell,
body.wizard-import-flow .app,
body.wizard-step-listen[data-listen-environment="default"] .app-shell,
body.wizard-step-listen[data-listen-environment="default"] .app {
  position: relative;
  z-index: 1;
  background: transparent;
}

/*
 * Keep Home-style grain/corner glows visible for the whole Default session.
 * Opaque host --bg (and the old rain bottom wash) flattened the viewport once
 * the open ceremony ended or Cinema rain started.
 */
body.wizard-step-listen[data-listen-environment="default"] .listen-atmosphere-host {
  background: transparent;
}

.panel-home {
  position: relative;
  padding-bottom: 2rem;
  isolation: isolate;
  background: transparent;
}

/* Column-scoped atmosphere retired ? kept as no-ops so markup stays harmless. */
.panel-home::before {
  content: none;
}

.home-ambient {
  display: none;
}

@keyframes home-ambient-drift {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(-1.5%, 1%, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  body.wizard-step-home::after,
  body.wizard-import-flow::after,
  body.wizard-step-listen[data-listen-environment="default"]::after {
    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.05fr) minmax(14rem, 0.85fr);
  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.primary,
.home-command-actions > button.secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  height: 2.75rem;
  min-height: 2.75rem;
  max-height: 2.75rem;
  margin: 0;
  padding: 0 1.2rem;
  font-size: 0.95rem;
  line-height: 1;
}

.home-command-actions > button.secondary {
  /* Match button fill so the reserved border is invisible until hover. */
  border-color: var(--panel);
}

.home-command-actions > button.secondary:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--accent) 42%, var(--border));
}

.home-command-actions button[hidden] {
  display: none !important;
}

.home-command-strip--demo-hidden {
  grid-template-columns: minmax(0, 1.55fr) minmax(14rem, 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.75x12.5rem), scaled up ~25%. */
.home-featured-hero-cover {
  width: 11rem;
  flex-shrink: 0;
}

.home-featured-hero-cover .enhanced-story-cover-wrap,
.home-featured-hero-cover .enhanced-story-cover-wrap--home {
  width: 11rem;
}

.home-featured-hero-cover .enhanced-story-cover-wrap .enhanced-story-cover,
.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 .enhanced-story-cover,
  .home-featured-hero-cover:focus-within .enhanced-story-cover-wrap .enhanced-story-cover,
  .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 .enhanced-story-cover,
  .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 .enhanced-story-cover,
  .home-featured-hero-cover:focus-within .enhanced-story-cover-wrap .enhanced-story-cover,
  .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,
#home-shelf-downloaded .home-shelf-title,
.home-shelf[data-home-shelf-id="home-shelf-downloaded"] .home-shelf-title {
  color: color-mix(in srgb, var(--text) 88%, var(--spotlight) 12%);
}

.home-shelf-count {
  margin-left: 0.35rem;
  font-size: 0.78rem;
}

.home-shelf-downloaded-empty {
  margin: 0.35rem 0 0.15rem;
  max-width: 36rem;
  font-size: 0.9rem;
  color: var(--muted);
}

.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-featured-hero-cover .enhanced-story-cover-wrap--home,
  .home-featured-hero-cover .enhanced-story-cover-wrap .enhanced-story-cover,
  .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%;
  }
}

/* =============================================================================
 * BEGIN ? Skin-matched book image treatments ? 2026-07-21
 * =============================================================================
 * Purpose: Tone book-layout illustrations so they feel printed into each reader
 * skin (paper grain, warmth, print fade) instead of crisp digital photos on top.
 *
 * 2026-07-21 polish pass: B&W newspaper, stone cracks, soft edge fades (organic),
 * Academic masking-tape mounts, Romance scrapbook corners, Dark Parchment dust,
 * Suspense blood + ripped edge.
 *
 * Touches: full-page .listen-page-image + companion .listen-story-image art.
 * Skips: no-skin (images hidden), leaves minimal nearly untreated.
 * Academic + Romance: sharp photo-mount (no soft fade).
 *
 * Rollback options:
 *   1. Delete this entire block (search marker: "BEGIN ? Skin-matched book image").
 *   2. Also revert the few `filter: var(--listen-skin-img-filter?)` call sites
 *      above back to `filter: none` (search "2026-07-21: was `filter: none`").
 *   3. Full file restore:
 *        git checkout rollback/skin-img-before-2026-07-21 -- tools/wizard/wizard.css
 *      (annotated tag on pre-change HEAD).
 * ============================================================================= */

.listen-atmosphere-host[data-reader-layout="book"] {
  --listen-skin-img-filter: none;
  --listen-skin-img-blend: normal;
  --listen-skin-img-overlay: none;
  --listen-skin-img-overlay-opacity: 0;
  --listen-skin-img-overlay-blend: multiply;
  --listen-skin-img-soft-edge: 0;
  --listen-skin-img-margin: 0px;
  --listen-skin-img-deco: none;
  --listen-skin-img-deco-opacity: 0;
  --listen-skin-img-deco-blend: normal;
  --listen-skin-img-clip: none;
}

/* ---- Per-skin recipes ---- */

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="minimal"] {
  --listen-skin-img-filter: saturate(0.96) contrast(0.98) brightness(0.99);
  --listen-skin-img-overlay-opacity: 0;
  --listen-skin-img-soft-edge: 0;
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="fantasy-scroll"] {
  --listen-skin-img-filter: sepia(0.18) saturate(0.8) contrast(0.95) brightness(0.98);
  --listen-skin-img-blend: multiply;
  /* No rectangular slot veil ? soft-edge masks made full-bleed ::after read as boxes. */
  --listen-skin-img-overlay-opacity: 0;
  --listen-skin-img-frame-border: none;
  --listen-skin-img-frame-shadow: none;
  --listen-skin-img-frame-bg: transparent;
  --listen-skin-img-soft-edge: 1;
  --listen-skin-img-margin: clamp(0.45rem, 3%, 0.9rem);
  --listen-skin-img-deco: none;
  --listen-skin-img-deco-opacity: 0;
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="academic"] {
  --listen-skin-img-filter: saturate(0.92) contrast(1.02) brightness(1);
  --listen-skin-img-blend: normal;
  --listen-skin-img-overlay-opacity: 0;
  --listen-skin-img-frame-border: none;
  --listen-skin-img-frame-radius: 0;
  --listen-skin-img-frame-shadow: none;
  --listen-skin-img-frame-bg: transparent;
  --listen-skin-img-soft-edge: 0;
  /* Slightly smaller plate so tape can sit on the corners and onto the page. */
  --listen-skin-img-margin: clamp(1.45rem, 9.5%, 2.4rem);
  /* Deco frame larger than the photo (inset < margin) ? tape toward page edges. */
  --listen-skin-img-deco-inset: clamp(0.3rem, 2%, 0.55rem);
  --listen-skin-img-deco-size: 100% 100%;
  --listen-skin-img-deco: var(--listen-skin-academic-tape-corners);
  --listen-skin-img-deco-opacity: 0.95;
  --listen-skin-img-deco-blend: normal;
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="romance"] {
  --listen-skin-img-filter: sepia(0.14) saturate(0.92) contrast(0.96) brightness(1.02);
  --listen-skin-img-blend: normal;
  --listen-skin-img-overlay-opacity: 0;
  --listen-skin-img-frame-border: none;
  --listen-skin-img-frame-radius: 0;
  --listen-skin-img-frame-shadow: none;
  --listen-skin-img-frame-bg: transparent;
  --listen-skin-img-soft-edge: 0;
  /* Plate inset leaves paper around the photo for scrapbook corners. */
  --listen-skin-img-margin: clamp(1rem, 6.5%, 1.55rem);
  /* Deco frame hugs the leaf edge more than the photo ? corners hold the plate. */
  --listen-skin-img-deco-inset: clamp(0.12rem, 1%, 0.35rem);
  /* Mild overscale shrinks visible corner pieces without burying them on the photo. */
  --listen-skin-img-deco-size: 128% 128%;
  --listen-skin-img-deco: var(--listen-skin-romance-scrapbook-corners);
  --listen-skin-img-deco-opacity: 0.95;
  --listen-skin-img-deco-blend: normal;
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="sci-fi"] {
  --listen-skin-img-filter: saturate(0.82) contrast(1.06) brightness(0.94) hue-rotate(-6deg);
  --listen-skin-img-overlay-opacity: 0;
  --listen-skin-img-frame-border: 1px solid rgba(60, 180, 220, 0.28);
  --listen-skin-img-frame-shadow: 0 0 12px rgba(40, 160, 200, 0.12);
  --listen-skin-img-frame-bg: transparent;
  --listen-skin-img-soft-edge: 1;
  --listen-skin-img-margin: clamp(0.4rem, 2.5%, 0.75rem);
  --listen-skin-img-deco: none;
  --listen-skin-img-deco-opacity: 0;
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="stone-tablet"] {
  /* Keep the plate readable ? blend modes were crushing dark photos into the stone.
   * Mild sandstone grade only; cracks stay as corner chips. */
  --listen-skin-img-filter: sepia(0.14) saturate(0.82) contrast(0.98) brightness(1.28);
  --listen-skin-img-blend: normal;
  --listen-skin-img-overlay-opacity: 0;
  --listen-skin-img-frame-border: none;
  --listen-skin-img-frame-shadow: none;
  --listen-skin-img-frame-bg: transparent;
  --listen-skin-img-soft-edge: 1;
  --listen-skin-img-margin: clamp(0.45rem, 3%, 0.9rem);
  /* Corner cracks paint on the shrink-wrapped figure (rules below). */
  --listen-skin-img-deco: var(--listen-skin-stone-corner-crack);
  --listen-skin-img-deco-opacity: 0.55;
  --listen-skin-img-deco-blend: multiply;
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="old-newspaper"] {
  /* Print into newsprint (multiply) so plates read as inked photos, not digital drop-ins.
   * Softer contrast + mild blur so CG plates read dingier / less razor-sharp. */
  --listen-skin-img-filter: grayscale(1) sepia(0.28) contrast(0.9) brightness(1.06) blur(0.35px);
  --listen-skin-img-blend: multiply;
  --listen-skin-img-overlay-opacity: 0;
  --listen-skin-img-frame-border: 1px solid rgba(28, 26, 22, 0.45);
  --listen-skin-img-frame-radius: 0;
  --listen-skin-img-frame-shadow: none;
  --listen-skin-img-frame-bg: transparent;
  --listen-skin-img-soft-edge: 0;
  --listen-skin-img-margin: clamp(0.55rem, 3.5%, 1.05rem);
  /* Slot deco unused ? grain paints on the shrink-wrapped figure (exact photo bounds). */
  --listen-skin-img-deco: none;
  --listen-skin-img-deco-opacity: 0;
  --listen-skin-img-deco-blend: soft-light;
  /* Fine fractal grain + coarser ink mottling (data-URIs; no masthead/columns). */
  --listen-skin-img-grain:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128'%3E%3Cfilter id='g' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='4' stitchTiles='stitch' result='n'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.22  0 0 0 0 0.2  0 0 0 0 0.18  0 0 0 0.7 0'/%3E%3C/filter%3E%3Crect width='128' height='128' filter='url(%23g)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='m' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.35' numOctaves='2' stitchTiles='stitch' result='n'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.18  0 0 0 0 0.16  0 0 0 0 0.12  0 0 0 0.55 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23m)'/%3E%3C/svg%3E");
  --listen-skin-img-grain-size: 110px 110px, 160px 160px;
  --listen-skin-img-grain-opacity: 0.62;
  --listen-skin-img-grain-blend: overlay;
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="dark-parchment"] {
  --listen-skin-img-filter: sepia(0.28) saturate(0.55) contrast(1.04) brightness(0.9);
  --listen-skin-img-blend: normal;
  --listen-skin-img-overlay-opacity: 0;
  --listen-skin-img-frame-border: none;
  --listen-skin-img-frame-shadow: none;
  --listen-skin-img-frame-bg: transparent;
  --listen-skin-img-soft-edge: 1;
  --listen-skin-img-margin: clamp(0.45rem, 3%, 0.9rem);
  --listen-skin-img-deco: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%23b8aea0' stroke-opacity='0.35' stroke-width='0.55'%3E%3Cpath d='M0 0 Q40 8 55 40 Q20 30 0 55'/%3E%3Cpath d='M0 0 Q28 22 48 48'/%3E%3Cpath d='M12 0 Q36 18 42 42'/%3E%3Cpath d='M200 0 Q160 10 148 38 Q178 28 200 52'/%3E%3Cpath d='M200 0 Q172 24 156 46'/%3E%3Cpath d='M0 200 Q30 175 48 155 Q18 168 0 150'/%3E%3Cpath d='M200 200 Q170 178 155 158'/%3E%3C/g%3E%3C/svg%3E");
  --listen-skin-img-deco-opacity: 0.45;
  --listen-skin-img-deco-blend: soft-light;
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="suspense-thriller"] {
  --listen-skin-img-filter: saturate(0.62) contrast(1.12) brightness(0.9);
  --listen-skin-img-overlay-opacity: 0;
  --listen-skin-img-frame-border: none;
  --listen-skin-img-frame-shadow: none;
  --listen-skin-img-frame-bg: transparent;
  --listen-skin-img-soft-edge: 1;
  --listen-skin-img-margin: clamp(0.5rem, 3.2%, 1rem);
  --listen-skin-img-deco:
    radial-gradient(ellipse 42% 36% at 8% 10%, rgba(110, 18, 22, 0.72) 0%, rgba(90, 14, 18, 0.35) 38%, transparent 68%),
    radial-gradient(circle 3px at 14% 18%, rgba(100, 16, 20, 0.7) 0%, transparent 100%),
    radial-gradient(circle 2px at 19% 12%, rgba(100, 16, 20, 0.55) 0%, transparent 100%),
    radial-gradient(ellipse 48% 40% at 92% 88%, rgba(100, 16, 20, 0.7) 0%, rgba(80, 12, 16, 0.32) 42%, transparent 70%),
    radial-gradient(circle 2.5px at 84% 78%, rgba(100, 16, 20, 0.6) 0%, transparent 100%),
    radial-gradient(ellipse 36% 30% at 10% 90%, rgba(95, 14, 18, 0.55) 0%, transparent 65%);
  --listen-skin-img-deco-opacity: 0.5;
  --listen-skin-img-deco-blend: multiply;
  /* Jagged ripped silhouette (folio bow must NOT override this). */
  --listen-skin-img-clip: polygon(
    0% 3%,
    2% 0%,
    7% 2%,
    12% 0.5%,
    18% 2.5%,
    24% 0%,
    31% 2%,
    38% 0.5%,
    45% 2%,
    52% 0%,
    58% 2.5%,
    65% 0.5%,
    72% 2%,
    78% 0%,
    85% 2%,
    92% 0.5%,
    97% 2%,
    100% 0%,
    99% 6%,
    100% 12%,
    98% 18%,
    100% 25%,
    98.5% 32%,
    100% 40%,
    98% 48%,
    100% 55%,
    98.5% 62%,
    100% 70%,
    98% 78%,
    100% 85%,
    98.5% 92%,
    100% 97%,
    97% 100%,
    92% 98%,
    85% 100%,
    78% 98.5%,
    72% 100%,
    65% 98%,
    58% 100%,
    52% 98.5%,
    45% 100%,
    38% 98%,
    31% 100%,
    24% 98.5%,
    18% 100%,
    12% 98%,
    7% 100%,
    2% 98%,
    0% 100%,
    1% 94%,
    0% 88%,
    2% 82%,
    0% 75%,
    1.5% 68%,
    0% 60%,
    2% 52%,
    0% 45%,
    1.5% 38%,
    0% 30%,
    2% 22%,
    0% 15%,
    1.5% 8%
  );
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="well-worn-novel"] {
  --listen-skin-img-filter: sepia(0.28) saturate(0.7) contrast(0.92) brightness(0.98);
  --listen-skin-img-blend: multiply;
  --listen-skin-img-overlay-opacity: 0;
  --listen-skin-img-frame-border: none;
  --listen-skin-img-frame-radius: 0;
  --listen-skin-img-frame-shadow: none;
  --listen-skin-img-frame-bg: transparent;
  --listen-skin-img-soft-edge: 1;
  --listen-skin-img-margin: clamp(0.45rem, 3%, 0.9rem);
  --listen-skin-img-deco: none;
  --listen-skin-img-deco-opacity: 0;
}

/* Decorations Off: hide tape / photo corners / crack chips / cobweb / blood deco.
 * Soft fades + filters remain (print aging is not optional chrome). */
.listen-atmosphere-host[data-reader-layout="book"][data-reader-decoration="off"] {
  --listen-skin-img-deco: none;
  --listen-skin-img-deco-opacity: 0;
}

/* ---- Shared layout: margin, soft edge, overlays, deco ---- */

.listen-atmosphere-host[data-reader-layout="book"]:not([data-reader-skin="minimal"]):not([data-reader-skin="no-skin"])
  .listen-spread-page--image-side
  .listen-page-image-slot,
.listen-atmosphere-host[data-reader-layout="book"]:not([data-reader-skin="minimal"]):not([data-reader-skin="no-skin"])
  .listen-spread-page--companion:not(.listen-spread-page--image-side)
  .listen-story-image-slot {
  box-sizing: border-box;
  padding-top: var(--listen-skin-img-margin, 0px);
  padding-bottom: var(--listen-skin-img-margin, 0px);
  padding-left: var(--listen-skin-img-margin, 0px);
  padding-right: var(--listen-skin-img-margin, 0px);
}

/* Preserve spine-aware landscape insets; take the larger of soft-margin vs book gaps. */
.listen-atmosphere-host[data-reader-layout="book"]:not([data-reader-skin="minimal"]):not([data-reader-skin="no-skin"])
  .listen-spread-page--current.listen-spread-page--image-side
  .listen-page-image-slot.is-landscape {
  padding-right: max(
    var(--listen-skin-img-margin, 0px),
    var(--listen-book-page-image-spine-gap, clamp(0.7rem, 5%, 1.4rem))
  );
  padding-left: max(
    var(--listen-skin-img-margin, 0px),
    var(--listen-book-page-image-side-gap, clamp(0.45rem, 3%, 0.9rem))
  );
}

.listen-atmosphere-host[data-reader-layout="book"]:not([data-reader-skin="minimal"]):not([data-reader-skin="no-skin"])
  .listen-spread-page--companion.listen-spread-page--image-side
  .listen-page-image-slot.is-landscape {
  padding-left: max(
    var(--listen-skin-img-margin, 0px),
    var(--listen-book-page-image-spine-gap, clamp(0.7rem, 5%, 1.4rem))
  );
  padding-right: max(
    var(--listen-skin-img-margin, 0px),
    var(--listen-book-page-image-side-gap, clamp(0.45rem, 3%, 0.9rem))
  );
}

/* Book + Full Paragraph: center landscape override plates on the leaf.
 * Spine-vs-outer padding was shifting art toward the fore-edge; outer
 * side-page stacks remain handled by absolute slot insets per skin. */
.listen-atmosphere-host[data-reader-layout="book"][data-display-format="paragraph"]
  .listen-spread-page--current.listen-spread-page--image-side
  .listen-page-image-slot.is-landscape,
.listen-atmosphere-host[data-reader-layout="book"][data-display-format="paragraph"]
  .listen-spread-page--companion.listen-spread-page--image-side
  .listen-page-image-slot.is-landscape {
  /* Match Sci-Fi / Alone Time / Noir plate scale; portrait keeps per-skin margins. */
  --listen-skin-img-margin: clamp(0.45rem, 3%, 0.9rem);
  padding-top: var(--listen-skin-img-margin, 0px);
  padding-bottom: var(--listen-skin-img-margin, 0px);
  padding-left: max(
    var(--listen-skin-img-margin, 0px),
    var(--listen-book-page-image-side-gap, clamp(0.4rem, 2.5%, 0.75rem))
  );
  padding-right: max(
    var(--listen-skin-img-margin, 0px),
    var(--listen-book-page-image-side-gap, clamp(0.4rem, 2.5%, 0.75rem))
  );
}

/* Folio skins: absolute slot insets were sized for portrait mounts (~8% / 1.75rem).
 * Landscape Full Paragraph overrides use Sci-Fi-like insets (still clear side-page stacks). */
.listen-atmosphere-host[data-reader-layout="book"][data-display-format="paragraph"]:is(
  [data-reader-skin="academic"],
  [data-reader-skin="suspense-thriller"],
  [data-reader-skin="dark-parchment"]
)
  .listen-spread-page--current.listen-spread-page--image-side
  .listen-page-image-slot.is-landscape {
  left: calc(
    var(--listen-folio-curl-width, 18px) + clamp(0.45rem, 3%, 0.9rem)
  );
  right: clamp(0.45rem, 3%, 0.9rem);
}

.listen-atmosphere-host[data-reader-layout="book"][data-display-format="paragraph"]:is(
  [data-reader-skin="academic"],
  [data-reader-skin="suspense-thriller"],
  [data-reader-skin="dark-parchment"]
)
  .listen-spread-page--companion.listen-spread-page--image-side
  .listen-page-image-slot.is-landscape {
  right: calc(
    var(--listen-folio-curl-width, 18px) + clamp(0.45rem, 3%, 0.9rem)
  );
  left: clamp(0.45rem, 3%, 0.9rem);
}

.listen-atmosphere-host[data-reader-layout="book"][data-display-format="paragraph"][data-reader-skin="well-worn-novel"]
  .listen-spread-page--current.listen-spread-page--image-side
  .listen-page-image-slot.is-landscape {
  left: calc(18px + clamp(0.45rem, 3%, 0.9rem));
  right: clamp(0.45rem, 3%, 0.9rem);
}

.listen-atmosphere-host[data-reader-layout="book"][data-display-format="paragraph"][data-reader-skin="well-worn-novel"]
  .listen-spread-page--companion.listen-spread-page--image-side
  .listen-page-image-slot.is-landscape {
  right: calc(18px + clamp(0.45rem, 3%, 0.9rem));
  left: clamp(0.45rem, 3%, 0.9rem);
}

/* Novel-like skins: equal in-slot padding (outer centering is handled by slot
 * left/right insets above ? do not add spine-only padding that shoves art out). */
.listen-atmosphere-host[data-reader-layout="book"]:is(
  [data-reader-skin="well-worn-novel"],
  [data-reader-skin="fantasy-scroll"],
  [data-reader-skin="academic"],
  [data-reader-skin="suspense-thriller"],
  [data-reader-skin="dark-parchment"]
)
  .listen-spread-page--image-side
  .listen-page-image-slot:not(.is-landscape) {
  padding-left: var(--listen-skin-img-margin, 0px);
  padding-right: var(--listen-skin-img-margin, 0px);
}

/* Full-bleed slot veils disabled 2026-07-21: with soft-edge masks they read as
 * hard rectangles behind the plate (Stone/Fantasy/Well-Worn artifact). Aging is
 * filter + mix-blend on the img; corner deco stays on ::before only. */
.listen-atmosphere-host[data-reader-layout="book"]
  .listen-page-image-slot::after,
.listen-atmosphere-host[data-reader-layout="book"]
  .listen-story-image-slot::after {
  content: none !important;
}

/* Skin-specific image decorations (stone cracks, cobweb hint, blood). */
.listen-atmosphere-host[data-reader-layout="book"]:not([data-reader-skin="minimal"]):not([data-reader-skin="no-skin"])
  .listen-page-image-slot::before,
.listen-atmosphere-host[data-reader-layout="book"]:not([data-reader-skin="minimal"]):not([data-reader-skin="no-skin"])
  .listen-story-image-slot::before {
  content: "";
  position: absolute;
  top: var(--listen-skin-img-deco-inset, var(--listen-skin-img-margin, 0px));
  right: var(--listen-skin-img-deco-inset, var(--listen-skin-img-margin, 0px));
  bottom: var(--listen-skin-img-deco-inset, var(--listen-skin-img-margin, 0px));
  left: var(--listen-skin-img-deco-inset, var(--listen-skin-img-margin, 0px));
  z-index: 4;
  pointer-events: none;
  background-image: var(--listen-skin-img-deco);
  background-repeat: no-repeat;
  background-size: var(--listen-skin-img-deco-size, 100% 100%);
  background-position: center;
  opacity: var(--listen-skin-img-deco-opacity, 0);
  mix-blend-mode: var(--listen-skin-img-deco-blend, normal);
}

/* No empty deco box when a skin has no corner treatment. */
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="fantasy-scroll"]
  .listen-page-image-slot::before,
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="fantasy-scroll"]
  .listen-story-image-slot::before,
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="well-worn-novel"]
  .listen-page-image-slot::before,
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="well-worn-novel"]
  .listen-story-image-slot::before,
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="sci-fi"]
  .listen-page-image-slot::before,
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="sci-fi"]
  .listen-story-image-slot::before,
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="stone-tablet"]
  .listen-page-image-slot::before,
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="stone-tablet"]
  .listen-story-image-slot::before,
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="minimal"]
  .listen-page-image-slot::before,
.listen-atmosphere-host[data-reader-layout="book"][data-reader-decoration="off"]
  .listen-page-image-slot::before,
.listen-atmosphere-host[data-reader-layout="book"][data-reader-decoration="off"]
  .listen-story-image-slot::before {
  content: none;
}

/* Academic / Romance: photo-mount corners live on the SLOT (not the figure).
 * margin insets the plate; deco-inset < margin so tape/scrapbook corners straddle
 * the photo edge onto the page ? the look that worked before figure-level overlays. */
.listen-atmosphere-host[data-reader-layout="book"]:is(
  [data-reader-skin="academic"],
  [data-reader-skin="romance"]
)
  .listen-page-image-slot::before,
.listen-atmosphere-host[data-reader-layout="book"]:is(
  [data-reader-skin="academic"],
  [data-reader-skin="romance"]
)
  .listen-story-image-slot::before {
  content: "";
  z-index: 6;
}

/* Study Time (academic) + Alone Time (romance): hide tape/scrapbook corners for
 * Full Paragraph landscape format-override plates only. Portrait overrides and
 * Dialog segment companion art keep the mounts. */
.listen-atmosphere-host[data-reader-layout="book"][data-display-format="paragraph"]:is(
  [data-reader-skin="academic"],
  [data-reader-skin="romance"]
)
  .listen-page-image-slot.is-landscape::before {
  content: none;
}

/* Stone: shrink-wrap the figure to the photo, then paint crack chips on that
 * box only (TL + flipped BR). Soft-edge mask is NOT applied to the chips ?
 * it was zeroing the corners where the cracks live. */
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="stone-tablet"]
  .listen-spread-page--image-side
  .listen-page-image,
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="stone-tablet"]
  .listen-story-image {
  position: relative;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  overflow: hidden;
  background: transparent;
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="stone-tablet"]
  .listen-page-image-slot::before,
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="stone-tablet"]
  .listen-story-image-slot::before {
  content: none;
}

/* Stone companion / chapter art: never paint the TL corner-crack chip
 * (reads as a dark square on portraits). Format-override image-side uses the
 * cracked-plate + soft wash block further below instead. */
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="stone-tablet"]
  .listen-story-image::before,
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="stone-tablet"]
  .listen-story-image::after {
  content: none !important;
}

/* Optional chip deco only on non-override page figures (image-side overrides this). */
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="stone-tablet"]
  .listen-page-image::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  background: var(--listen-skin-stone-corner-crack) left top / min(52%, 11rem) auto no-repeat;
  mix-blend-mode: var(--listen-skin-img-deco-blend, multiply);
  opacity: var(--listen-skin-img-deco-opacity, 0.85);
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="stone-tablet"]
  .listen-page-image::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: min(52%, 11rem);
  height: min(42%, 9rem);
  z-index: 5;
  pointer-events: none;
  background: var(--listen-skin-stone-corner-crack) left top / contain no-repeat;
  transform: scale(-1);
  transform-origin: center;
  mix-blend-mode: var(--listen-skin-img-deco-blend, multiply);
  opacity: var(--listen-skin-img-deco-opacity, 0.85);
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="stone-tablet"][data-reader-decoration="off"]
  .listen-page-image::before,
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="stone-tablet"][data-reader-decoration="off"]
  .listen-page-image::after {
  content: none;
}

/*
 * Stone + Suspense + Old Newspaper override plates: the figure was stretching to
 * the full slot (width/height 100% + % children), so soft-edge / clip / slot deco
 * painted a larger textured frame and the photo only covered the middle.
 * Shrink-wrap to the image and drop slot-sized overlays for format-override pages.
 */
.listen-atmosphere-host[data-reader-layout="book"]:is(
  [data-reader-skin="stone-tablet"],
  [data-reader-skin="suspense-thriller"],
  [data-reader-skin="old-newspaper"]
)
  .listen-spread-page--image-side
  .listen-page-image-slot {
  /* Kill the built-in skin-img matte padding/deco frame for overrides. */
  --listen-skin-img-margin: 0px;
  --listen-skin-img-deco: none;
  --listen-skin-img-deco-opacity: 0;
  --listen-skin-img-soft-edge: 0;
}

.listen-atmosphere-host[data-reader-layout="book"]:is(
  [data-reader-skin="stone-tablet"],
  [data-reader-skin="suspense-thriller"],
  [data-reader-skin="old-newspaper"]
)
  .listen-spread-page--image-side
  .listen-page-image-slot::before {
  content: none !important;
}

.listen-atmosphere-host[data-reader-layout="book"]:is(
  [data-reader-skin="stone-tablet"],
  [data-reader-skin="suspense-thriller"],
  [data-reader-skin="old-newspaper"]
)
  .listen-spread-page--image-side
  .listen-page-image {
  display: flex !important;
  flex: 0 0 auto !important;
  align-self: center !important;
  justify-content: center;
  align-items: center;
  width: max-content !important;
  height: max-content !important;
  max-width: 100% !important;
  max-height: 100% !important;
  margin: auto !important;
  /* Clip plate overlays to the photo bounds. Stone plate fill is set later. */
  overflow: hidden !important;
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="suspense-thriller"]
  .listen-spread-page--image-side
  .listen-page-image {
  background: transparent !important;
}

.listen-atmosphere-host[data-reader-layout="book"]:is(
  [data-reader-skin="stone-tablet"],
  [data-reader-skin="suspense-thriller"],
  [data-reader-skin="old-newspaper"]
)
  .listen-spread-page--image-side
  .listen-page-image
  img {
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: 100% !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
  -webkit-mask-composite: unset;
  mask-composite: unset;
}

/* Soft edge fade into the page (organic skins). Feather tightened 2026-07-21
 * (~3.5% vs prior ~7%) after feedback that the blur was too wide.
 * Old Newspaper / Academic / Romance excluded ? hard photo mounts.
 * Stone / Suspense format-override imgs cleared below (slot-sized matte bug). */
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin]:not([data-reader-skin="minimal"]):not([data-reader-skin="no-skin"]):not([data-reader-skin="academic"]):not([data-reader-skin="romance"]):not([data-reader-skin="old-newspaper"])
  .listen-page-image
  img,
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin]:not([data-reader-skin="minimal"]):not([data-reader-skin="no-skin"]):not([data-reader-skin="academic"]):not([data-reader-skin="romance"]):not([data-reader-skin="old-newspaper"])
  .listen-story-image
  img,
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin]:not([data-reader-skin="minimal"]):not([data-reader-skin="no-skin"]):not([data-reader-skin="academic"]):not([data-reader-skin="romance"]):not([data-reader-skin="old-newspaper"])
  .listen-chapter-art-layer {
  -webkit-mask-image:
    linear-gradient(to right, transparent 0%, #000 3.5%, #000 96.5%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 3.5%, #000 96.5%, transparent 100%);
  mask-image:
    linear-gradient(to right, transparent 0%, #000 3.5%, #000 96.5%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 3.5%, #000 96.5%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

/* Suspense ripped silhouette (applied to figure so soft-edge + blood deco clip together). */
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="suspense-thriller"]
  .listen-page-image,
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="suspense-thriller"]
  .listen-story-image,
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="suspense-thriller"]
  .listen-page-image
  img,
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="suspense-thriller"]
  .listen-story-image
  img {
  clip-path: var(--listen-skin-img-clip);
  -webkit-clip-path: var(--listen-skin-img-clip);
}

/* Academic / Romance / Stone: keep figures positioned for mount / crack chips. */
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="academic"]
  .listen-page-image,
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="romance"]
  .listen-page-image,
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="academic"]
  .listen-story-image,
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="romance"]
  .listen-story-image,
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="stone-tablet"]
  .listen-page-image,
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="stone-tablet"]
  .listen-story-image {
  position: relative;
  background: transparent;
}

/* Avoid letterbox panels reading as rectangles behind soft-edged plates.
 * Academic / Romance keep a white Polaroid matte on the figure (override below).
 * Stone Tablet keeps a cracked plate fill on override figures (see END block). */
.listen-atmosphere-host[data-reader-layout="book"]:not([data-reader-skin="minimal"]):not([data-reader-skin="no-skin"]):not([data-reader-skin="academic"]):not([data-reader-skin="romance"]):not([data-reader-skin="stone-tablet"])
  .listen-spread-page--image-side
  .listen-page-image,
.listen-atmosphere-host[data-reader-layout="book"]:not([data-reader-skin="minimal"]):not([data-reader-skin="no-skin"])
  .listen-spread-page--image-side
  .listen-page-image-slot {
  background: transparent !important;
  box-shadow: none;
}

/* Polaroid / print matte ? thin white border on the photo (Academic + Romance).
 * Both stay rectangular (no folio bow on Academic photo mounts). */
.listen-atmosphere-host[data-reader-layout="book"]:is(
  [data-reader-skin="academic"],
  [data-reader-skin="romance"]
)
  .listen-spread-page--image-side
  .listen-page-image,
.listen-atmosphere-host[data-reader-layout="book"]:is(
  [data-reader-skin="academic"],
  [data-reader-skin="romance"]
)
  .listen-story-image {
  background: transparent !important;
  box-shadow: none;
  -webkit-clip-path: none !important;
  clip-path: none !important;
}

.listen-atmosphere-host[data-reader-layout="book"]:is(
  [data-reader-skin="academic"],
  [data-reader-skin="romance"]
)
  .listen-spread-page--image-side
  .listen-page-image
  img,
.listen-atmosphere-host[data-reader-layout="book"]:is(
  [data-reader-skin="academic"],
  [data-reader-skin="romance"]
)
  .listen-story-image
  img {
  border: 3px solid #ffffff !important;
  border-radius: 1px;
  box-shadow: 0 1px 3px rgba(40, 50, 70, 0.22) !important;
  background: #ffffff !important;
  -webkit-clip-path: none !important;
  clip-path: none !important;
  max-width: 100%;
}

/* Well-Worn: let page creases sit above full-page art so wear continues across the plate. */
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="well-worn-novel"]
  .listen-spread-page--image-side
  .listen-page-creases {
  z-index: 5;
}

/* Multiply print skins: keep img background clear so paper shows through light areas. */
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="well-worn-novel"]
  .listen-spread-page--image-side
  .listen-page-image
  img,
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="fantasy-scroll"]
  .listen-spread-page--image-side
  .listen-page-image
  img,
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="stone-tablet"]
  .listen-spread-page--image-side
  .listen-page-image
  img,
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="old-newspaper"]
  .listen-spread-page--image-side
  .listen-page-image
  img,
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="dark-parchment"]
  .listen-spread-page--image-side
  .listen-page-image
  img,
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="suspense-thriller"]
  .listen-spread-page--image-side
  .listen-page-image
  img {
  background: transparent;
}

/* Prefers-reduced-transparency: drop blend/overlay/deco, keep a light filter only. */
@media (prefers-reduced-transparency: reduce) {
  .listen-atmosphere-host[data-reader-layout="book"] {
    --listen-skin-img-blend: normal;
    --listen-skin-img-overlay-opacity: 0;
    --listen-skin-img-deco-opacity: 0;
    --listen-skin-img-clip: none;
  }

  .listen-atmosphere-host[data-reader-layout="book"]:not([data-reader-skin="minimal"]):not([data-reader-skin="no-skin"])
    .listen-page-image-slot::after,
  .listen-atmosphere-host[data-reader-layout="book"]:not([data-reader-skin="minimal"]):not([data-reader-skin="no-skin"])
    .listen-story-image-slot::after,
  .listen-atmosphere-host[data-reader-layout="book"]:not([data-reader-skin="minimal"]):not([data-reader-skin="no-skin"])
    .listen-page-image-slot::before,
  .listen-atmosphere-host[data-reader-layout="book"]:not([data-reader-skin="minimal"]):not([data-reader-skin="no-skin"])
    .listen-story-image-slot::before {
    content: none;
  }

  .listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="stone-tablet"]
    .listen-page-image::before,
  .listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="stone-tablet"]
    .listen-story-image::before,
  .listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="stone-tablet"]
    .listen-page-image::after,
  .listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="stone-tablet"]
    .listen-story-image::after {
    content: none;
  }

  .listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="old-newspaper"]
    .listen-page-image::before,
  .listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="old-newspaper"]
    .listen-story-image::before {
    content: none;
  }
}

/*
 * Format-override plates: photo painted onto cracked stone, clipped to the image.
 * Figure is shrink-wrapped (below), so the stone plate matches photo bounds only.
 *
 * Technique: cracked slab is the figure background; the img multiplies onto it.
 * corner-crack is a full-bleed multiply wash on top for extra grain.
 */
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="stone-tablet"]
  .listen-spread-page--image-side
  .listen-page-image {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate;
  background-color: #9a9286 !important;
  background-image: var(--listen-skin-stone-photo-cracked) !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="stone-tablet"]
  .listen-spread-page--image-side
  .listen-page-image
  img {
  position: relative;
  z-index: 1;
  /* Print the photo into the cracked stone plate. */
  mix-blend-mode: multiply !important;
  opacity: 0.92;
}

/* Extra crack grain from stone-tablet-corner-crack, stretched to the photo only. */
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="stone-tablet"]
  .listen-spread-page--image-side
  .listen-page-image::before {
  content: none !important;
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="stone-tablet"]
  .listen-spread-page--image-side
  .listen-page-image::after {
  content: "" !important;
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  width: auto !important;
  height: auto !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
  background: var(--listen-skin-stone-corner-crack) center / cover no-repeat;
  mix-blend-mode: multiply;
  opacity: 0.48;
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="stone-tablet"][data-reader-decoration="off"]
  .listen-spread-page--image-side
  .listen-page-image {
  background-image: none !important;
  background-color: transparent !important;
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="stone-tablet"][data-reader-decoration="off"]
  .listen-spread-page--image-side
  .listen-page-image
  img {
  mix-blend-mode: normal !important;
  opacity: 1;
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="stone-tablet"][data-reader-decoration="off"]
  .listen-spread-page--image-side
  .listen-page-image::after {
  content: none !important;
}

/*
 * Old Newspaper: newsprint grain / ink mottling clipped to the photo only
 * (page-override plates + segment companion art). Slot deco is disabled ?
 * a prior 220px centered tile read as a tiny square mid-image.
 */
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="old-newspaper"]
  .listen-page-image-slot::before,
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="old-newspaper"]
  .listen-story-image-slot::before {
  content: none !important;
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="old-newspaper"]
  .listen-spread-page--image-side
  .listen-page-image,
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="old-newspaper"]
  .listen-story-image {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="old-newspaper"]
  .listen-spread-page--image-side
  .listen-page-image::before,
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="old-newspaper"]
  .listen-story-image::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  /* Grain tiles + dingy vignette/ink wash, all clipped to photo bounds. */
  background-image:
    var(--listen-skin-img-grain),
    radial-gradient(ellipse 85% 70% at 50% 45%, transparent 35%, rgba(32, 28, 22, 0.28) 100%),
    linear-gradient(180deg, rgba(40, 36, 30, 0.14) 0%, transparent 28%, transparent 72%, rgba(28, 24, 18, 0.2) 100%);
  background-size:
    var(--listen-skin-img-grain-size, 110px 110px, 160px 160px),
    100% 100%,
    100% 100%;
  background-repeat: repeat, repeat, no-repeat, no-repeat;
  background-position: center;
  mix-blend-mode: var(--listen-skin-img-grain-blend, overlay);
  opacity: var(--listen-skin-img-grain-opacity, 0.62);
}

/* =============================================================================
 * END ? Skin-matched book image treatments ? 2026-07-21
 * ============================================================================= */

/* Folio image bow ? reassert after skin-img block so clip-path is not cleared. */
.listen-atmosphere-host[data-reader-layout="book"]:is(
  [data-reader-skin="well-worn-novel"],
  [data-reader-skin="fantasy-scroll"],

  [data-reader-skin="dark-parchment"]
)
  .listen-spread-page--current.listen-spread-page--image-side
  .listen-page-image,
.listen-atmosphere-host[data-reader-layout="book"]:is(
  [data-reader-skin="well-worn-novel"],
  [data-reader-skin="fantasy-scroll"],

  [data-reader-skin="dark-parchment"]
)
  .listen-spread-page--current.listen-spread-page--image-side
  .listen-page-image
  img {
  -webkit-clip-path: polygon(
    0% 14px,
    20% 7px,
    40% 3px,
    50% 2px,
    60% 3px,
    80% 8px,
    100% 16px,
    100% calc(100% - 16px),
    80% calc(100% - 8px),
    60% calc(100% - 3px),
    50% calc(100% - 2px),
    40% calc(100% - 3px),
    20% calc(100% - 7px),
    0% calc(100% - 14px)
  );
  clip-path: polygon(
    0% 14px,
    20% 7px,
    40% 3px,
    50% 2px,
    60% 3px,
    80% 8px,
    100% 16px,
    100% calc(100% - 16px),
    80% calc(100% - 8px),
    60% calc(100% - 3px),
    50% calc(100% - 2px),
    40% calc(100% - 3px),
    20% calc(100% - 7px),
    0% calc(100% - 14px)
  );
}

.listen-atmosphere-host[data-reader-layout="book"]:is(
  [data-reader-skin="well-worn-novel"],
  [data-reader-skin="fantasy-scroll"],

  [data-reader-skin="dark-parchment"]
)
  .listen-spread-page--companion.listen-spread-page--image-side
  .listen-page-image,
.listen-atmosphere-host[data-reader-layout="book"]:is(
  [data-reader-skin="well-worn-novel"],
  [data-reader-skin="fantasy-scroll"],

  [data-reader-skin="dark-parchment"]
)
  .listen-spread-page--companion.listen-spread-page--image-side
  .listen-page-image
  img {
  -webkit-clip-path: polygon(
    0% 16px,
    20% 8px,
    40% 3px,
    50% 2px,
    60% 3px,
    80% 7px,
    100% 14px,
    100% calc(100% - 14px),
    80% calc(100% - 7px),
    60% calc(100% - 3px),
    50% calc(100% - 2px),
    40% calc(100% - 3px),
    20% calc(100% - 8px),
    0% calc(100% - 16px)
  );
  clip-path: polygon(
    0% 16px,
    20% 8px,
    40% 3px,
    50% 2px,
    60% 3px,
    80% 7px,
    100% 14px,
    100% calc(100% - 14px),
    80% calc(100% - 7px),
    60% calc(100% - 3px),
    50% calc(100% - 2px),
    40% calc(100% - 3px),
    20% calc(100% - 8px),
    0% calc(100% - 16px)
  );
}

/* Book + Full Paragraph landscape overrides: no open-folio bow on the plate.
 * Curve reads well on full-bleed art; looks odd on a mid-page landscape print. */
.listen-atmosphere-host[data-reader-layout="book"][data-display-format="paragraph"]:is(
  [data-reader-skin="well-worn-novel"],
  [data-reader-skin="fantasy-scroll"],
  [data-reader-skin="dark-parchment"]
)
  .listen-spread-page--image-side
  .listen-page-image-slot.is-landscape
  .listen-page-image,
.listen-atmosphere-host[data-reader-layout="book"][data-display-format="paragraph"]:is(
  [data-reader-skin="well-worn-novel"],
  [data-reader-skin="fantasy-scroll"],
  [data-reader-skin="dark-parchment"]
)
  .listen-spread-page--image-side
  .listen-page-image-slot.is-landscape
  .listen-page-image
  img {
  -webkit-clip-path: none !important;
  clip-path: none !important;
}

/* Suspense jagged rip - reassert after folio bow so other skins' bow never clears it. */
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="suspense-thriller"]
  .listen-spread-page--image-side
  .listen-page-image,
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="suspense-thriller"]
  .listen-spread-page--image-side
  .listen-page-image
  img,
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="suspense-thriller"]
  .listen-story-image,
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="suspense-thriller"]
  .listen-story-image
  img {
  clip-path: var(--listen-skin-img-clip) !important;
  -webkit-clip-path: var(--listen-skin-img-clip) !important;
}

/*
 * Suspense + Stone format-overrides: never clip the FIGURE to the full slot.
 * A slot-sized clip-path + page texture in the letterbox was the tall matte
 * above/below the photo (red-box bands). Rip stays on the img only.
 */
.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="suspense-thriller"]
  .listen-spread-page--image-side
  .listen-page-image {
  clip-path: none !important;
  -webkit-clip-path: none !important;
}

.listen-atmosphere-host[data-reader-layout="book"][data-reader-skin="suspense-thriller"]
  .listen-spread-page--image-side
  .listen-page-image
  img {
  clip-path: var(--listen-skin-img-clip) !important;
  -webkit-clip-path: var(--listen-skin-img-clip) !important;
}

/*
 * Side-page image leaf padding (Well-Worn + folio skins + stone).
 * Portrait rules use max-width:none so height-fill can spill past left/right
 * insets and look flush on the outer edge ? keep plates inside the leaf.
 */
.listen-atmosphere-host[data-reader-layout="book"]:is(
  [data-reader-skin="well-worn-novel"],
  [data-reader-skin="academic"],
  [data-reader-skin="suspense-thriller"],
  [data-reader-skin="dark-parchment"],
  [data-reader-skin="stone-tablet"],
  [data-reader-skin="romance"],
  [data-reader-skin="sci-fi"]
)
  .listen-spread-page--image-side
  .listen-page-image.is-portrait
  img,
.listen-atmosphere-host[data-reader-layout="book"]:is(
  [data-reader-skin="well-worn-novel"],
  [data-reader-skin="academic"],
  [data-reader-skin="suspense-thriller"],
  [data-reader-skin="dark-parchment"],
  [data-reader-skin="stone-tablet"],
  [data-reader-skin="romance"],
  [data-reader-skin="sci-fi"]
)
  .listen-spread-page--image-side
  .listen-page-image-slot.is-portrait
  img {
  max-width: 100% !important;
}

.listen-atmosphere-host[data-reader-layout="book"]:is(
  [data-reader-skin="well-worn-novel"],
  [data-reader-skin="academic"],
  [data-reader-skin="suspense-thriller"],
  [data-reader-skin="dark-parchment"],
  [data-reader-skin="stone-tablet"]
)
  .listen-spread-page--current.listen-spread-page--image-side
  .listen-page-image-slot,
.listen-atmosphere-host[data-reader-layout="book"]:is(
  [data-reader-skin="well-worn-novel"],
  [data-reader-skin="academic"],
  [data-reader-skin="suspense-thriller"],
  [data-reader-skin="dark-parchment"],
  [data-reader-skin="stone-tablet"]
)
  .listen-spread-page--current.listen-spread-page--image-side
  #listen-left-page-image-slot {
  top: var(--listen-folio-curl-height, 22px) !important;
  bottom: var(--listen-folio-curl-height, 22px) !important;
  left: calc(var(--listen-folio-curl-width, 18px) + 1.75rem) !important;
  right: 1.75rem !important;
}

.listen-atmosphere-host[data-reader-layout="book"]:is(
  [data-reader-skin="well-worn-novel"],
  [data-reader-skin="academic"],
  [data-reader-skin="suspense-thriller"],
  [data-reader-skin="dark-parchment"],
  [data-reader-skin="stone-tablet"]
)
  .listen-spread-page--companion.listen-spread-page--image-side
  .listen-page-image-slot,
.listen-atmosphere-host[data-reader-layout="book"]:is(
  [data-reader-skin="well-worn-novel"],
  [data-reader-skin="academic"],
  [data-reader-skin="suspense-thriller"],
  [data-reader-skin="dark-parchment"],
  [data-reader-skin="stone-tablet"]
)
  .listen-spread-page--companion.listen-spread-page--image-side
  #listen-right-page-image-slot {
  top: var(--listen-folio-curl-height, 22px) !important;
  bottom: var(--listen-folio-curl-height, 22px) !important;
  right: calc(var(--listen-folio-curl-width, 18px) + 1.75rem) !important;
  left: 1.75rem !important;
}

/* Full Paragraph landscape overrides: beat the 1.75rem !important leaf padding above
 * so plates match Sci-Fi / Alone Time width (still clear side-page stacks). */
.listen-atmosphere-host[data-reader-layout="book"][data-display-format="paragraph"]:is(
  [data-reader-skin="well-worn-novel"],
  [data-reader-skin="academic"],
  [data-reader-skin="suspense-thriller"],
  [data-reader-skin="dark-parchment"],
  [data-reader-skin="stone-tablet"]
)
  .listen-spread-page--current.listen-spread-page--image-side
  .listen-page-image-slot.is-landscape,
.listen-atmosphere-host[data-reader-layout="book"][data-display-format="paragraph"]:is(
  [data-reader-skin="well-worn-novel"],
  [data-reader-skin="academic"],
  [data-reader-skin="suspense-thriller"],
  [data-reader-skin="dark-parchment"],
  [data-reader-skin="stone-tablet"]
)
  .listen-spread-page--current.listen-spread-page--image-side
  #listen-left-page-image-slot.is-landscape {
  left: calc(var(--listen-folio-curl-width, 18px) + 0.5rem) !important;
  right: 0.5rem !important;
}

.listen-atmosphere-host[data-reader-layout="book"][data-display-format="paragraph"]:is(
  [data-reader-skin="well-worn-novel"],
  [data-reader-skin="academic"],
  [data-reader-skin="suspense-thriller"],
  [data-reader-skin="dark-parchment"],
  [data-reader-skin="stone-tablet"]
)
  .listen-spread-page--companion.listen-spread-page--image-side
  .listen-page-image-slot.is-landscape,
.listen-atmosphere-host[data-reader-layout="book"][data-display-format="paragraph"]:is(
  [data-reader-skin="well-worn-novel"],
  [data-reader-skin="academic"],
  [data-reader-skin="suspense-thriller"],
  [data-reader-skin="dark-parchment"],
  [data-reader-skin="stone-tablet"]
)
  .listen-spread-page--companion.listen-spread-page--image-side
  #listen-right-page-image-slot.is-landscape {
  right: calc(var(--listen-folio-curl-width, 18px) + 0.5rem) !important;
  left: 0.5rem !important;
}

/* ?? Performance mode (TV display + remote) ?? */
.listen-performance-btn svg {
  width: 1.15rem;
  height: 1.15rem;
}

.app-performance-mode-panel {
  max-width: 28rem;
}

.performance-join-code-label {
  margin: 0.75rem 0 0.25rem;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.7rem;
}

.performance-join-code {
  margin: 0 0 1rem;
  text-align: center;
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: 0.35em;
  font-variant-numeric: tabular-nums;
}

.performance-url-field input {
  width: 100%;
  font-size: 0.8rem;
}

.performance-modal-actions {
  flex-wrap: wrap;
  gap: 0.5rem;
}

.performance-session-status {
  margin: 0.75rem 0 0;
}

.performance-remote-pad {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid color-mix(in srgb, currentColor 18%, transparent);
}

.performance-remote-hud {
  text-align: center;
  margin: 0 0 0.75rem;
}

.performance-remote-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  justify-content: center;
  align-items: center;
}

.performance-remote-row .primary {
  min-width: 5.5rem;
}

body.performance-display-active .app-sidebar,
body.performance-display-active .wizard-nav,
body.performance-display-active .listen-hero-actions,
body.performance-display-active #btn-performance-mode,
body.performance-display-active #catalog-curator-cache-panel,
body.performance-display-active .catalog-curator-cache-panel {
  display: none !important;
}

body.performance-display-active #step-7 .listen-toolbar {
  opacity: 0.92;
}

body.performance-controller-active #btn-performance-mode {
  outline: 2px solid color-mix(in srgb, #5b8def 70%, transparent);
  outline-offset: 2px;
}

.performance-tv-hint {
  margin: 0.5rem 0 0;
  line-height: 1.35;
}

.performance-tap-to-start {
  position: fixed;
  inset: 0;
  z-index: 10050;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10, 8, 6, 0.72);
  padding: 1.5rem;
}

.performance-tap-to-start[hidden] {
  display: none !important;
}

.performance-tap-to-start-btn {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  align-items: center;
  max-width: 22rem;
  width: 100%;
  padding: 1.5rem 1.25rem;
  border: 0;
  border-radius: 1rem;
  background: #c4a46a;
  color: #1a1510;
  font: inherit;
  cursor: pointer;
  text-align: center;
}

.performance-tap-to-start-btn strong {
  font-size: 1.5rem;
}

.performance-tap-to-start-btn span {
  font-size: 1rem;
  opacity: 0.9;
  line-height: 1.35;
}

/* Optional product feedback (coming-soon poll + story rating) */
.product-feedback-card {
  margin: 0 0 1rem;
}
.product-feedback-card-inner,
.product-feedback-sheet-panel {
  border: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
  border-radius: 0.85rem;
  background: color-mix(in srgb, var(--panel) 92%, var(--accent) 8%);
  padding: 0.9rem 1rem 1rem;
  box-shadow: 0 1px 2px color-mix(in srgb, #000000 12%, transparent);
}
.product-feedback-kicker {
  margin: 0 0 0.35rem;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.7;
}
.product-feedback-prompt {
  margin: 0 0 0.75rem;
  font-size: 0.95rem;
  line-height: 1.4;
}
.product-feedback-count {
  margin: -0.35rem 0 0.75rem;
  font-size: 0.82rem;
}
.product-feedback-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}
.product-feedback-actions--start {
  justify-content: flex-start;
  flex-wrap: wrap;
}
.app-modal-coming-soon-vote .app-modal-panel {
  width: min(56rem, 96vw);
  height: min(92vh, 52rem);
  max-height: min(92vh, 52rem);
}
.app-modal-coming-soon-vote .library-modal-header {
  margin-bottom: 0.45rem;
}
.app-modal-coming-soon-vote .library-modal-intro {
  font-size: 0.9rem;
}
.app-modal-coming-soon-vote .library-modal-toolbar {
  padding-bottom: 0.55rem;
  gap: 0.5rem;
}
.app-modal-coming-soon-vote .library-modal-status {
  margin: 0;
  flex: 0 0 auto;
}
.app-modal-coming-soon-vote .coming-soon-vote-shelf {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(8.75rem, 1fr));
  gap: 0.95rem 0.85rem;
  align-content: start;
  justify-items: stretch;
  flex: 1 1 0;
  min-height: 0;
  margin: 0.35rem 0 0.25rem;
  padding: 0.15rem 0.25rem 0.75rem;
  overflow-x: hidden;
  overflow-y: auto;
}
.coming-soon-vote-tile {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  border-radius: 0.55rem;
  min-width: 0;
  width: 100%;
}
.coming-soon-vote-tile:hover .coming-soon-vote-cover,
.coming-soon-vote-tile:focus-visible .coming-soon-vote-cover {
  outline: 2px solid color-mix(in srgb, var(--accent) 70%, transparent);
  outline-offset: 2px;
}
.coming-soon-vote-cover {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 2 / 3;
  height: auto;
  flex: 0 0 auto;
  border-radius: 0.45rem;
  overflow: hidden;
  background: color-mix(in srgb, var(--panel) 70%, #888 30%);
  box-shadow: 0 1px 3px color-mix(in srgb, #000000 18%, transparent);
}
.coming-soon-vote-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.coming-soon-vote-cover-placeholder {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  opacity: 0.72;
}
.coming-soon-vote-title {
  font-size: 0.82rem;
  line-height: 1.25;
  font-weight: 600;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.coming-soon-vote-meta {
  font-size: 0.72rem;
  line-height: 1.2;
  opacity: 0.68;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.coming-soon-vote-thanks {
  display: grid;
  place-items: center;
  text-align: center;
  gap: 0.65rem;
  flex: 1 1 auto;
  min-height: 12rem;
  padding: 1.5rem 1rem 2rem;
}
.coming-soon-vote-thanks[hidden] {
  display: none !important;
}
.coming-soon-vote-thanks-kicker {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 650;
  letter-spacing: 0.01em;
}
.coming-soon-vote-thanks-message {
  margin: 0;
  max-width: 28rem;
  font-size: 0.98rem;
  line-height: 1.45;
  opacity: 0.88;
}
.app-modal-coming-soon-vote.is-thanks .library-modal-header {
  text-align: center;
}
.coming-soon-vote-request {
  flex: 0 0 auto;
  margin: 0.35rem 0 0;
  padding: 0.65rem 0 0.15rem;
  border-top: 1px solid color-mix(in srgb, currentColor 16%, transparent);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.35rem 0.55rem;
  align-items: center;
}
.coming-soon-vote-request > .meta:first-child {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.35;
}
.coming-soon-vote-request-label {
  display: block;
  min-width: 0;
}
.coming-soon-vote-request-label input {
  width: 100%;
  border-radius: 0.45rem;
  border: 1px solid color-mix(in srgb, currentColor 22%, transparent);
  background: color-mix(in srgb, #000000 18%, transparent);
  color: inherit;
  padding: 0.45rem 0.65rem;
  font: inherit;
}
.coming-soon-vote-request-error {
  grid-column: 1 / -1;
  color: #e8a0a0;
  margin: 0;
}
.coming-soon-vote-request-submit,
#coming-soon-vote-request-submit {
  justify-self: start;
  white-space: nowrap;
}
.app-modal-coming-soon-vote .app-modal-footer {
  flex: 0 0 auto;
  margin-top: 0.35rem;
  padding-top: 0.45rem;
}
@media (max-width: 640px) {
  .app-modal-coming-soon-vote .coming-soon-vote-shelf {
    grid-template-columns: repeat(auto-fill, minmax(7.25rem, 1fr));
    gap: 0.75rem 0.55rem;
  }
  .coming-soon-vote-request {
    grid-template-columns: 1fr;
  }
}

.product-feedback-sheet {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 1rem;
}
.product-feedback-sheet[hidden] {
  display: none !important;
}
.product-feedback-sheet-backdrop {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, #000000 42%, transparent);
}
.product-feedback-sheet-panel {
  position: relative;
  width: min(28rem, 100%);
  margin: 0;
}
.product-feedback-stars {
  display: flex;
  gap: 0.35rem;
  justify-content: center;
  margin: 0.25rem 0 0.85rem;
}
.product-feedback-star {
  border: 0;
  background: transparent;
  color: color-mix(in srgb, currentColor 35%, transparent);
  font-size: 1.85rem;
  line-height: 1;
  cursor: pointer;
  padding: 0.1rem 0.15rem;
}
.product-feedback-star.is-hot,
.product-feedback-star:hover,
.product-feedback-star:focus-visible {
  color: #e0b15a;
}
.product-feedback-star.is-selected {
  color: #e0b15a;
}
.product-feedback-comment-label {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin: 0.15rem 0 0.35rem;
  text-align: left;
  font-size: 0.9rem;
}
.product-feedback-comment {
  width: 100%;
  min-height: 4.5rem;
  resize: vertical;
  border-radius: 0.45rem;
  border: 1px solid color-mix(in srgb, currentColor 22%, transparent);
  background: color-mix(in srgb, #000000 18%, transparent);
  color: inherit;
  padding: 0.55rem 0.65rem;
  font: inherit;
}
.product-feedback-comment-hint,
.product-feedback-comment-error {
  margin: 0 0 0.45rem;
  text-align: left;
}
.product-feedback-comment-error {
  color: #e8a0a0;
}
.product-feedback-notify {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  margin: 0 0 1rem;
}
.product-feedback-notify[hidden] {
  display: none !important;
}
.product-feedback-notify-card {
  border: 1px solid color-mix(in srgb, currentColor 16%, transparent);
  border-radius: 0.75rem;
  padding: 0.85rem 1rem;
  background: color-mix(in srgb, #1a3a2a 35%, transparent);
}
.metrics-feedback-reviews {
  margin-top: 1rem;
}