/* From Zero look (T-062, 15 Nov 2026): a "book" style laid over the novel project's pages without
   changing them (nginx adds this file and theme.js to each page). Everything is scoped to html.fzt, which
   theme.js sets; the pages' own style is what shows without it. Built against scripts/read_along.py's
   markup (from-zero repo): list page = main > h1, nav, #cont, ol > li; episode page = header + main#m. */
html.fzt{
  --bg:#f4efe4; --paper:#fbf8f1; --fg:#2a241c; --dim:#857a68; --line:#e4dccb;
  --acc:#a8322a; --acc-2:#c4553c; --acc-soft:#f6e3dc; --hi:#fff1c9; --bar:#e8e0cf; --ok:#4f7a4a;
  --shadow:0 1px 2px rgba(60,40,20,.06),0 6px 24px rgba(60,40,20,.08);
}
@media (prefers-color-scheme:dark){html.fzt{
  --bg:#14120f; --paper:#1d1a16; --fg:#ece4d6; --dim:#978c7a; --line:#2f2a23;
  --acc:#e0705f; --acc-2:#f08a6a; --acc-soft:#3a221d; --hi:#3b331f; --bar:#332d25; --ok:#8fbf86;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 28px rgba(0,0,0,.35);
}}
html.fzt body{background:var(--bg);color:var(--fg);-webkit-font-smoothing:antialiased}
html.fzt ::selection{background:var(--acc-soft)}

/* ---------- list page (目录.html) ---------- */
html.fzt body:not(:has(#m)) main{max-width:760px;padding:28px 16px 64px}
html.fzt body:not(:has(#m)) h1{font-size:0;margin:8px 0 18px;line-height:1.2}
html.fzt .fz-brand{display:block;font-size:clamp(34px,8vw,52px);font-weight:800;letter-spacing:.06em;color:var(--fg)}
html.fzt .fz-sub{display:block;margin-top:8px;font-size:16px;font-weight:500;letter-spacing:.2em;color:var(--dim)}
html.fzt body:not(:has(#m)) main>nav{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 22px;font-size:15px}
html.fzt body:not(:has(#m)) main>nav>*{padding:6px 14px;border-radius:999px;border:1px solid var(--line);background:var(--paper);color:var(--dim);text-decoration:none;line-height:1.4}
html.fzt body:not(:has(#m)) main>nav>a:hover{border-color:var(--acc);color:var(--acc)}
html.fzt body:not(:has(#m)) main>nav>:not(a){background:var(--acc);border-color:var(--acc);color:#fff}
html.fzt #cont{margin:0 0 26px}
html.fzt #cont .go{display:flex;flex-direction:column;gap:6px;padding:18px 22px;border-radius:14px;font-size:19px;font-weight:600;
  background:linear-gradient(135deg,var(--acc),var(--acc-2));color:#fff;box-shadow:var(--shadow);transition:transform .15s}
html.fzt #cont .go:hover{transform:translateY(-1px)}
html.fzt #cont .go::before{content:"▶  继续收听";font-size:12px;font-weight:600;letter-spacing:.18em;opacity:.85}
html.fzt #cont .fz-cbar{display:block;height:4px;border-radius:2px;background:rgba(255,255,255,.3);overflow:hidden;margin-top:6px}
html.fzt #cont .fz-cbar i{display:block;height:100%;background:#fff}
html.fzt body:not(:has(#m)) ol{background:var(--paper);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);margin:0;overflow:hidden;counter-reset:none}
html.fzt body:not(:has(#m)) li{gap:14px;padding:12px 18px;border-bottom:1px solid var(--line);transition:background .15s}
html.fzt body:not(:has(#m)) li:last-child{border-bottom:0}
html.fzt body:not(:has(#m)) li:hover{background:var(--acc-soft)}
html.fzt body:not(:has(#m)) li a{display:flex;align-items:baseline;gap:14px;font-size:18px;line-height:1.5}
html.fzt .fz-n{flex:none;width:2.6em;font:600 13px/1 ui-monospace,"Cascadia Mono",Consolas,monospace;color:var(--dim);text-align:right}
html.fzt body:not(:has(#m)) li .bar{width:72px;height:4px;background:var(--bar)}
html.fzt body:not(:has(#m)) li .st{width:56px;font:500 12.5px/1 ui-monospace,"Cascadia Mono",Consolas,monospace;color:var(--dim)}
html.fzt li.fz-done a{color:var(--dim)}
html.fzt li.fz-done .bar i{background:var(--ok)!important}
html.fzt li.fz-done .st{color:var(--ok)}
html.fzt li.fz-now{background:var(--acc-soft)}
html.fzt li.fz-now .fz-n{color:var(--acc)}
html.fzt body:not(:has(#m)) main>.note{margin-top:18px;text-align:center;font-size:13px}
@media (max-width:520px){
  html.fzt body:not(:has(#m)) li{padding:11px 12px;gap:10px}
  html.fzt body:not(:has(#m)) li a{font-size:16.5px;gap:10px}
  html.fzt .fz-n{width:2.2em}
  html.fzt body:not(:has(#m)) li .bar{width:44px}
  html.fzt body:not(:has(#m)) li .st{width:44px}
}

/* ---------- episode page ---------- */
html.fzt body:has(#m) header{background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);padding:12px 16px}
html.fzt body:has(#m) header>*{max-width:720px;margin-left:auto;margin-right:auto}
html.fzt .fz-ep{display:block;max-width:720px;margin:0 auto 2px;font-size:12px;font-weight:600;letter-spacing:.2em;color:var(--acc)}
html.fzt body:has(#m) header h1{font-size:22px;margin:0 auto 10px;letter-spacing:.04em}
html.fzt body:has(#m) audio{display:block;height:44px;border-radius:999px}
html.fzt body:has(#m) header nav{gap:8px;margin-top:10px;font-size:13.5px}
html.fzt body:has(#m) header nav a{padding:4px 12px;border-radius:999px;border:1px solid var(--line);background:var(--paper);color:var(--fg);text-decoration:none}
html.fzt body:has(#m) header nav a:hover{border-color:var(--acc);color:var(--acc)}
html.fzt body:has(#m) header nav a:first-child{background:var(--acc);border-color:var(--acc);color:#fff}
html.fzt body:has(#m) header label{display:inline-flex;align-items:center;gap:6px;margin-left:4px;cursor:pointer;color:var(--dim)}
html.fzt body:has(#m) header input[type=checkbox]{appearance:none;-webkit-appearance:none;width:30px;height:18px;border-radius:9px;background:var(--bar);position:relative;margin:0;cursor:pointer;transition:background .2s}
html.fzt body:has(#m) header input[type=checkbox]::after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.3);transition:transform .2s}
html.fzt body:has(#m) header input[type=checkbox]:checked{background:var(--acc)}
html.fzt body:has(#m) header input[type=checkbox]:checked::after{transform:translateX(12px)}
html.fzt body:has(#m) header input[type=checkbox]:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
html.fzt #note{flex-basis:100%;font-size:12.5px}
html.fzt #note:empty{display:none}
html.fzt #m{background:var(--paper);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);margin:22px auto 50vh;padding:12px 28px 32px;font-size:18.5px;line-height:2}
html.fzt #m h2{font-size:15px;letter-spacing:.24em;color:var(--acc);margin:2.2em 0 .8em;display:flex;align-items:center;gap:12px}
html.fzt #m h2::after{content:"";flex:1;height:1px;background:var(--line)}
html.fzt #m p{margin:.3em -12px;padding:4px 12px 4px 14px;border-left:3px solid transparent;border-radius:0 8px 8px 0;text-indent:0}
html.fzt #m p:hover{background:color-mix(in srgb,var(--hi) 45%,transparent)}
html.fzt #m p.on{background:var(--hi);border-left-color:var(--acc)}
html.fzt #m .who{font-weight:700;color:var(--acc)}
/* portraits (pixel art, 80×80, scaled without smoothing) */
html.fzt .fz-face{float:left;width:56px;height:56px;margin:2px 12px 4px 0;image-rendering:pixelated;border-radius:10px;
  background:var(--bar);border:1px solid var(--line);shape-outside:margin-box}
html.fzt #m p.fz-has-face{min-height:60px;margin-top:.9em}
html.fzt .fz-full,html.fzt .fz-now-face img.fz-full{object-fit:contain;padding:3px}
html.fzt #m p::after{content:"";display:table;clear:both}
html.fzt #m p.fz-narr{color:color-mix(in srgb,var(--fg) 88%,var(--dim))}
html.fzt body:has(#m) header{position:sticky}
html.fzt .fz-now-face{position:absolute;right:max(16px,calc(50% - 360px - 96px));top:12px;display:flex;flex-direction:column;align-items:center;gap:4px;
  opacity:0;transform:translateY(-4px);transition:opacity .25s,transform .25s;pointer-events:none}
html.fzt .fz-now-face.on{opacity:1;transform:none}
html.fzt .fz-now-face img{width:80px;height:80px;image-rendering:pixelated;border-radius:12px;background:var(--paper);border:1px solid var(--line);box-shadow:var(--shadow)}
html.fzt .fz-now-face span{font-size:12px;font-weight:700;color:var(--acc);letter-spacing:.08em}
@media (max-width:900px){
  html.fzt body:has(#m) header{padding-right:84px}
  html.fzt .fz-now-face{right:10px;top:10px}
  html.fzt .fz-now-face img{width:60px;height:60px}
}
@media (max-width:600px){
  html.fzt .fz-face{width:44px;height:44px;margin-right:10px}
  html.fzt #m p.fz-has-face{min-height:48px}
  html.fzt body:has(#m) header{padding:10px 76px 10px 12px}
  html.fzt body:has(#m) header h1{font-size:19px;margin-bottom:8px}
  html.fzt #m{margin:12px 8px 50vh;padding:6px 16px 24px;font-size:17.5px;border-radius:12px}
  html.fzt #m p{margin:.25em -8px;padding:3px 8px 3px 10px}
}
@media (prefers-reduced-motion:reduce){html.fzt *{transition:none!important}}