/* Odeia public site. Broadsheet tokens (packages/ui-tokens/global.css): cream page, ink text, cyan for
   everything tappable, magenta for AI only, press yellow for covers only. Source Serif 4, self-hosted.
   No inline styles anywhere (the Content-Security-Policy forbids them): widths come from the pct-*
   classes the build appends, and JS sets sizes through the CSSOM. */

@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/source-serif-4-latin-400-normal.02194deb92.woff2) format('woff2');
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC,
    U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/source-serif-4-latin-600-normal.f2b7e1cf1d.woff2) format('woff2');
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC,
    U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/source-serif-4-latin-400-italic.882b7c150c.woff2) format('woff2');
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC,
    U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/source-serif-4-cyrillic-400-normal.4899e71407.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/source-serif-4-cyrillic-600-normal.881a5cd61b.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/source-serif-4-cyrillic-400-italic.18148c0920.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

:root {
  --bg: #f8f3ea; /* book page */
  --fg: #201e1d; /* ink */
  --card: #ece4d6; /* neutral-200 */
  --muted: #605d5d; /* neutral-700 */
  --line: #ddd5c7; /* neutral-300 */
  --tap: #006786; /* cyan-700: everything tappable */
  --tap-on: #f8f3ea;
  --tap-soft: #e9f8ff; /* cyan-100 */
  --tap-ink: #004961; /* cyan-800 */
  --ai: #d6006c; /* magenta: AI only (icons, the mark) */
  --ai-text: #aa0b56; /* magenta-700: AI text at small sizes (contrast) */
  --ai-soft: #fff1f4; /* magenta-100 */
  --ai-ink: #790e3d; /* magenta-800 */
  --cover: #edbb00; /* press yellow: covers only */
  --cover-ink: #201e1d;
  --mark-outer: #0088b0;
  --band-bg: #201e1d;
  --band-fg: #f8f3ea;
  --band-muted: #bab6b6; /* neutral-400 */
  --band-card: #2d2b2b; /* neutral-900 */
  --band-tap: #62c5ee; /* cyan-400 */
  --phone: #201e1d;
  --shadow: rgb(32 30 29 / 0.45);

  --serif: 'Source Serif 4', 'Source Serif Pro', Georgia, 'Times New Roman', serif;
  --r: 4px;
  --step--1: 0.8125rem;
  --step-0: 1rem;
  --step-1: 1.1875rem;
  --step-2: 1.5rem;
  --step-3: clamp(1.75rem, 1.2rem + 2.2vw, 2.625rem);
  --step-4: clamp(2.375rem, 1.3rem + 4.6vw, 4.75rem);
  --gutter: 16px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --bg: #201e1d;
    --fg: #f8f3ea;
    --card: #2d2b2b;
    --muted: #bab6b6;
    --line: #444141;
    --tap: #62c5ee;
    --tap-on: #201e1d;
    --tap-soft: #0a303e;
    --tap-ink: #cbeeff;
    --ai: #ff458e;
    --ai-text: #ff90b1;
    --ai-soft: #4b1528;
    --ai-ink: #ffdee6;
    --mark-outer: #62c5ee;
    --band-bg: #2d2b2b;
    --band-fg: #f8f3ea;
    --band-muted: #bab6b6;
    --band-card: #201e1d;
    --phone: #444141;
    --shadow: rgb(0 0 0 / 0.6);
    color-scheme: dark;
  }
}
:root[data-theme='dark'] {
  --bg: #201e1d;
  --fg: #f8f3ea;
  --card: #2d2b2b;
  --muted: #bab6b6;
  --line: #444141;
  --tap: #62c5ee;
  --tap-on: #201e1d;
  --tap-soft: #0a303e;
  --tap-ink: #cbeeff;
  --ai: #ff458e;
  --ai-text: #ff90b1;
  --ai-soft: #4b1528;
  --ai-ink: #ffdee6;
  --mark-outer: #62c5ee;
  --band-bg: #2d2b2b;
  --band-fg: #f8f3ea;
  --band-muted: #bab6b6;
  --band-card: #201e1d;
  --phone: #444141;
  --shadow: rgb(0 0 0 / 0.6);
  color-scheme: dark;
}
@media (min-width: 720px) {
  :root {
    --gutter: 32px;
  }
}

/* Base */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: 80px;
}
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--serif);
  font-size: var(--step-0);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
  transition:
    background-color 0.35s ease,
    color 0.35s ease;
}
a {
  color: var(--tap);
  text-underline-offset: 3px;
}
button {
  font: inherit;
  color: inherit;
}
h1,
h2,
h3 {
  text-wrap: balance;
  margin: 0;
  font-weight: 600;
}
p,
ul,
figure,
fieldset {
  margin: 0;
}
ul {
  padding: 0;
  list-style: none;
}
img,
svg {
  display: block;
}
:focus-visible {
  outline: 2px solid var(--tap);
  outline-offset: 3px;
  border-radius: 2px;
}
.band :focus-visible {
  outline-color: var(--band-tap);
}
main:focus {
  outline: none;
}
.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}
.ic {
  width: 1em;
  height: 1em;
  flex: none;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.skip {
  position: absolute;
  left: var(--gutter);
  top: -100px;
  z-index: 20;
  background: var(--fg);
  color: var(--bg);
  padding: 10px 16px;
  border-radius: var(--r);
  font-weight: 600;
  text-decoration: none;
}
.skip:focus {
  top: 12px;
}
.no-js .js-only {
  display: none !important;
}
.small {
  font-size: var(--step--1);
}

.wrap {
  max-width: 1160px;
  margin: 0 auto;
  padding-left: max(var(--gutter), env(safe-area-inset-left, 0px));
  padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
}

/* Motion shared by the demos */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
}
@keyframes bump {
  40% {
    transform: scale(1.06);
  }
}
@keyframes blink {
  50% {
    opacity: 0;
  }
}
@keyframes wv {
  50% {
    transform: scaleY(0.35);
  }
}
@keyframes draw {
  from {
    stroke-dashoffset: 1;
  }
}
@keyframes pulse {
  50% {
    opacity: 0.3;
  }
}
@keyframes dot {
  50% {
    opacity: 0.25;
    transform: translateY(-2px);
  }
}
@keyframes opened {
  0% {
    background: var(--tap-soft);
  }
}
@keyframes spin {
  from {
    transform: rotate(-90deg) scale(0.6);
    opacity: 0;
  }
}
.fade-in {
  animation: fadeIn 0.4s both;
}
.bump {
  animation: bump 0.5s;
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
  .pause-btn {
    display: none !important;
  }
}

/* The mark: three rows of the odeion and the stage */
.m-outer {
  stroke: var(--mark-outer);
}
.m-ink {
  stroke: currentColor;
}
.m-ai {
  stroke: var(--ai);
}

/* Header */
.top {
  position: sticky;
  top: 0;
  z-index: 10;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding-top: env(safe-area-inset-top, 0px);
}
.top > .wrap {
  display: flex;
  align-items: center;
  gap: 20px;
  min-height: 62px;
  position: relative;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: var(--fg);
  flex: none;
  min-height: 44px;
}
.brand .mark {
  width: 34px;
  height: 34px;
}
.wordmark {
  height: 17px;
  width: auto;
  aspect-ratio: 3447 / 841;
}
.nav ul {
  display: flex;
  gap: 22px;
}
.nav a {
  color: var(--fg);
  text-decoration: none;
  font-size: 0.9375rem;
  white-space: nowrap;
  display: inline-block;
  padding-block: 10px;
}
.nav a:hover {
  color: var(--tap);
  text-decoration: underline;
}
.top-right {
  margin-left: auto;
  display: flex;
  gap: 8px;
  align-items: center;
  flex: none;
}
.lang {
  display: inline-flex;
  align-items: center;
  height: 36px;
  background: var(--card);
  border-radius: 999px;
  padding: 3px;
}
.lang a {
  display: inline-grid;
  place-items: center;
  font-size: 0.8125rem;
  line-height: 1;
  height: 30px;
  min-width: 36px;
  padding: 0 10px;
  border-radius: 999px;
  color: var(--muted);
  text-decoration: none;
}
.lang a:hover {
  color: var(--fg);
}
.lang a[aria-current] {
  background: var(--bg);
  color: var(--fg);
  font-weight: 600;
}
.icon-btn {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex: none;
  border: 0;
  background: var(--card);
  color: var(--fg);
  border-radius: 999px;
  padding: 0;
  cursor: pointer;
  transition: background 0.2s;
}
.icon-btn:hover {
  background: var(--line);
}
.icon-btn .ic {
  width: 18px;
  height: 18px;
}
.icon-btn .spin {
  animation: spin 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.menu-btn .i-shut,
.menu-btn[aria-expanded='true'] .i-open {
  display: none;
}
.menu-btn[aria-expanded='true'] .i-shut {
  display: block;
}

/* Below 1100px the sections menu folds behind the menu button (or wraps under the bar without JS). */
@media (max-width: 1099.98px) {
  .no-js .top > .wrap {
    flex-wrap: wrap;
  }
  .no-js .nav {
    order: 3;
    width: 100%;
    overflow-x: auto;
  }
  .no-js .nav ul {
    gap: 16px;
    padding-bottom: 6px;
  }
  .js .nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--bg);
    box-shadow: 0 12px 24px -16px var(--shadow);
    border-top: 1px solid var(--line);
  }
  .js .nav.is-open {
    display: block;
  }
  .js .nav ul {
    flex-direction: column;
    gap: 0;
    padding: 8px max(var(--gutter), env(safe-area-inset-left, 0px)) 16px;
    max-height: calc(100dvh - 70px);
    overflow-y: auto;
  }
  .js .nav a {
    display: block;
    padding: 12px 0;
    font-size: 1.0625rem;
  }
}
@media (min-width: 1100px) {
  .menu-btn {
    display: none !important;
  }
  /* The menu sits in the middle of the space between the logo and the buttons (owner). */
  .nav {
    flex: 1;
  }
  .nav ul {
    justify-content: center;
  }
  /* The menu's text on the wordmark's baseline (its letters are taller, so centring the boxes left
     the text about 3 px high; owner). */
  .nav a {
    padding-block: 13px 7px;
  }
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border-radius: 999px;
  padding: 11px 20px;
  min-height: 48px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  border: 0;
  transition: transform 0.15s;
  line-height: 1.2;
}
.btn:active {
  transform: scale(0.97);
}
.btn-tap {
  background: var(--tap);
  color: var(--tap-on);
}
.btn-ink {
  background: var(--fg);
  color: var(--bg);
}
.btn-ghost {
  background: var(--card);
  color: var(--fg);
}
.btn-small {
  padding: 8px 16px;
  min-height: 40px;
  font-size: 0.875rem;
}
.store {
  padding: 9px 20px 9px 16px;
}
.store .ic {
  width: 22px;
  height: 22px;
}
.store > span {
  display: flex;
  flex-direction: column;
  text-align: left;
}
.store small {
  font-weight: 400;
  font-size: 0.6875rem;
  opacity: 0.85;
}
.store.is-soon {
  background: transparent;
  color: var(--fg);
  box-shadow: inset 0 0 0 1.5px var(--line);
  cursor: default;
}
.store.is-soon:active {
  transform: none;
}

.try {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  font-size: 0.8125rem;
  color: var(--muted);
}
.try .ic {
  width: 14px;
  height: 14px;
  color: var(--tap);
}
.pause-btn {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex: none;
  border: 0;
  border-radius: 999px;
  background: var(--bg);
  color: var(--fg);
  cursor: pointer;
  padding: 0;
  box-shadow: inset 0 0 0 1px var(--line);
}
.pause-btn .ic {
  width: 12px;
  height: 12px;
}
.pause-btn:hover {
  box-shadow: inset 0 0 0 1.5px var(--tap);
}
.band .pause-btn {
  background: var(--band-bg);
  color: var(--band-fg);
  box-shadow: inset 0 0 0 1px var(--band-muted);
}

/* Hero */
.hero > .wrap {
  display: grid;
  gap: 40px;
  padding-block: 32px 64px;
  align-items: center;
}
@media (min-width: 960px) {
  .hero > .wrap {
    grid-template-columns: 1.05fr 1fr;
    padding-block: 64px 96px;
    gap: 48px;
  }
}
.eyebrow {
  font-size: var(--step--1);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
}
.hero h1 {
  font-size: var(--step-4);
  line-height: 1.04;
  letter-spacing: -0.02em;
  margin-top: 18px;
}
.hero h1 em {
  font-style: italic;
  font-weight: 400;
  display: block;
  color: var(--tap);
}
.hero .sub {
  font-size: var(--step-1);
  max-width: 34ch;
  margin-top: 22px;
}
.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
  align-items: center;
}
.note {
  font-size: var(--step--1);
  color: var(--muted);
}

/* Phones */
.stage {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  min-width: 0;
}
.phones {
  position: relative;
  width: min(100%, 520px);
  height: 560px;
}
.phone {
  position: absolute;
  width: 258px;
  height: 532px;
  border-radius: 38px;
  padding: 9px;
  background: var(--phone);
  box-shadow: 0 30px 60px -30px var(--shadow);
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.phone .screen {
  background: var(--bg);
  border-radius: 30px;
  height: 100%;
  overflow: hidden;
  padding: 30px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
}
.phone .screen::before {
  content: '';
  position: absolute;
  top: 9px;
  left: 50%;
  transform: translateX(-50%);
  width: 76px;
  height: 20px;
  border-radius: 999px;
  background: var(--phone);
}
.p-left {
  left: 0;
  top: 24px;
  transform: translate(calc(var(--mx, 0) * -16px), calc(var(--my, 0) * -10px)) rotate(-3deg);
}
.p-right {
  right: 0;
  top: 0;
  transform: translate(calc(var(--mx, 0) * 16px), calc(var(--my, 0) * 10px)) rotate(2.5deg);
}
@media (max-width: 560px) {
  .phones {
    height: 470px;
  }
  .phone {
    width: min(56vw, 220px);
    height: 450px;
    border-radius: 32px;
  }
  .phone .screen {
    border-radius: 25px;
    padding: 28px 12px 14px;
    gap: 10px;
  }
  .p-left {
    left: -2px;
  }
  .p-right {
    right: -2px;
  }
  .reader {
    font-size: 0.75rem;
  }
  .cover b {
    font-size: 1.25rem;
  }
}
@media (max-width: 360px) {
  .phones {
    height: 430px;
  }
  .phone {
    height: 410px;
  }
  .p-left .cover {
    aspect-ratio: 4 / 3;
  }
}
.mini {
  font-size: 0.6875rem;
  color: var(--muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 600;
}
.cover {
  aspect-ratio: 1 / 1;
  border-radius: var(--r);
  background: var(--cover);
  color: var(--cover-ink);
  padding: 14px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.cover b {
  font-size: 1.5rem;
  line-height: 1.05;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.cover i {
  font-size: 0.75rem;
  font-style: normal;
}
.track-title {
  font-weight: 600;
  font-size: 0.9375rem;
}
.who {
  font-size: 0.8125rem;
  color: var(--muted);
}
.who.small {
  font-size: 0.75rem;
}
.track {
  height: 4px;
  background: var(--line);
  border-radius: 999px;
  overflow: hidden;
}
.track > i {
  display: block;
  height: 100%;
  background: var(--tap);
  border-radius: 999px;
  transition: width 0.32s linear;
}
.times {
  display: flex;
  justify-content: space-between;
  font-size: 0.6875rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.controls {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 28px;
}
.ctl .ic {
  width: 22px;
  height: 22px;
  color: var(--fg);
}
.play {
  width: 54px;
  height: 54px;
  border-radius: 999px;
  background: var(--tap);
  color: var(--tap-on);
  display: grid;
  place-items: center;
  border: 0;
  cursor: pointer;
  transition: transform 0.15s;
  padding: 0;
}
.play:active {
  transform: scale(0.92);
}
.play .ic {
  width: 22px;
  height: 22px;
}
.chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.chip {
  font-size: 0.6875rem;
  padding: 4px 9px;
  border-radius: 999px;
  background: var(--card);
  color: var(--fg);
  white-space: nowrap;
  display: inline-flex;
  gap: 4px;
  align-items: center;
  line-height: 1.3;
}
.chip.tap {
  background: var(--tap-soft);
  color: var(--tap-ink);
}
.chip .ic {
  width: 11px;
  height: 11px;
}
.player-chips {
  justify-content: center;
}
.reader {
  font-size: 0.8125rem;
  line-height: 1.6;
}
.reader .r-title {
  margin: 0 0 6px;
  font-size: 1rem;
  font-weight: 600;
}
.reader p + p {
  margin-top: 9px;
}
.sent {
  display: inline;
  padding: 0;
  margin: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  border-radius: 2px;
  transition:
    background 0.35s,
    color 0.35s;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.sent:hover {
  text-decoration: underline;
  text-decoration-color: var(--line);
  text-underline-offset: 3px;
}
.sent.on {
  background: var(--tap-soft);
  color: var(--tap-ink);
}
.sync-pill {
  margin-top: auto;
  align-self: center;
  background: var(--fg);
  color: var(--bg);
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 0.75rem;
  display: inline-flex;
  gap: 8px;
  align-items: center;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.sync-pill .ic {
  width: 14px;
  height: 14px;
}

/* Strip */
.strip {
  padding-block: 8px 24px;
}
.strip ul {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  justify-content: center;
}
.strip li {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 0.9375rem;
  color: var(--muted);
}
.strip .ic {
  width: 18px;
  height: 18px;
  color: var(--fg);
}
.strip .ic.ai {
  color: var(--ai);
}

/* Feature sections */
.feature > .wrap {
  display: grid;
  gap: 36px;
  padding-block: 64px;
  align-items: center;
}
@media (min-width: 900px) {
  .feature > .wrap {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 72px;
    padding-block: 104px;
  }
  .feature.flip .copy {
    order: 2;
  }
}
.copy {
  min-width: 0;
}
.kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--step--1);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--tap);
}
.kicker .ic {
  width: 16px;
  height: 16px;
}
.kicker.ai {
  color: var(--ai-text);
}
.kicker.ai .ic {
  color: var(--ai);
}
.feature h2 {
  font-size: var(--step-3);
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin-top: 14px;
}
.feature .body {
  margin-top: 18px;
  font-size: var(--step-1);
  max-width: 40ch;
  line-height: 1.5;
}
.points {
  margin-top: 30px;
  display: grid;
  gap: 16px;
}
@media (min-width: 560px) {
  .points.two {
    grid-template-columns: 1fr 1fr;
    gap: 20px 28px;
  }
}
.points li {
  min-width: 0;
}
.points b {
  display: block;
  font-weight: 600;
}
.points span {
  color: var(--muted);
  font-size: 0.9375rem;
}

.panel {
  background: var(--card);
  border-radius: 8px;
  padding: 18px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
@media (min-width: 560px) {
  .panel {
    padding: 30px;
  }
}
.panel-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 4px 12px;
  flex-wrap: wrap;
}
.panel-head b {
  font-size: 1.0625rem;
  font-weight: 600;
}
.panel-head span {
  font-size: 0.8125rem;
  color: var(--muted);
}
.sheet {
  background: var(--bg);
  border-radius: var(--r);
  padding: 16px;
  min-width: 0;
}
.row {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.row > div {
  min-width: 0;
}
.av {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  flex: none;
  display: grid;
  place-items: center;
  font-size: 0.75rem;
  font-weight: 600;
  background: var(--tap-soft);
  color: var(--tap-ink);
}
.said {
  font-size: 0.9375rem;
  margin-top: 2px;
}
.ch-title {
  font-weight: 600;
  font-size: 0.9375rem;
  display: flex;
  justify-content: space-between;
  gap: 4px 8px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.ch-title small {
  font-weight: 400;
  color: var(--muted);
  font-size: 0.8125rem;
  display: inline-flex;
  gap: 5px;
  align-items: center;
}
.ch-title small .ic {
  width: 13px;
  height: 13px;
}

/* 1. Listen/read switcher */
.switcher {
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: var(--bg);
  border-radius: var(--r);
  padding: 16px;
}
.switcher-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
.seg {
  display: inline-flex;
  background: var(--card);
  border-radius: 999px;
  padding: 3px;
}
.seg button {
  font-size: 0.875rem;
  border: 0;
  background: transparent;
  color: var(--muted);
  padding: 7px 14px;
  min-height: 36px;
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex;
  gap: 6px;
  align-items: center;
  transition:
    background 0.25s,
    color 0.25s;
}
.seg button .ic {
  width: 15px;
  height: 15px;
}
.seg button[aria-pressed='true'] {
  background: var(--tap);
  color: var(--tap-on);
}
.sw-stage {
  display: grid;
  min-height: 92px;
}
.sw-stage > * {
  grid-area: 1 / 1;
  align-self: center;
  transition:
    opacity 0.45s,
    transform 0.45s,
    visibility 0.45s;
  min-width: 0;
}
.switcher[data-mode='listen'] .sw-read,
.switcher[data-mode='read'] .sw-listen {
  opacity: 0;
  transform: translateY(10px);
  visibility: hidden;
}
.sw-wave {
  display: flex;
  gap: 3px;
  align-items: center;
  height: 56px;
}
.sw-wave i {
  flex: 1;
  max-width: 5px;
  background: var(--tap);
  border-radius: 2px;
  animation: wv 1.1s ease-in-out infinite;
}
.switcher.paused .sw-wave i,
.no-js .sw-wave i {
  animation-play-state: paused;
}
.sw-wave .h0 {
  height: 14px;
}
.sw-wave .h1 {
  height: 46px;
}
.sw-wave .h2 {
  height: 22px;
}
.sw-wave .h3 {
  height: 50px;
}
.sw-wave .h4 {
  height: 30px;
}
.sw-wave .h5 {
  height: 18px;
}
.sw-wave .h6 {
  height: 40px;
}
.sw-wave .h7 {
  height: 26px;
}
.sw-wave .h8 {
  height: 36px;
}
.sw-wave .h9 {
  height: 16px;
}
.sw-wave i:nth-child(7n + 2) {
  animation-delay: 0.12s;
}
.sw-wave i:nth-child(7n + 3) {
  animation-delay: 0.24s;
}
.sw-wave i:nth-child(7n + 4) {
  animation-delay: 0.36s;
}
.sw-wave i:nth-child(7n + 5) {
  animation-delay: 0.48s;
}
.sw-wave i:nth-child(7n + 6) {
  animation-delay: 0.6s;
}
.sw-wave i:nth-child(7n) {
  animation-delay: 0.72s;
}
.sw-read p {
  font-size: 1.0625rem;
  line-height: 1.5;
}
.sw-read mark {
  background: var(--tap-soft);
  color: var(--tap-ink);
  border-radius: 2px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.sw-pos {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  font-size: 0.8125rem;
  color: var(--muted);
  align-self: flex-start;
  font-variant-numeric: tabular-nums;
}
.sw-pos .ic {
  width: 14px;
  height: 14px;
  color: var(--tap);
}
.sw-pos b {
  color: var(--fg);
  font-weight: 600;
}
.panel > .points {
  margin-top: 6px;
}

/* 2. Spoiler shield */
.range-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--bg);
  border-radius: var(--r);
  padding: 14px 16px;
}
.range-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  font-size: 0.9375rem;
}
.range-top b {
  font-variant-numeric: tabular-nums;
  font-size: 1.125rem;
  color: var(--tap);
}
input[type='range'] {
  width: 100%;
  accent-color: var(--tap);
  margin: 6px 0;
  cursor: pointer;
  min-height: 28px;
}
.ticks {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  font-size: 0.75rem;
  color: var(--muted);
}
.ticks .try {
  font-size: 0.75rem;
  text-align: center;
}
.threads {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.thread {
  border: 1.5px dashed transparent;
  transition:
    background 0.4s,
    border-color 0.4s;
}
.thread.is-locked {
  background: transparent;
  border-color: var(--line);
}
.thread.just-opened {
  animation: opened 1s ease-out;
}
.stack {
  display: grid;
}
.stack > * {
  grid-area: 1 / 1;
  transition:
    opacity 0.4s,
    transform 0.4s,
    visibility 0.4s;
}
.ph {
  display: flex;
  flex-direction: column;
  gap: 8px;
  justify-content: center;
}
.ph i {
  display: block;
  height: 9px;
  border-radius: 999px;
  background: var(--card);
}
.ph .w92 {
  width: 92%;
}
.ph .w64 {
  width: 64%;
}
.thread:not(.is-locked) .ph {
  opacity: 0;
  visibility: hidden;
}
.thread.is-locked .real {
  opacity: 0;
  transform: translateY(6px);
  visibility: hidden;
}
.sh-count {
  font-size: 0.8125rem;
  color: var(--muted);
}

/* 3. Ask the book */
.q-chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.q-chip {
  font-size: 0.875rem;
  border: 0;
  border-radius: 999px;
  padding: 8px 13px;
  min-height: 36px;
  background: var(--bg);
  color: var(--fg);
  cursor: pointer;
  transition:
    background 0.2s,
    color 0.2s;
  text-align: left;
}
.q-chip:hover {
  background: var(--line);
}
.q-chip[aria-pressed='true'] {
  background: var(--tap);
  color: var(--tap-on);
}
.bubble-me {
  align-self: flex-end;
  background: var(--tap);
  color: var(--tap-on);
  border-radius: 18px 18px 4px 18px;
  padding: 10px 14px;
  max-width: 85%;
  font-size: 0.9375rem;
}
.bubble-ai {
  background: var(--bg);
  border-radius: 18px 18px 18px 4px;
  padding: 14px 16px;
  max-width: 96%;
  font-size: 0.9375rem;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 9.5em;
}
.ai-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ai-text);
  font-size: 0.8125rem;
  font-weight: 600;
}
.ai-label .ic {
  width: 14px;
  height: 14px;
  color: var(--ai);
}
.ai-label.locked,
.ai-label.locked .ic {
  color: var(--muted);
}
.ai-extra {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.typing::after {
  content: '▍';
  color: var(--ai);
  animation: blink 1s steps(1) infinite;
}
.dots {
  display: inline-flex;
  gap: 3px;
  margin-left: 2px;
}
.dots i {
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: var(--ai);
  animation: dot 1s infinite;
}
.dots i:nth-child(2) {
  animation-delay: 0.15s;
}
.dots i:nth-child(3) {
  animation-delay: 0.3s;
}
.quote {
  border-left: 2px solid var(--line);
  padding-left: 10px;
  font-style: italic;
  color: var(--muted);
  font-size: 0.875rem;
}
.recap {
  background: var(--ai-soft);
  color: var(--ai-ink);
  border-radius: var(--r);
  padding: 14px 16px;
  font-size: 0.875rem;
}
.recap-title {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-bottom: 4px;
}
.recap-title .ic {
  width: 13px;
  height: 13px;
  color: var(--ai);
}

/* 4. Clubs */
.live-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--tap-ink);
  background: var(--tap-soft);
  padding: 4px 10px;
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
}
.live::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--tap);
  animation: pulse 1.6s ease-in-out 3;
}
.live-row .faces {
  margin-left: auto;
}
.live-title {
  margin-top: 10px;
  font-weight: 600;
}
.chat {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 5px;
  margin-top: 12px;
  min-height: 5.6em;
  font-size: 0.8125rem;
}
.chat b {
  font-weight: 600;
  color: var(--tap-ink);
}
.poll-head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}
.poll {
  display: grid;
  gap: 8px;
  margin-top: 10px;
  margin-bottom: 10px;
}
.bar {
  position: relative;
  border: 0;
  border-radius: 999px;
  background: var(--card);
  padding: 9px 14px;
  min-height: 40px;
  font-size: 0.875rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  overflow: hidden;
  width: 100%;
  text-align: left;
  cursor: pointer;
  color: var(--fg);
}
.bar:hover {
  box-shadow: inset 0 0 0 1.5px var(--line);
}
.bar .fill {
  position: absolute;
  inset: 0 auto 0 0;
  background: var(--tap-soft);
  border-radius: 999px;
  transition: width 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.bar > span,
.bar em {
  position: relative;
  font-style: normal;
  font-variant-numeric: tabular-nums;
}
.bar[aria-pressed='true'] {
  box-shadow: inset 0 0 0 1.5px var(--tap);
}
.bar .po-me {
  color: var(--tap-ink);
  font-size: 0.75rem;
  margin-left: 6px;
}
.faces {
  display: flex;
}
.faces .av {
  border: 2px solid var(--bg);
  margin-left: -8px;
  width: 28px;
  height: 28px;
}
.faces .av:first-child {
  margin-left: 0;
}

/* 5. Discover */
.search-row {
  display: flex;
  gap: 8px;
  align-items: center;
}
.search {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bg);
  border-radius: 999px;
  padding: 12px 16px;
  font-size: 0.9375rem;
  border: 0;
  flex: 1 1 auto;
  min-width: 0;
  text-align: left;
  cursor: pointer;
  color: var(--fg);
  min-height: 48px;
}
.search:hover {
  box-shadow: inset 0 0 0 1.5px var(--line);
}
.search .ic {
  width: 18px;
  height: 18px;
  color: var(--muted);
}
.search .q {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.caret {
  display: inline-block;
  width: 1.5px;
  height: 1.1em;
  background: var(--tap);
  margin-left: 1px;
  flex: none;
  opacity: 0;
}
.typing-q .caret {
  opacity: 1;
  animation: blink 1s steps(1) infinite;
}
.search-meta {
  display: flex;
  justify-content: space-between;
  gap: 6px 10px;
  flex-wrap: wrap;
  align-items: center;
}
.results {
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: opacity 0.3s;
}
.results.dim {
  opacity: 0.35;
}
.result {
  display: flex;
  gap: 14px;
  align-items: center;
}
.result.in {
  animation: fadeIn 0.45s both;
}
.result.d1 {
  animation-delay: 0.12s;
}
.result.d2 {
  animation-delay: 0.24s;
}
.result > div {
  min-width: 0;
}
.mini-cover {
  width: 52px;
  height: 52px;
  border-radius: var(--r);
  flex: none;
  display: flex;
  align-items: flex-end;
  padding: 6px;
  font-size: 0.625rem;
  font-weight: 600;
  line-height: 1;
  overflow: hidden;
}
.mc1 {
  background: var(--tap);
  color: var(--tap-on);
}
.mc2 {
  background: var(--fg);
  color: var(--bg);
}
.mc3 {
  background: var(--cover);
  color: var(--cover-ink);
}
.result b {
  display: block;
  font-size: 0.9375rem;
  font-weight: 600;
}
.result small {
  display: block;
  color: var(--muted);
  font-size: 0.8125rem;
}
.reason {
  display: inline-flex;
  gap: 5px;
  align-items: center;
  color: var(--ai-text);
  font-size: 0.8125rem;
  margin-top: 2px;
}
.reason .ic {
  width: 12px;
  height: 12px;
  color: var(--ai);
}

/* 6. Learning quiz */
.quiz-set {
  border: 0;
  padding: 0;
  min-width: 0;
}
.quiz-q {
  font-weight: 600;
  font-size: 1rem;
  margin-top: 10px;
  padding: 0;
}
.opts {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}
.opt {
  border: 0;
  border-radius: 999px;
  padding: 9px 16px;
  min-height: 40px;
  background: var(--card);
  font-size: 0.9375rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  text-align: left;
  cursor: pointer;
  color: var(--fg);
  transition: background 0.2s;
  width: 100%;
}
.opt:hover:not([aria-disabled='true']) {
  background: var(--line);
}
.opt[aria-disabled='true'] {
  cursor: default;
}
.opt.right {
  background: var(--tap-soft);
  color: var(--tap-ink);
  font-weight: 600;
}
.opt.pop {
  animation: bump 0.45s;
}
.opt.wrong {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--line);
  color: var(--muted);
  text-decoration: line-through;
}
.progress-dots {
  display: flex;
  gap: 5px;
}
.progress-dots i {
  width: 22px;
  height: 4px;
  border-radius: 999px;
  background: var(--line);
  transition: background 0.3s;
}
.progress-dots i.on {
  background: var(--tap);
}
.parent {
  align-items: center;
}
.quiz-done {
  margin-top: 10px;
}

/* 7. Creators band */
.band {
  background: var(--band-bg);
  color: var(--band-fg);
}
.band .points span,
.band .try,
.band .note,
.band .panel-head span {
  color: var(--band-muted);
}
.band .kicker,
.band .try .ic {
  color: var(--band-tap);
}
.band .panel {
  background: var(--band-card);
}
.band .sheet {
  background: var(--band-bg);
}
.band .btn-tap {
  background: var(--band-fg);
  color: var(--band-bg);
}
.band a:not(.btn) {
  color: var(--band-tap);
}
.cast {
  display: grid;
  gap: 10px;
}
.cast button {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  min-height: 48px;
  width: 100%;
  border: 0;
  text-align: left;
  cursor: pointer;
  color: var(--band-fg);
  border-radius: var(--r);
  transition: box-shadow 0.2s;
}
.cast button:hover,
.cast button[aria-pressed='true'] {
  box-shadow: inset 0 0 0 1.5px var(--band-tap);
}
.cast .name {
  font-weight: 600;
  font-size: 0.9375rem;
  flex: 1 1 auto;
  min-width: 0;
}
.cast .voice {
  font-size: 0.8125rem;
  color: var(--band-muted);
  text-align: right;
}
.cast [aria-pressed='true'] .voice {
  color: var(--band-fg);
}
.wave {
  display: flex;
  gap: 2px;
  align-items: center;
  height: 22px;
  flex: none;
}
.wave i {
  width: 3px;
  border-radius: 2px;
  background: var(--band-tap);
}
.wave .v7 {
  height: 7px;
}
.wave .v8 {
  height: 8px;
}
.wave .v10 {
  height: 10px;
}
.wave .v11 {
  height: 11px;
}
.wave .v14 {
  height: 14px;
}
.wave .v16 {
  height: 16px;
}
.wave .v19 {
  height: 19px;
}
.cast .playing .wave i {
  animation: wv 0.7s ease-in-out 4;
}
.wave .d1 {
  animation-delay: 0.09s;
}
.wave .d2 {
  animation-delay: 0.18s;
}
.wave .d3 {
  animation-delay: 0.27s;
}
.wave .d4 {
  animation-delay: 0.36s;
}
.wave .d5 {
  animation-delay: 0.45s;
}
.wave .d6 {
  animation-delay: 0.54s;
}
.gen {
  font-size: 0.8125rem;
  color: var(--band-muted);
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-variant-numeric: tabular-nums;
}
.gen-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
.gen .track {
  background: var(--band-bg);
}
.gen .track > i {
  background: var(--band-tap);
  transition: width 0.8s ease;
}

/* FAQ */
.faq > .wrap {
  padding-block: 64px;
  display: grid;
  gap: 28px;
}
@media (min-width: 900px) {
  .faq > .wrap {
    grid-template-columns: 1fr 2fr;
    gap: 72px;
    padding-block: 88px;
  }
}
.faq h2 {
  font-size: var(--step-3);
  letter-spacing: -0.015em;
}
.faq details {
  padding-block: 6px;
}
.faq details + details {
  box-shadow: 0 -1px 0 var(--line);
}
.faq summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding-block: 12px;
  min-height: 48px;
}
.faq summary h3 {
  font-size: var(--step-1);
  font-weight: 600;
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq summary::after {
  content: '+';
  color: var(--tap);
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 1;
  transition: transform 0.3s;
  flex: none;
}
.faq details[open] summary::after {
  transform: rotate(45deg);
}
.faq details p {
  padding-bottom: 14px;
  color: var(--muted);
  max-width: 62ch;
}
.faq details.opened[open] p {
  animation: fadeIn 0.35s both;
}

/* Final call */
.final > .wrap {
  padding-block: 64px 96px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 18px;
}
.big {
  width: 112px;
  height: 112px;
  color: var(--fg);
}
.big path {
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}
.big.draw path {
  animation: draw 1s ease both;
}
.big.draw .a2 {
  animation-delay: 0.2s;
}
.big.draw .a1 {
  animation-delay: 0.4s;
}
.big.draw .a4 {
  animation-delay: 0.6s;
}
.big.pulse .a3 {
  animation: pulse 2.4s ease-in-out 3;
}
.big.pulse .a2 {
  animation: pulse 2.4s ease-in-out 0.25s 3;
}
.big.pulse .a1 {
  animation: pulse 2.4s ease-in-out 0.5s 3;
}
.final h2 {
  font-size: var(--step-4);
  line-height: 1.05;
  letter-spacing: -0.02em;
}
.final p {
  font-size: var(--step-1);
  color: var(--muted);
}
.final .cta-row {
  justify-content: center;
  margin-top: 12px;
}

/* Footer */
footer {
  border-top: 1px solid var(--line);
}
footer > .wrap {
  padding-block: 32px max(48px, env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-wrap: wrap;
  gap: 24px 40px;
  justify-content: space-between;
  align-items: flex-start;
}
.foot-brand {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 52ch;
}
.foot-brand p {
  color: var(--muted);
  font-size: 0.9375rem;
}
.foot-brand p.small {
  font-size: var(--step--1);
}
footer nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 22px;
}
footer nav a {
  color: var(--fg);
  text-decoration: none;
  font-size: 0.9375rem;
  display: inline-block;
  padding-block: 10px;
}
footer nav a:hover {
  color: var(--tap);
  text-decoration: underline;
}

/* 404 */
.not-found > .wrap {
  padding-block: 72px 120px;
  display: flex;
  flex-direction: column;
  gap: 32px;
  align-items: flex-start;
}
.nf-block h1 {
  font-size: var(--step-3);
}
.nf-block p {
  margin-top: 12px;
  font-size: var(--step-1);
  color: var(--muted);
}
.nf-block .btn {
  margin-top: 8px;
}

/* Book pages and the book lists (P25) */
.crumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  list-style: none;
  margin: 0;
  padding: 24px 0 0;
  font-size: var(--step--1);
  color: var(--muted);
}
.crumbs li + li::before {
  content: '/';
  margin-right: 8px;
  color: var(--muted);
}
.crumbs a {
  display: inline-block;
  padding-block: 4px;
}
.book {
  display: grid;
  gap: 28px;
  padding-block: 24px 88px;
}
@media (min-width: 720px) {
  .book {
    grid-template-columns: minmax(200px, 300px) minmax(0, 1fr);
    gap: 48px;
    align-items: start;
  }
  .book-art {
    position: sticky;
    top: 88px;
  }
}
.book-cover,
.list-cover {
  display: block;
  width: 100%;
  /* Square, like the covers the app and the API make (1024 × 1024). */
  aspect-ratio: 1;
  height: auto;
  object-fit: cover;
  border-radius: var(--r);
  background: var(--card);
}
.book-cover {
  max-width: min(300px, 55vw);
  box-shadow: 0 14px 36px -18px var(--shadow);
}
.type-cover {
  display: flex;
  align-items: flex-end;
  padding: 12%;
  background: var(--cover);
  color: var(--cover-ink);
  font-weight: 600;
  line-height: 1.15;
  overflow: hidden;
  overflow-wrap: anywhere;
}
.book-cover.type-cover {
  font-size: var(--step-2);
}
.list-cover.type-cover {
  font-size: var(--step--1);
}
.type-cover > span {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  line-clamp: 5;
  overflow: hidden;
}
.book-main h1 {
  font-size: var(--step-3);
  line-height: 1.1;
}
.book-sub {
  margin-top: 8px;
  font-size: var(--step-1);
  font-style: italic;
}
.book-by {
  margin-top: 10px;
  font-size: var(--step-1);
  color: var(--muted);
}
.book-main .ai-label {
  margin-top: 12px;
}
.book-rating {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
}
.book-rating .ic {
  width: 20px;
  height: 20px;
  color: var(--fg);
}
.book-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  margin-top: 24px;
}
.book-cta .ic {
  width: 18px;
  height: 18px;
}
.book-price {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.book-price strong {
  font-size: var(--step-1);
}
.book-price .small {
  color: var(--muted);
}
.facts-title {
  margin-top: 40px;
  font-size: var(--step-1);
}
.facts {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin: 14px 0 0;
}
@media (min-width: 480px) {
  .facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1100px) {
  .facts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.fact {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 68px;
  padding: 14px 14px 14px 66px;
  background: var(--card);
  border-radius: 12px;
}
/* The icon sits in the term (a dl row holds only dt and dd) and is placed beside both. */
.fact-ic {
  position: absolute;
  top: 50%;
  left: 14px;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-top: -20px;
  border-radius: 50%;
  background: var(--tap-soft);
  color: var(--tap-ink);
}
.fact-ic .ic {
  width: 20px;
  height: 20px;
}
.fact dt {
  font-size: var(--step--1);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.fact dd {
  margin: 2px 0 0;
  font-size: var(--step-1);
  font-weight: 600;
  line-height: 1.25;
  overflow-wrap: break-word;
  hyphens: auto;
}
.genre-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}
.genre-chips a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 4px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--fg);
  font-size: var(--step--1);
  text-decoration: none;
}
.genre-chips a:hover,
.genre-chips a:focus-visible {
  border-color: var(--tap);
  color: var(--tap);
}
.book-desc {
  margin-top: 32px;
  max-width: 64ch;
  font-size: var(--step-1);
  line-height: 1.6;
}
.book-desc p + p {
  margin-top: 1em;
}
.book-get {
  margin-top: 40px;
  scroll-margin-top: 96px;
}
.books-page > .wrap {
  padding-bottom: 88px;
}
.books-page h1 {
  margin-top: 24px;
  font-size: var(--step-3);
}
.books-page .lede {
  margin-top: 12px;
  max-width: 60ch;
  font-size: var(--step-1);
  color: var(--muted);
}
.book-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 32px 20px;
  list-style: none;
  margin: 40px 0 0;
  padding: 0;
}
@media (min-width: 720px) {
  .book-list {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  }
}
.book-list a {
  display: flex;
  flex-direction: column;
  gap: 12px;
  color: var(--fg);
  text-decoration: none;
}
.list-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.list-title {
  font-weight: 600;
  line-height: 1.25;
}
/* Long titles end with "…" after two lines, names after one (the link keeps the whole title). */
.list-title,
.list-by {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  overflow-wrap: anywhere;
}
.list-by {
  -webkit-line-clamp: 1;
  line-clamp: 1;
}
.book-list a:hover .list-title,
.book-list a:focus-visible .list-title {
  text-decoration: underline;
}
.list-by,
.list-meta {
  font-size: var(--step--1);
  color: var(--muted);
}

/* Books list: search, filters and sort (P25.6). Without JavaScript the full list shows. */
.book-list[hidden],
.bf-empty[hidden],
.bf-clear[hidden],
.bf-badge[hidden] {
  display: none;
}
.no-js .bf-top,
.no-js .bf-panel,
.no-js .bf-status {
  display: none;
}
.bf {
  margin-top: 24px;
}
.bf-top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
}
.bf-search {
  display: flex;
  flex: 1 1 100%;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 18px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 999px;
}
.bf-search:focus-within {
  border-color: var(--tap);
  box-shadow: 0 0 0 2px var(--tap);
}
.bf-search .ic {
  flex: none;
  width: 20px;
  height: 20px;
  color: var(--muted);
}
.bf-search input {
  flex: 1 1 auto;
  min-width: 0;
  height: 50px;
  border: 0;
  background: transparent;
  color: var(--fg);
  font: inherit;
}
.bf-search input:focus {
  outline: none;
}
.bf-search input::placeholder {
  color: var(--muted);
}
.bf-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg);
  color: var(--fg);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.bf-toggle .ic {
  width: 18px;
  height: 18px;
}
.bf-badge {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--tap);
  color: var(--tap-on);
  font-size: var(--step--1);
}
.bf-sort {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}
.bf-sort label {
  font-size: var(--step--1);
  color: var(--muted);
  white-space: nowrap;
}
.bf-sort select {
  min-height: 44px;
  max-width: 60vw;
  padding: 8px 36px 8px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round' d='M7 10l5 5 5-5'/%3E%3C/svg%3E")
    no-repeat right 12px center / 18px;
  color: var(--fg);
  font: inherit;
  appearance: none;
  cursor: pointer;
}
.bf-body {
  margin-top: 20px;
}
/* Phones: the panel opens under the bar from the Filters button. */
.bf-panel {
  display: none;
  margin-bottom: 24px;
  padding: 4px 20px 20px;
  background: var(--card);
  border-radius: 16px;
}
.bf-panel.open {
  display: block;
}
.bf-group {
  margin: 0;
  padding: 16px 0 0;
  border: 0;
  min-width: 0;
}
.bf-group legend {
  float: left;
  width: 100%;
  margin-bottom: 10px;
  padding: 0;
  font-size: var(--step--1);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.bf-chips {
  clear: both;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.bf-chip {
  position: relative;
  cursor: pointer;
}
.bf-chip input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}
.bf-chip span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 6px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg);
  font-size: var(--step--1);
  line-height: 1.2;
}
.bf-chip small {
  color: var(--muted);
  font-size: inherit;
}
.bf-chip:hover span {
  border-color: var(--tap);
}
.bf-chip input:checked + span {
  border-color: var(--tap);
  background: var(--tap);
  color: var(--tap-on);
}
.bf-chip input:checked + span small {
  color: inherit;
}
.bf-chip input:focus-visible + span {
  outline: 2px solid var(--tap);
  outline-offset: 2px;
}
.bf-chip.zero span {
  border-style: dashed;
  color: var(--muted);
}
.bf-genres .extra {
  display: none;
}
.bf-genres.all .extra {
  display: block;
}
.bf-more {
  min-height: 44px;
  margin-top: 4px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--tap);
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}
.bf-years {
  clear: both;
  display: flex;
  align-items: flex-end;
  gap: 10px;
}
.bf-years label {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: 4px;
  font-size: var(--step--1);
  color: var(--muted);
}
.bf-years input {
  width: 100%;
  min-height: 40px;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg);
  color: var(--fg);
  font: inherit;
}
.bf-years > span {
  padding-bottom: 10px;
}
.bf-check {
  clear: both;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  cursor: pointer;
}
.bf-check input {
  flex: none;
  width: 20px;
  height: 20px;
  accent-color: var(--tap);
}
.bf-panel-end {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  margin-top: 20px;
}
.bf-clear {
  min-height: 44px;
  padding: 0 4px;
  border: 0;
  background: none;
  color: var(--tap);
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}
.bf-status {
  margin-bottom: 16px;
  font-weight: 600;
  color: var(--muted);
}
.bf-results .book-list {
  margin-top: 0;
}
.bf-empty {
  display: grid;
  justify-items: start;
  gap: 16px;
  font-size: var(--step-1);
}
/* Wide screens: the filters are a sidebar, always open. */
@media (min-width: 960px) {
  .bf-search {
    flex: 1 1 auto;
  }
  .bf-top {
    padding-left: 292px;
  }
  .bf-toggle,
  .bf-done {
    display: none;
  }
  .bf-body {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 32px;
    align-items: start;
  }
  /* As tall as its filters: the page grows to fit it, one scroll bar (owner). */
  .bf-panel,
  .bf-panel.open {
    display: block;
    margin: 0;
  }
  .bf-results .book-list {
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  }
}
/* Lazy list (P25.6): with the data loaded, cards are drawn a batch at a time and the static page
   links give way to "Show more"; if the data can't load, the filters go and the page links stay. */
.bf.ready .pager,
.bf.failed .bf-top,
.bf.failed .bf-panel,
.bf.failed .bf-status {
  display: none;
}
.bf-loadwrap {
  display: flex;
  justify-content: center;
  margin-top: 40px;
}
.bf-load {
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--fg);
}
.bf-load[hidden] {
  display: none;
}
.pager {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  margin-top: 40px;
}
.pager > :first-child {
  justify-self: start;
}
.pager > :last-child {
  justify-self: end;
}
.pager a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--tap);
}
.pager > span {
  color: var(--muted);
}
/* Study pages (P26.2): links from the book page, its first chapter, summary and who's who */
.study-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 28px;
}
.study-links a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 8px 18px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card);
  color: var(--fg);
  font-weight: 600;
  text-decoration: none;
}
.study-links a:hover,
.study-links a:focus-visible {
  border-color: var(--tap);
  color: var(--tap);
}
.study-links .ic {
  width: 20px;
  height: 20px;
  color: var(--tap);
}
.first-chapter details,
.sum-ch {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card);
}
.first-chapter details {
  margin-top: 14px;
}
.first-chapter summary,
.sum-ch summary {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 12px 18px;
  cursor: pointer;
  font-weight: 600;
  list-style: none;
}
.first-chapter summary::-webkit-details-marker,
.sum-ch summary::-webkit-details-marker {
  display: none;
}
.first-chapter summary::after,
.sum-ch summary::after {
  content: '+';
  margin-left: auto;
  font-size: 1.25em;
  color: var(--tap);
}
.first-chapter details[open] summary::after,
.sum-ch[open] summary::after {
  content: '−';
}
.chapter-text,
.sum-ch > p {
  padding: 0 18px 18px;
  max-width: 68ch;
  font-size: var(--step-1);
  line-height: 1.65;
}
.chapter-text p + p {
  margin-top: 0.9em;
}
.chapter-more {
  padding: 0 18px 18px;
}
.study {
  display: grid;
  gap: 32px;
  padding-block: 24px 88px;
}
@media (min-width: 960px) {
  .study {
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 56px;
    align-items: start;
  }
}
.study-main h1 {
  font-size: var(--step-3);
  line-height: 1.1;
}
.study-main .ai-label {
  margin-top: 12px;
}
.spoiler-note {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-top: 24px;
  padding: 14px 16px;
  border-radius: 12px;
  background: var(--tap-soft);
  color: var(--tap-ink);
}
.spoiler-note .ic {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 2px;
}
.sum-chapters {
  display: grid;
  gap: 10px;
  margin-top: 24px;
}
.sum-ch h2 {
  font-size: var(--step-0);
  line-height: 1.3;
}
.ent-group {
  margin-top: 32px;
}
.ent-group h2 {
  font-size: var(--step-1);
}
.ent-list {
  display: grid;
  gap: 10px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}
.ent-list > li {
  padding: 14px 18px;
  border-radius: 12px;
  background: var(--card);
}
.ent-list h3 {
  font-size: var(--step-0);
}
.ent-facts {
  margin: 6px 0 0;
  padding-left: 1.2em;
  color: var(--muted);
}
.ent-facts li + li {
  margin-top: 4px;
}
.study-more {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin-top: 32px;
}
.study-more a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--tap);
}
.study-cta {
  display: grid;
  gap: 14px;
  padding: 20px;
  border-radius: 16px;
  background: var(--card);
}
@media (min-width: 960px) {
  .study-cta {
    position: sticky;
    top: 88px;
  }
}
.study-cover {
  display: block;
  max-width: 160px;
  text-decoration: none;
}
.study-cta h2 {
  font-size: var(--step-1);
}
.study-cta .store-row {
  flex-wrap: wrap;
}

/* School reading lists (P26.4) */
.school-page > .wrap {
  padding-bottom: 88px;
}
.school-page h1 {
  margin-top: 24px;
  font-size: var(--step-3);
}
.school-page .lede {
  margin-top: 12px;
  max-width: 60ch;
  font-size: var(--step-1);
  color: var(--muted);
}
.school-lists {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
  margin: 32px 0 0;
  padding: 0;
  list-style: none;
}
.school-lists a {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 88px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card);
  color: var(--fg);
  text-decoration: none;
}
.school-lists a:hover,
.school-lists a:focus-visible {
  border-color: var(--tap);
}
.school-name {
  font-weight: 600;
}
.school-count {
  font-size: var(--step--1);
  color: var(--muted);
}
.school-works {
  display: grid;
  gap: 8px;
  margin: 32px 0 0;
  padding-left: 1.6em;
}
.school-works > li {
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}
.school-works .work {
  display: block;
}
.work-author {
  color: var(--muted);
}
.work-title {
  font-weight: 600;
}
.work-note {
  color: var(--muted);
  font-size: var(--step--1);
}
.work-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 16px;
  margin-top: 4px;
}
.work-actions a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--tap);
  font-weight: 600;
}
.work-soon {
  display: block;
  margin-top: 4px;
  font-size: var(--step--1);
  color: var(--muted);
}

/* Book cards: the price, and the language when the list mixes them */
.list-price {
  margin-top: 4px;
  font-size: var(--step--1);
  font-weight: 600;
}
.list-price.free {
  color: var(--tap);
}
.list-lang {
  display: none;
  margin-right: 6px;
  padding: 1px 6px;
  border: 1px solid var(--line);
  border-radius: 4px;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  vertical-align: 2px;
  color: var(--muted);
}
.bf.mixed .list-lang {
  display: inline-block;
}

/* Home page shelf of real books (P25.5) */
.shelf > .wrap {
  padding-block: 64px;
}
.shelf-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px 32px;
}
.shelf h2 {
  font-size: var(--step-3);
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin-top: 14px;
}
.shelf .body {
  margin-top: 18px;
  font-size: var(--step-1);
  max-width: 48ch;
  line-height: 1.5;
}
.shelf-all {
  font-weight: 600;
  white-space: nowrap;
}
.shelf-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 600px) {
  .shelf-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (min-width: 1000px) {
  .shelf > .wrap {
    padding-block: 88px;
  }
  .shelf-list {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

/* Forced colours (Windows high contrast): keep shapes visible */
@media (forced-colors: active) {
  .btn,
  .chip,
  .q-chip,
  .bar,
  .opt,
  .seg button,
  .lang a,
  .icon-btn,
  .pause-btn,
  .search,
  .cast button {
    border: 1px solid ButtonText;
  }
  .sent.on,
  mark {
    forced-color-adjust: none;
    background: Highlight;
    color: HighlightText;
  }
}

@media print {
  .top,
  .stage,
  .panel,
  .final .cta-row,
  .hero .cta-row,
  .skip {
    display: none !important;
  }
  .feature > .wrap {
    padding-block: 24px;
  }
  body {
    background: #fff;
    color: #000;
  }
}

/* Generated: progress widths */
.pct-0{width:0%}.pct-1{width:1%}.pct-2{width:2%}.pct-3{width:3%}.pct-4{width:4%}.pct-5{width:5%}.pct-6{width:6%}.pct-7{width:7%}.pct-8{width:8%}.pct-9{width:9%}.pct-10{width:10%}.pct-11{width:11%}.pct-12{width:12%}.pct-13{width:13%}.pct-14{width:14%}.pct-15{width:15%}.pct-16{width:16%}.pct-17{width:17%}.pct-18{width:18%}.pct-19{width:19%}.pct-20{width:20%}.pct-21{width:21%}.pct-22{width:22%}.pct-23{width:23%}.pct-24{width:24%}.pct-25{width:25%}.pct-26{width:26%}.pct-27{width:27%}.pct-28{width:28%}.pct-29{width:29%}.pct-30{width:30%}.pct-31{width:31%}.pct-32{width:32%}.pct-33{width:33%}.pct-34{width:34%}.pct-35{width:35%}.pct-36{width:36%}.pct-37{width:37%}.pct-38{width:38%}.pct-39{width:39%}.pct-40{width:40%}.pct-41{width:41%}.pct-42{width:42%}.pct-43{width:43%}.pct-44{width:44%}.pct-45{width:45%}.pct-46{width:46%}.pct-47{width:47%}.pct-48{width:48%}.pct-49{width:49%}.pct-50{width:50%}.pct-51{width:51%}.pct-52{width:52%}.pct-53{width:53%}.pct-54{width:54%}.pct-55{width:55%}.pct-56{width:56%}.pct-57{width:57%}.pct-58{width:58%}.pct-59{width:59%}.pct-60{width:60%}.pct-61{width:61%}.pct-62{width:62%}.pct-63{width:63%}.pct-64{width:64%}.pct-65{width:65%}.pct-66{width:66%}.pct-67{width:67%}.pct-68{width:68%}.pct-69{width:69%}.pct-70{width:70%}.pct-71{width:71%}.pct-72{width:72%}.pct-73{width:73%}.pct-74{width:74%}.pct-75{width:75%}.pct-76{width:76%}.pct-77{width:77%}.pct-78{width:78%}.pct-79{width:79%}.pct-80{width:80%}.pct-81{width:81%}.pct-82{width:82%}.pct-83{width:83%}.pct-84{width:84%}.pct-85{width:85%}.pct-86{width:86%}.pct-87{width:87%}.pct-88{width:88%}.pct-89{width:89%}.pct-90{width:90%}.pct-91{width:91%}.pct-92{width:92%}.pct-93{width:93%}.pct-94{width:94%}.pct-95{width:95%}.pct-96{width:96%}.pct-97{width:97%}.pct-98{width:98%}.pct-99{width:99%}.pct-100{width:100%}