:root { color-scheme: light dark; --ink:#24312d; --muted:#6a746f; --canvas:#f2eee6; --panel:#fffdf9; --strong:#fff; --line:#ded8cd; --accent:#b6532d; --nav:#26332e; --navink:#f7f4ec; --focus:#9b3c1d; font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; background:var(--canvas); color:var(--ink); }
@media (prefers-color-scheme: dark) { :root { --ink:#eef5f1; --muted:#aab5af; --canvas:#111713; --panel:#1a221e; --strong:#212b26; --line:#344139; --accent:#e9865f; --nav:#0b100d; --navink:#eef5f1; --focus:#ffba96; } }
* { box-sizing:border-box; } body { margin:0; min-width:280px; padding-bottom:8.4rem; } button, select, audio { font:inherit; } button { cursor:pointer; } button:disabled { cursor:not-allowed; opacity:.54; } :focus-visible { outline:3px solid var(--focus); outline-offset:3px; }
.skip-link { background:var(--accent); color:#fff; left:1rem; padding:.55rem .8rem; position:absolute; top:-4rem; z-index:10; } .skip-link:focus { top:1rem; }
.app-shell { display:grid; grid-template-columns:220px minmax(0,1fr); min-height:calc(100dvh - 8.4rem); }.sidebar { background:var(--nav); color:var(--navink); display:flex; flex-direction:column; min-height:100%; padding:25px 16px; }.brand { color:inherit; font:500 21px/1 Georgia,serif; margin:5px 8px 34px; text-decoration:none; }.brand span { color:var(--accent); font:30px/0 sans-serif; margin-right:7px; vertical-align:middle; }.nav-label,.eyebrow { font-size:11px; letter-spacing:.1em; text-transform:uppercase; }.nav-label { color:color-mix(in srgb,var(--navink) 58%,transparent); margin:14px 10px 7px; }.nav-item { background:transparent; border:0; border-radius:9px; color:inherit; min-height:42px; padding:0 11px; text-align:left; width:100%; }.nav-item:not(:disabled):hover,.nav-item.current { background:color-mix(in srgb,var(--accent) 24%,transparent); }.sidebar-foot { color:color-mix(in srgb,var(--navink) 58%,transparent); font-size:12px; margin-top:auto; padding:10px; }
.main-panel { min-width:0; }.topbar { align-items:center; background:color-mix(in srgb,var(--panel) 94%,transparent); border-bottom:1px solid var(--line); display:flex; justify-content:space-between; min-height:76px; padding:13px 32px; }.topbar h1 { font:500 24px/1.2 Georgia,serif; margin:0; }.topbar .eyebrow { color:var(--muted); margin:0 0 4px; }.topbar-account { align-items:center; display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-end; }.session-user { border:1px solid var(--line); border-radius:999px; color:var(--muted); font-size:12px; margin:0; padding:6px 10px; }.session-user { max-width:min(28ch,36vw); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.logout { background:transparent; border:1px solid var(--line); border-radius:999px; color:var(--ink); font-size:12px; padding:6px 10px; }.logout:not(:disabled):hover { border-color:var(--accent); color:var(--accent); }
#app { margin:0 auto; max-width:1180px; min-height:calc(100dvh - 10rem); padding:34px 32px 55px; }.library-state { max-width:38rem; padding:2rem 0; }.library-state h2 { font:500 28px/1.2 Georgia,serif; }.library-intro { color:var(--muted); font:16px/1.55 Georgia,serif; margin:0; max-width:43rem; }.library-notice { background:color-mix(in srgb,var(--accent) 9%,var(--panel)); border-left:3px solid var(--accent); margin:18px 0 0; max-width:43rem; padding:10px 12px; }.collection-heading { align-items:baseline; display:flex; justify-content:space-between; margin-top:34px; }.collection-heading h2 { font:500 20px Georgia,serif; margin:0; }.collection-heading span { color:var(--muted); font-size:13px; }
.book-grid { display:grid; gap:18px; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); list-style:none; margin:18px 0; padding:0; }.book-card { background:var(--panel); border:1px solid var(--line); border-radius:14px; box-shadow:0 10px 30px rgb(57 43 27 / 7%); color:inherit; display:flex; flex-direction:column; min-height:252px; overflow:hidden; padding:19px; position:relative; text-decoration:none; }.book-card:hover { border-color:var(--accent); box-shadow:0 12px 34px rgb(57 43 27 / 14%); }.book-cover,.narrator-cover { aspect-ratio:1; background:linear-gradient(135deg,var(--accent),color-mix(in srgb,var(--accent) 46%,var(--nav))); border-radius:8px; overflow:hidden; }.book-card .book-cover { margin-bottom:14px; }.book-cover img,.narrator-cover img,.book-detail-cover img { display:block; height:100%; object-fit:cover; width:100%; }.book-cover--fallback { opacity:.9; }.book-title { display:block; font:500 23px/1.16 Georgia,serif; margin:0 0 6px; }.book-card:hover .book-title { color:var(--accent); text-decoration:underline; text-underline-offset:4px; }.book-creator,.book-meta { color:var(--muted); display:block; margin:0; }.book-creator { font:15px/1.45 Georgia,serif; }.book-meta { font-size:12px; margin-top:auto; padding-top:12px; }.book-narrator-flip { background:transparent; border:0; border-radius:12px; display:block; margin:0 0 18px; padding:0; perspective:1000px; width:100%; }.book-narrator-art { display:grid; position:relative; transform-style:preserve-3d; transition:transform .48s ease; }.book-narrator-flip.is-flipped .book-narrator-art { transform:rotateY(180deg); }.book-narrator-face { backface-visibility:hidden; display:block; grid-area:1/1; position:relative; transform-style:preserve-3d; }.book-narrator-face--back { transform:rotateY(180deg); }.book-narrator-flip .book-detail-cover,.book-narrator-flip .narrator-cover { aspect-ratio:1; border-radius:12px; overflow:hidden; width:100%; }
.back-link { align-items:center; background:transparent; border:1px solid var(--line); border-radius:999px; color:var(--muted); cursor:pointer; display:inline-flex; font:600 13px/1 ui-sans-serif,system-ui,sans-serif; gap:7px; padding:.5rem .85rem; text-decoration:none; }.back-link:hover { border-color:var(--accent); color:var(--accent); }.book-detail { max-width:850px; }.book-detail-cover { aspect-ratio:1; background:linear-gradient(135deg,var(--accent),color-mix(in srgb,var(--accent) 46%,var(--nav))); border-radius:12px; box-shadow:0 10px 30px rgb(57 43 27 / 12%); float:right; margin:20px 0 18px 28px; overflow:hidden; width:min(32vw,220px); }.book-detail-cover.book-cover--fallback { opacity:.9; }.book-detail h2 { clear:both; font:500 22px Georgia,serif; margin:35px 0 12px; }.book-detail > h1 { font:500 clamp(2rem,5vw,3.5rem)/1.05 Georgia,serif; letter-spacing:-.035em; margin:20px 0 8px; }.book-facts { display:flex; flex-wrap:wrap; gap:8px 20px; margin:20px 0; }.book-facts div { border-left:2px solid var(--accent); padding-left:9px; }.book-facts dt { color:var(--muted); font-size:11px; letter-spacing:.08em; text-transform:uppercase; }.book-facts dd { font:15px Georgia,serif; margin:2px 0 0; }.reader-note { background:color-mix(in srgb,var(--accent) 9%,var(--panel)); border-left:3px solid var(--accent); color:var(--muted); line-height:1.5; max-width:640px; padding:12px 14px; }
.resume-panel { align-items:center; background:color-mix(in srgb,var(--accent) 9%,var(--panel)); border-left:3px solid var(--accent); display:flex; gap:1rem; justify-content:space-between; margin:1.25rem 0; max-width:640px; padding:12px 14px; }.resume-panel p { margin:0; }.resume-panel button { background:var(--nav); border:0; border-radius:999px; color:var(--navink); flex:0 0 auto; padding:.62rem .95rem; }.resume-panel button:hover { background:var(--accent); }.resume-panel--warning { border-left-color:var(--focus); }
.track-list { border-top:1px solid var(--line); list-style:none; margin:0; max-width:780px; padding:0; }.track-item { border-bottom:1px solid var(--line); }.track-button { align-items:center; background:transparent; border:0; color:var(--ink); display:flex; gap:16px; justify-content:space-between; padding:15px 12px; text-align:left; width:100%; }.track-button:hover,.track-button[aria-current="true"] { background:color-mix(in srgb,var(--accent) 10%,transparent); }.track-button[aria-current="true"] { box-shadow:inset 3px 0 var(--accent); }.track-name { font:600 16px Georgia,serif; }.track-duration { color:var(--muted); font:12px ui-monospace,monospace; white-space:nowrap; }
.player-dock { align-items:center; background:var(--nav); bottom:0; box-shadow:0 -8px 26px rgb(0 0 0 / 18%); color:var(--navink); display:grid; gap:14px; grid-template-columns:minmax(175px,1fr) minmax(300px,1.55fr) auto; padding:12px 32px; position:fixed; width:100%; z-index:4; }.player-track { min-width:0; }.player-track strong,.player-track span { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.player-track strong { font:600 14px Georgia,serif; }.player-track span { color:color-mix(in srgb,var(--navink) 64%,transparent); font-size:12px; margin-top:3px; }.player-controls { align-items:center; display:grid; gap:7px; grid-template-columns:auto minmax(150px,1fr) auto; }.icon-button { background:transparent; border:0; color:var(--navink); min-height:38px; min-width:42px; }.icon-button:not(:disabled):hover { color:var(--accent); }.player-controls audio { height:34px; min-width:0; width:100%; }.speed-control { align-items:center; display:flex; font-size:12px; gap:7px; white-space:nowrap; }.speed-control select { background:var(--nav); border:1px solid color-mix(in srgb,var(--navink) 38%,transparent); border-radius:5px; color:var(--navink); padding:4px; }.player-message { color:color-mix(in srgb,var(--navink) 68%,transparent); font-size:11px; grid-column:1/-1; margin:-8px 0 0; min-height:0; }.mobile-nav { display:none; }.library-state button { background:var(--nav); border:0; border-radius:999px; color:var(--navink); padding:.65rem 1rem; }
@media (max-width:700px) { body { padding-bottom:11.9rem; }.app-shell { display:block; min-height:calc(100dvh - 11.9rem); }.sidebar { display:none; }.topbar { min-height:68px; padding:12px 16px; }.topbar h1 { font-size:21px; }#app { min-height:calc(100dvh - 13.5rem); padding:24px 16px 28px; }.book-grid { gap:12px; grid-template-columns:repeat(2,minmax(0,1fr)); }.book-card { min-height:228px; padding:14px; }.book-title { font-size:20px; }.resume-panel { align-items:stretch; flex-direction:column; }.resume-panel button { width:100%; }.player-dock { gap:8px; grid-template-columns:1fr auto; padding:9px 14px 10px; }.player-track { grid-column:1/-1; padding-right:74px; }.player-controls { grid-column:1/-1; }.speed-control { justify-self:end; position:absolute; right:16px; top:10px; }.player-message { display:none; }.mobile-nav { background:var(--panel); border-top:1px solid var(--line); bottom:0; display:grid; grid-template-columns:1fr 1fr; padding:4px 12px max(5px,env(safe-area-inset-bottom)); position:fixed; width:100%; z-index:3; }.mobile-nav .nav-item { color:var(--muted); font-size:12px; min-height:37px; text-align:center; }.mobile-nav .nav-item.current { color:var(--ink); }}
.book-reader { max-width:1080px; }.reader-heading { margin:20px 0 25px; }.reader-heading > h1 { font:500 clamp(2rem,5vw,3.5rem)/1.05 Georgia,serif; letter-spacing:-.035em; margin:0 0 8px; }.reader-layout { align-items:start; display:grid; gap:28px; grid-template-columns:minmax(205px,260px) minmax(0,1fr); }.reader-sidebar { min-width:0; }.reader-sidebar .book-detail-cover { float:none; margin:0 0 18px; width:100%; }.reader-sidebar h2,.reading-surface h2 { font:500 22px Georgia,serif; margin:28px 0 12px; }.reader-sidebar .book-facts { margin:16px 0; }.reading-surface { background:var(--strong); border:1px solid var(--line); border-radius:14px; box-shadow:0 10px 30px rgb(57 43 27 / 7%); min-width:0; overflow:hidden; }.reading-surface-head { align-items:center; border-bottom:1px solid var(--line); display:flex; gap:16px; justify-content:space-between; padding:22px 24px 16px; }.reading-surface-head .eyebrow { color:var(--muted); margin:0 0 5px; }.reading-surface-head h2 { margin:0; }.reload-text { background:transparent; border:1px solid var(--line); border-radius:999px; color:var(--ink); flex:0 0 auto; padding:.55rem .8rem; }.reload-text:hover { border-color:var(--accent); color:var(--accent); }.reading-status { color:var(--muted); font-size:13px; margin:0; min-height:1.5em; padding:12px 24px; }.content-frame-host { background:var(--canvas); border-block:1px solid var(--line); height:min(66dvh,760px); min-height:420px; }.book-content-frame { background:#fffdf9; border:0; display:block; height:100%; width:100%; }.content-error { color:var(--muted); margin:0; padding:24px; }.reading-surface .reader-note { margin:18px 24px 24px; }
@media (max-width:700px) { .reader-layout { display:flex; flex-direction:column-reverse; }.reader-sidebar { width:100%; }.reader-sidebar .book-narrator-flip { max-width:260px; }.content-frame-host { height:56dvh; min-height:360px; }.reading-surface-head { align-items:flex-start; padding:18px 16px 14px; }.reading-status { padding-inline:16px; }.reading-surface .reader-note { margin-inline:16px; } }
@media (max-width:390px) { .book-grid { grid-template-columns:1fr; }.book-card { min-height:210px; }}@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto !important; transition:none !important; }}

/* Product reader shell.  The frame owns book markup; this layer owns only the
   surrounding navigation, chapter list and persistent controls. */
.sr-only { clip:rect(0 0 0 0); clip-path:inset(50%); height:1px; overflow:hidden; position:absolute; white-space:nowrap; width:1px; }
.book-grid { grid-template-columns:repeat(auto-fill,minmax(238px,1fr)); max-width:1050px; }
.book-grid > li { display:flex; }
.book-card { height:100%; min-height:330px; padding:18px; transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease; width:100%; }
.book-card:hover { transform:translateY(-2px); }
/* Cover artwork is square (1254x1254), so the card well is square too:
   a 4/5 well cropped the title off both edges under object-fit:cover. */
.book-card .book-cover { aspect-ratio:1; background:var(--strong); margin-bottom:16px; }
.book-card .book-cover img { object-fit:cover; }

.book-reader { max-width:1220px; }
.reader-heading { border-bottom:1px solid var(--line); margin:18px 0 0; padding:0 0 23px; }
.reader-heading > h1 { font-size:clamp(2.15rem,4vw,3.65rem); }
.reader-layout { align-items:stretch; gap:0; grid-template-columns:272px minmax(0,1fr); margin-top:22px; }
.reader-sidebar { align-self:stretch; border-right:1px solid var(--line); padding:0 25px 30px 0; }
.reader-book-attribution { border-bottom:1px solid var(--line); margin-bottom:24px; padding-bottom:20px; }
.reader-sidebar .book-narrator-flip { margin:0 0 15px; }
.reader-sidebar .book-narrator-flip .book-detail-cover,.reader-sidebar .book-narrator-flip .narrator-cover { aspect-ratio:4 / 5; }
.reader-sidebar h2 { color:var(--muted); font:700 11px/1 ui-sans-serif,system-ui,sans-serif; letter-spacing:.12em; margin:0 0 8px; text-transform:uppercase; }
.reader-sidebar .book-facts { gap:7px 13px; margin:0; }
.reader-sidebar .book-facts dd { font-size:14px; }
.track-list { border-top:0; }
.track-button { border-radius:8px; gap:10px; padding:12px 10px; }
.track-button[aria-current="true"] { box-shadow:inset 3px 0 var(--accent); }
.track-name { font-size:15px; line-height:1.25; }

.appendium { border-bottom:1px solid var(--line); margin:0 0 24px; padding:0 0 22px; }
.appendium h2 { margin:0 0 3px; }
/* The closed disclosure is one row: a heading that matches Chapters and a line
   naming the companion and its size.  Summary keeps its default display so the
   native toggle is not affected; the marker is replaced by a chevron. */
.appendium-summary { cursor:pointer; list-style:none; padding:2px 22px 2px 0; position:relative; }
.appendium-summary::-webkit-details-marker { display:none; }
.appendium-summary::after { border-bottom:2px solid var(--muted); border-right:2px solid var(--muted); content:""; height:7px; position:absolute; right:5px; top:5px; transform:rotate(45deg); transition:transform .18s ease; width:7px; }
.appendium-disclosure[open] > .appendium-summary::after { transform:rotate(-135deg); top:8px; }
.appendium-summary:focus-visible { border-radius:6px; outline:2px solid var(--accent); outline-offset:3px; }
.appendium-summary-detail { color:var(--muted); display:block; font-size:12px; line-height:1.4; }
.appendium-body { padding-top:12px; }
.appendium-note { color:var(--muted); font-size:12px; line-height:1.45; margin:0 0 11px; }
.appendium-units { list-style:none; margin:0; padding:0; }
.appendium-unit { background:transparent; border:0; border-radius:8px; color:var(--ink); cursor:pointer; display:grid; gap:3px; padding:9px 10px; text-align:left; width:100%; }
.appendium-unit:hover,.appendium-unit:focus-visible { background:var(--panel); }
.appendium-unit[aria-current="true"] { box-shadow:inset 3px 0 var(--accent); }
.appendium-unit-title { font-size:14px; line-height:1.25; }
.appendium-unit-boundary { color:var(--muted); font-size:11px; line-height:1.25; }
.appendium-player { margin:12px 0; }
.appendium-player audio { max-width:100%; width:100%; }
.appendium-briefing { background:var(--panel); border:1px solid var(--line); border-radius:8px; font:12px/1.5 ui-monospace,SFMono-Regular,Consolas,monospace; margin:0; max-height:18rem; overflow:auto; padding:10px; white-space:pre-wrap; }

.reading-surface { border:0; border-radius:0; box-shadow:none; margin-left:30px; overflow:visible; }
.reading-surface-head { border:0; padding:0 0 15px; }
.reading-surface-head h2 { font-size:26px; }
.reading-toolbar { align-items:center; border-block:1px solid var(--line); display:flex; gap:12px; justify-content:space-between; margin-bottom:0; padding:10px 0; }
.reading-modes { background:color-mix(in srgb,var(--panel) 80%,var(--canvas)); border:1px solid var(--line); border-radius:999px; display:inline-flex; padding:3px; }
.reading-mode { background:transparent; border:0; border-radius:999px; color:var(--muted); font-size:13px; padding:7px 11px; }
.reading-mode[aria-pressed="true"] { background:var(--nav); color:var(--navink); }
.chapter-rail-toggle { background:transparent; border:1px solid var(--line); border-radius:999px; color:var(--ink); display:none; font-size:13px; padding:7px 11px; }
.readalong-state { color:var(--muted); font-size:12px; }
.follow-reading { background:transparent; border:1px solid var(--line); border-radius:999px; color:var(--ink); font-size:12px; padding:7px 11px; white-space:nowrap; }
.follow-reading:not(:disabled):hover { border-color:var(--accent); color:var(--accent); }
.book-reader[data-readalong="ready"] .readalong-state { color:var(--accent); }
.reading-status { font-size:12px; padding:11px 0; }
.content-frame-host { border:1px solid var(--line); border-radius:12px; height:calc(100dvh - 360px); min-height:470px; overflow:hidden; }
.book-content-frame { background:#fffdf9; }
.reader-note { font-size:12px; margin:14px 0 0; max-width:none; }
.reading-surface .reader-note { margin:14px 0 0; }
.book-reader[data-reader-mode="audio"] .reader-layout { grid-template-columns:minmax(0,780px); }
.book-reader[data-reader-mode="audio"] .reader-sidebar { border-right:0; padding-right:0; }
.book-reader[data-reader-mode="audio"] .reading-surface { display:none; }
.book-reader[data-reader-mode="text"] .reader-book-attribution { opacity:.68; }

.player-dock { align-items:center; gap:18px 28px; grid-template-columns:minmax(180px,.8fr) minmax(420px,1.8fr) auto; padding:11px 32px 12px; }
.player-controls { display:grid; gap:8px; grid-template-columns:auto auto auto minmax(120px,1fr) auto; }
.transport-button { border:0; color:var(--navink); cursor:pointer; min-height:38px; }
.transport-button--skip { background:transparent; font-size:13px; min-width:38px; }
.transport-button--play { background:var(--accent); border-radius:999px; font-weight:700; min-width:66px; padding:0 14px; }
.transport-button:not(:disabled):hover { filter:brightness(1.12); }
.player-scrubber { min-width:110px; }
.player-scrubber input { accent-color:var(--accent); cursor:pointer; width:100%; }
.player-time { color:color-mix(in srgb,var(--navink) 70%,transparent); font:11px ui-monospace,monospace; min-width:70px; text-align:right; }
#player { display:none; }
.player-settings { align-items:center; display:flex; gap:12px; justify-content:flex-end; }
.speed-control,.gap-control { align-items:center; display:flex; font-size:12px; gap:5px; }
.speed-control input { accent-color:var(--accent); cursor:pointer; min-width:92px; width:clamp(92px,9vw,148px); }
.speed-control input:disabled { cursor:default; opacity:.55; }
.speed-value { color:var(--navink); font-variant-numeric:tabular-nums; min-width:3.6ch; text-align:right; }
.gap-control select { background:var(--nav); border:1px solid color-mix(in srgb,var(--navink) 38%,transparent); border-radius:5px; color:var(--navink); padding:4px; }
.gap-control { color:color-mix(in srgb,var(--navink) 66%,transparent); }
.gap-control select:disabled { cursor:help; opacity:.7; }

@media (max-width:860px) {
  .player-dock { grid-template-columns:minmax(150px,.8fr) minmax(300px,1.8fr); }
  .player-settings { grid-column:1 / -1; justify-content:flex-start; }
}
@media (max-width:700px) {
  body { padding-bottom:12.8rem; }
  .app-shell { min-height:calc(100dvh - 12.8rem); }
  #app { min-height:calc(100dvh - 14.5rem); }
  .book-card { min-height:270px; }
  .book-card .book-cover { aspect-ratio:1; }
  .reader-heading { margin-top:12px; padding-bottom:18px; }
  .reader-layout { display:block; margin-top:16px; }
  .reader-sidebar { border:0; display:none; padding:18px 0 4px; }
  .reader-sidebar.is-open { display:block; }
  .reader-sidebar .book-narrator-flip { max-width:280px; }
  .reading-surface { margin-left:0; }
  .chapter-rail-toggle { display:inline-flex; }
  .reading-toolbar { gap:8px; }
  .reading-mode { font-size:12px; padding:7px 9px; }
  .content-frame-host { height:56dvh; min-height:360px; }
  .book-reader[data-reader-mode="audio"] .reader-sidebar { display:block; }
  .player-dock { bottom:max(45px,env(safe-area-inset-bottom)); gap:6px 12px; grid-template-columns:1fr; padding:8px 14px; }
  .player-track { grid-column:auto; padding-right:0; }
  .player-controls { grid-column:auto; grid-template-columns:auto auto auto minmax(80px,1fr) auto; }
  .player-settings { grid-column:auto; justify-content:flex-start; }
  .mobile-nav { z-index:5; }
}
@media (max-width:430px) {
  .book-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .book-card { min-height:225px; padding:11px; }
  .book-title { font-size:18px; }
  .book-creator { font-size:13px; }
  .book-meta { font-size:11px; }
  .reading-modes { width:100%; }
  .reading-mode { flex:1; padding-inline:5px; }
  .reading-toolbar { flex-wrap:wrap; }
  .chapter-rail-toggle { margin-left:auto; }
  .player-controls { grid-template-columns:auto auto auto 1fr; }
  .player-time { display:none; }
}

/* The sealed document has its own origin and deliberately owns its typography.
   This shell only supplies the quiet, app-coloured stage around it.  In
   particular, an iframe's initial/failed canvas must not flash a white page in
   the dark reader. */
.reading-status[hidden] { display:none; }
.content-frame-host {
  background:var(--panel);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--line) 60%,transparent);
  height:clamp(29rem,calc(100dvh - 340px),52rem);
  min-height:0;
}
.content-frame-host[data-content-state="loading"] { background:var(--panel); }
.content-frame-host[data-content-state="error"] { min-height:12rem; }
.book-content-frame {
  background:transparent;
  color-scheme:light dark;
}

@media (max-width:700px) {
  .content-frame-host { height:clamp(22.5rem,58dvh,40rem); }
}

/* Desktop reader composition ------------------------------------------------
   The catalogue may be deliberately compact.  A book is different: text is
   the primary object, so it earns the available desktop width.  The isolated
   document already draws the one book-like card; the host is deliberately
   unadorned so an iframe never reads as a second, nested panel. */
@media (min-width:701px) {
  #app.app--reader {
    max-width:1480px;
    padding:24px clamp(28px,4vw,72px) 58px;
  }

  .book-reader { max-width:none; }

  .back-link {
    font-size:14px;
    line-height:1.2;
  }

  .reader-heading {
    margin:14px 0 0;
    padding-bottom:17px;
  }

  .reader-heading > h1 {
    font-size:clamp(2rem,2.6vw,2.8rem);
    line-height:1.08;
    margin-bottom:5px;
  }

  .reader-layout {
    align-items:start;
    column-gap:36px;
    grid-template-columns:288px minmax(0,1fr);
    margin-top:18px;
  }

  .reader-sidebar {
    align-self:start;
    border-right:0;
    padding:0 0 28px;
  }

  .reader-book-attribution {
    align-items:start;
    border-bottom:1px solid var(--line);
    display:grid;
    gap:13px;
    margin-bottom:20px;
    padding-bottom:17px;
  }

  .reader-sidebar .book-narrator-flip {
    margin:0;
    max-width:none;
  }

  .reader-sidebar .book-narrator-flip .book-detail-cover,
  .reader-sidebar .book-narrator-flip .narrator-cover {
    aspect-ratio:1;
  }

  .reader-sidebar .book-facts {
    display:grid;
    gap:9px;
    grid-template-columns:1fr 1fr;
  }

  .reader-sidebar .book-facts div { min-width:0; }
  .reader-sidebar .book-facts dd { font-size:13px; overflow-wrap:anywhere; }

  .resume-panel {
    align-items:flex-start;
    flex-direction:column;
    font-size:13px;
    gap:9px;
    margin:0 0 17px;
    padding:10px 11px;
  }

  .resume-panel button { align-self:flex-start; padding:.5rem .8rem; }
  .reader-sidebar h2 { margin-bottom:9px; }
  .track-button { padding:10px 8px; }
  .track-name { font-size:14px; }
  .track-duration { font-size:11px; }

  .reading-surface {
    margin-left:0;
    min-width:0;
    width:100%;
  }

  .reading-surface-head { padding-bottom:12px; }
  .reading-surface-head h2 { font-size:22px; }
  .reading-toolbar { min-height:52px; }

  .content-frame-host {
    background:transparent;
    border:0;
    border-radius:0;
    box-shadow:none;
    height:clamp(34rem,70dvh,64rem);
    min-height:0;
    overflow:hidden;
  }

  .book-content-frame {
    background:transparent;
    border:0;
  }

  .reading-surface .reader-note { margin-top:12px; }
}

/* A portrait tablet has enough room for the text but not a useful permanent
   rail.  The existing Chapters button discloses it on demand. */
@media (min-width:701px) and (max-width:1023px) {
  #app.app--reader { padding-inline:clamp(22px,4vw,42px); }
  .reader-layout { display:block; }
  .reader-sidebar { display:none; margin:0 0 18px; }
  .reader-sidebar.is-open { display:block; }
  .reader-sidebar .book-narrator-flip { max-width:248px; }
  .chapter-rail-toggle { display:inline-flex; }
  .reading-toolbar { flex-wrap:wrap; }
  .content-frame-host { height:clamp(34rem,70dvh,58rem); }
}

/* One reader bar, rather than a title strip followed by a second toolbar.
   It controls the same persistent audio element as the dock below. */
.reader-control-bar {
  align-items:center;
  background:color-mix(in srgb,var(--strong) 86%,var(--panel));
  border:1px solid var(--line);
  border-radius:14px;
  display:flex;
  gap:9px;
  min-height:52px;
  padding:8px 10px;
}
.reader-control-bar .reading-modes { flex:0 0 auto; }
.reader-play {
  background:var(--accent);
  border:0;
  border-radius:999px;
  color:var(--navink);
  cursor:pointer;
  font-weight:700;
  min-height:34px;
  padding:0 14px;
}
.reader-play:disabled { cursor:default; opacity:.55; }
.reader-play:not(:disabled):hover { filter:brightness(1.1); }
.reader-control-bar .readalong-state {
  color:var(--accent);
  flex:1 0 100%;
  font-size:12px;
  order:10;
  padding:2px 2px 0;
}
.reader-control-bar .reload-text { font-size:12px; margin-left:auto; padding:.46rem .7rem; }

@media (max-width:700px) {
  .reader-control-bar { flex-wrap:wrap; gap:8px; padding:9px; }
  .reader-control-bar .reading-modes { order:1; }
  .reader-control-bar .reader-play { order:2; }
  .reader-control-bar .follow-reading { order:3; }
  .reader-control-bar .chapter-rail-toggle { order:4; }
  .reader-control-bar .reload-text { margin-left:auto; order:5; }
  .reader-control-bar .readalong-state { margin-left:0; order:6; }
}

@media (max-width:430px) {
  .reader-control-bar .reading-modes { flex:1 0 calc(100% - 74px); }
  .reader-control-bar .reader-play { min-width:64px; }
  .reader-control-bar .reload-text { margin-left:0; }
}

/* Browser-session entry.  This uses the same quiet paper/card language as
   the library rather than introducing a separate admin-looking surface. */
.sign-in { background:var(--panel); border:1px solid var(--line); border-radius:18px; box-shadow:0 16px 40px rgb(57 43 27 / 9%); margin:min(10vh,5rem) auto; max-width:27rem; padding:clamp(1.5rem,4vw,2.4rem); }.sign-in .eyebrow { color:var(--accent); font-weight:700; margin:0 0 .75rem; }.sign-in h2 { font:500 clamp(2rem,5vw,2.7rem)/1.08 Georgia,serif; letter-spacing:-.025em; margin:0; }.sign-in-intro { color:var(--muted); font:16px/1.5 Georgia,serif; margin:.8rem 0 1.65rem; }.sign-in-form { display:grid; gap:.55rem; }.sign-in-form label { font-size:13px; font-weight:650; margin-top:.5rem; }.sign-in-form input { background:var(--canvas); border:1px solid var(--line); border-radius:9px; color:var(--ink); font:16px ui-sans-serif,system-ui,sans-serif; min-height:44px; padding:.55rem .7rem; }.sign-in-form input:focus { border-color:var(--accent); outline:2px solid color-mix(in srgb,var(--accent) 38%,transparent); outline-offset:1px; }.sign-in-form button { background:var(--accent); border:0; border-radius:999px; color:var(--navink); font-weight:700; margin-top:1rem; min-height:43px; padding:.55rem 1rem; }.sign-in-form button:not(:disabled):hover { filter:brightness(1.08); }.sign-in-error { background:color-mix(in srgb,var(--accent) 13%,var(--panel)); border-left:3px solid var(--focus); color:var(--ink); font-size:13px; margin:.65rem 0 0; padding:.55rem .65rem; }
body.authentication-required { padding-bottom:0; }.authentication-required .app-shell { min-height:100dvh; }.authentication-required .sidebar { opacity:.72; }.authentication-required .nav-item { pointer-events:none; }