/* Frozen copy of styles.css at 4d9101b for the home page. The reader uses /styles.css. */
@font-face{font-family:Geist;src:url(/fonts/geist.woff2) format("woff2");font-weight:300 700;font-display:swap}
@font-face{font-family:"Geist Mono";src:url(/fonts/geist-mono.woff2) format("woff2");font-weight:400 500;font-display:swap}
@font-face{font-family:Newsreader;src:url(/fonts/newsreader.woff2) format("woff2");font-weight:200 800;font-display:swap}

:root{
  --bg:#09090b;--ink:#fafafa;--ink2:#a1a1aa;--ink3:#71717a;--line:rgba(255,255,255,.08);--line2:rgba(255,255,255,.14);--surf:#111113;--surf2:#17171a;
  --accent:#7dd3fc;--mood:#7dd3fc;
  --glow:#fde68a;--cold:#bae6fd;--fire:#fb923c;--hot:#fca5a5;--love:#f9a8d4;--good:#86efac;--bad:#f87171;--up:#fff7e0;--down:#6b6b74;--q:#e9d5ff;
  --sans:Geist,ui-sans-serif,system-ui,sans-serif;--mono:"Geist Mono",ui-monospace,monospace;--serif:Newsreader,"Iowan Old Style",Georgia,serif;
  color-scheme:dark
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased;overflow:hidden}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
a{color:inherit;text-decoration:none}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- the stage every page sits on ---------- */
.stage{position:fixed;inset:0;display:flex;flex-direction:column}
.stage::before{content:"";position:absolute;inset:-20%;background:radial-gradient(60% 50% at 50% 0%,color-mix(in srgb,var(--mood) 14%,transparent),transparent 70%);transition:background 2.5s ease;pointer-events:none;z-index:0}
.amb{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
.veil{position:absolute;inset:0;pointer-events:none;z-index:5;opacity:0;transition:opacity 1.2s ease}
.veil.dim{background:radial-gradient(ellipse at center,transparent 15%,rgba(0,0,0,.6))}
.veil.lift{background:radial-gradient(ellipse at 50% 35%,rgba(255,226,160,.22),transparent 70%)}
.veil.flash{background:rgba(235,240,255,.85);transition:none}
.veil.beat{background:radial-gradient(ellipse at center,transparent 45%,color-mix(in srgb,var(--bad) 30%,transparent))}
.fx-dim-on .veil.dim{opacity:1;transition:opacity .35s ease}
.fx-lift-on .veil.lift{opacity:1;transition:opacity .35s ease}
.veil.heat{opacity:var(--heat,0);background:radial-gradient(ellipse at center,transparent 30%,color-mix(in srgb,var(--mood) 18%,rgba(0,0,0,.55)));transition:opacity 2.2s ease,background 2.2s ease}
[data-mode=light] .veil.heat,.home .veil.heat{background:radial-gradient(ellipse at center,transparent 35%,color-mix(in srgb,var(--mood) 25%,rgba(60,30,10,.22)))}
.veil.wound{background:radial-gradient(ellipse at center,transparent 40%,rgba(160,20,20,.4))}
.fx-wound-on .veil.wound{animation:lub .9s ease-out}
.fx-wound{color:var(--bad);font-weight:600}
.fx-wound.on{animation:arrive .3s both,thud .45s cubic-bezier(.36,.07,.19,.97)}
.fx-lift-on .veil.lift{opacity:1}
.fx-flash-on .veil.flash{animation:bolt .7s ease-out}
.fx-beat-on .veil.beat{animation:lub 1.1s ease-out}
.fx-shake .shakes{animation:shake .45s cubic-bezier(.36,.07,.19,.97)}
.fx-shake-big .shakes{animation:shake2 .5s cubic-bezier(.36,.07,.19,.97)}
@keyframes bolt{0%{opacity:0}6%{opacity:1}14%{opacity:.1}22%{opacity:.75}100%{opacity:0}}
@keyframes lub{0%,100%{opacity:0}12%{opacity:1}26%{opacity:.25}40%{opacity:.8}}
@keyframes shake{10%,90%{transform:translate(-1px,0)}20%,80%{transform:translate(2px,1px)}30%,50%,70%{transform:translate(-3px,-1px)}40%,60%{transform:translate(3px,1px)}}
@keyframes shake2{10%,90%{transform:translate(-2px,1px)}20%,80%{transform:translate(4px,-1px)}30%,50%,70%{transform:translate(-6px,2px)}40%,60%{transform:translate(6px,-2px)}}

/* ---------- words ---------- */
.w{display:inline-block;opacity:0;white-space:pre;--d:.6s}
.w.on{opacity:1;animation:arrive var(--d) cubic-bezier(.25,.6,.3,1) both}
.w.done{opacity:1;animation:none}
@keyframes arrive{from{opacity:0;filter:blur(2px)}to{opacity:1;filter:none}}
.q{color:hsl(var(--spk-h,265) var(--spk-s,60%) var(--spk-l,40%))}
.hot{color:color-mix(in srgb,var(--hot) 35%,var(--ink))}
.trail:last-child,.w.trail.fx-dark{opacity:.7}
.fx-emph{font-weight:650}
.fx-shout{font-weight:700;color:var(--hot)}
.fx-shout.on{animation:shout .6s cubic-bezier(.2,.9,.25,1.3) both}
@keyframes shout{0%{opacity:0;transform:scale(1.9)}55%{opacity:1;transform:scale(.94)}100%{transform:none}}
.fx-whisper{color:var(--ink2);opacity:.0}
.fx-whisper.on{opacity:.62;animation:hush 1.2s ease both}
.fx-whisper.done{opacity:.62}
@keyframes hush{from{opacity:0;filter:blur(3px)}to{opacity:.62;filter:none}}
.fx-sound{font-weight:650;color:var(--fire)}
.fx-sound.on{animation:thud .5s cubic-bezier(.36,.07,.19,.97) both}
@keyframes thud{0%{opacity:0;transform:scale(1.5)}30%{opacity:1;transform:scale(1) translateX(-3px)}45%{transform:translateX(3px)}60%{transform:translateX(-2px)}75%{transform:translateX(1px)}100%{transform:none}}
.fx-tremble.on{animation:arrive .4s both,tremble .09s linear .4s 18}
@keyframes tremble{0%{transform:translate(0,0)}25%{transform:translate(.6px,-.5px)}50%{transform:translate(-.6px,.4px)}75%{transform:translate(.4px,.6px)}}
.fx-fire{color:var(--fire)}
.fx-fire.on{animation:arrive .5s both,flicker 1.6s ease-in-out .5s 3}
@keyframes flicker{0%,100%{text-shadow:0 0 6px color-mix(in srgb,var(--fire) 60%,transparent)}50%{text-shadow:0 0 14px color-mix(in srgb,var(--fire) 90%,transparent),0 -2px 18px rgba(255,80,20,.35)}}
.fx-cold{color:var(--cold);text-shadow:0 0 10px color-mix(in srgb,var(--cold) 50%,transparent)}
.fx-cold.on{animation:frost 1.2s ease both}
@keyframes frost{from{opacity:0;filter:blur(6px) brightness(2)}to{opacity:1;filter:none}}
.fx-glow{color:var(--glow);text-shadow:0 0 14px color-mix(in srgb,var(--glow) 55%,transparent)}
.fx-glow.on{animation:bloom 1.4s ease both}
@keyframes bloom{0%{opacity:0;text-shadow:0 0 0 transparent}40%{opacity:1;text-shadow:0 0 26px var(--glow)}100%{text-shadow:0 0 14px color-mix(in srgb,var(--glow) 55%,transparent)}}
.fx-dark{color:var(--down)}
.fx-dark.on{animation:sink 1.6s ease both}
@keyframes sink{0%{opacity:0;filter:blur(4px)}50%{opacity:1;color:var(--ink)}100%{opacity:1}}
.fx-slow.on{animation:arrive 1.4s ease both}
.fx-fast.on{animation:snap .16s ease-out both}
@keyframes snap{from{opacity:0}to{opacity:1}}
.fx-heart{color:var(--bad)}
.fx-heart.on{animation:arrive .4s both,heart .9s ease .2s 2}
@keyframes heart{0%,100%{transform:scale(1)}15%{transform:scale(1.22)}30%{transform:scale(1)}45%{transform:scale(1.12)}}
.fx-love{color:var(--love);text-shadow:0 0 12px color-mix(in srgb,var(--love) 40%,transparent)}
.fx-flash{color:#fff;text-shadow:0 0 16px #c7d2fe}
.fx-num,.fx-money{font-variant-numeric:tabular-nums;font-weight:650;color:var(--accent)}
.fx-money{color:var(--good)}
.fx-num.on,.fx-money.on{animation:arrive .3s both,pop .5s ease .1s}
@keyframes pop{50%{transform:scale(1.18)}}
.fx-you{box-shadow:inset 0 -.32em color-mix(in srgb,var(--accent) 22%,transparent)}
.fx-pain{color:var(--bad);text-decoration:underline wavy color-mix(in srgb,var(--bad) 55%,transparent);text-underline-offset:.22em;text-decoration-thickness:1px}
.fx-gain{color:var(--good)}
.fx-stress{font-weight:620;color:var(--ink)}
.fx-stress.why-end:not(.fx-peak){font-weight:inherit}
.fx-stress.on{animation:arrive .9s ease both}
.fx-peak{font-weight:680;color:color-mix(in srgb,var(--mood) 30%,var(--ink))}
.fx-peak.on{animation:land 1.6s cubic-bezier(.2,.7,.2,1) both}
@keyframes land{0%{opacity:0;filter:blur(6px);text-shadow:none}35%{opacity:1;filter:none;text-shadow:0 0 22px color-mix(in srgb,var(--mood) 70%,transparent)}100%{text-shadow:0 0 0 transparent}}
@keyframes beat{0%{opacity:0;filter:blur(3px)}50%{opacity:1;text-shadow:0 0 10px color-mix(in srgb,var(--ink) 30%,transparent)}100%{filter:none;text-shadow:none}}
.fx-up.fx-stress{color:var(--up)}
.fx-up.fx-stress.on{animation:rise 1s ease both}
@keyframes rise{from{opacity:0;filter:blur(4px)}to{opacity:1;filter:none}}
.fx-down.fx-stress{color:var(--down)}
.fx-down.fx-stress.on{animation:fall 1.1s ease both}
@keyframes fall{from{opacity:0;filter:blur(4px)}60%{opacity:1}to{opacity:.85;filter:none}}
.fx-omen{letter-spacing:.03em;color:color-mix(in srgb,var(--mood) 55%,var(--ink))}
.fx-omen.on{animation:omen 1.6s ease both}
@keyframes omen{0%{opacity:0;filter:blur(8px)}100%{opacity:1;filter:none}}
.cta{font-weight:600;color:var(--accent)}

/* level: subtle keeps color, drops motion; off is plain type that still arrives in time */
[data-effects=subtle] .w.on{animation:arrive .35s ease both!important}
[data-effects=off] .w.on{animation:none!important}
[data-effects=off] .w{color:inherit!important;text-shadow:none!important;box-shadow:none!important;text-decoration:none!important;font-weight:inherit!important;letter-spacing:normal!important}
[data-effects=off] .w.fx-whisper.on{opacity:1}
@media (prefers-reduced-motion:reduce){.w.on{animation:none!important}.shakes{animation:none!important}}

/* ---------- home: soft paper, the product reading to you ---------- */
.home{--bg:#f6f2ea;--ink:#1f1a14;--ink2:#5c5348;--ink3:#948a7d;--line:rgba(60,40,15,.08);--line2:rgba(60,40,15,.14);--surf:#fffdf9;--surf2:#efe9de;
  --accent:#2e6a88;--glow:#b7791f;--cold:#2b6cb0;--fire:#c2410c;--hot:#b42318;--love:#be185d;--good:#3f7d4e;--bad:#b42318;--up:#8a4b0f;--down:#aaa093;--spk-s:55%;--spk-l:36%;--mono:var(--sans);color-scheme:light}
.home .stage::before{opacity:.55}
.top{position:relative;z-index:10;display:flex;align-items:center;gap:16px;padding:16px max(16px,calc(50vw - 520px))}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--serif);font-size:20px;letter-spacing:-.01em;color:var(--ink)}
.brand svg{width:24px;height:24px}
.top .sp{flex:1}
.by{font-size:13px;color:var(--ink3)}
.by:hover{color:var(--ink)}
.chipbtn{font-size:14px;color:var(--ink2);padding:7px 14px;border-radius:999px;background:var(--surf2)}
.chipbtn:hover{color:var(--ink)}
.home .screen{position:relative;z-index:1;flex:1;overflow-y:auto}
.home .col{width:min(680px,100%);margin:0 auto;padding:28px 20px 48px}
.ai{display:grid;grid-template-columns:30px minmax(0,1fr);gap:16px}
.av{width:30px;height:30px;border-radius:9px;background:var(--surf);box-shadow:0 0 0 1px var(--line);display:grid;place-items:center}
.av svg{width:18px;height:18px}
.hello{display:flex;align-items:center;gap:10px;margin:6px 0 28px;color:var(--ink3);font-size:13px}
.dot{width:7px;height:7px;border-radius:50%;background:var(--good);animation:breathe 2.6s ease-in-out infinite}
@keyframes breathe{50%{opacity:.35}}
.ai .body{font-family:var(--serif);font-size:21px;line-height:1.68;color:var(--ink)}
.ai .body p{margin:0 0 18px}
.ai .body p.lead{font-size:clamp(34px,6vw,48px);line-height:1.12;letter-spacing:-.015em;margin-bottom:26px}
.step{display:flex;align-items:center;gap:14px;color:var(--ink3);font-family:var(--sans);font-size:12px;letter-spacing:.16em;text-transform:uppercase;margin:38px 0 16px}
.step::after{content:"";flex:1;height:1px;background:var(--line2);transform-origin:left;animation:draw 1.4s ease both}
@keyframes draw{from{transform:scaleX(0)}}
.caret{display:inline-block;width:2px;height:1.05em;background:var(--accent);vertical-align:-.15em;margin-left:2px;border-radius:1px;animation:blink 1.1s ease-in-out infinite}
@keyframes blink{50%{opacity:.15}}
#library{margin-top:40px}
#library[hidden]{display:none}
.shelf-h{font-family:var(--serif);font-size:26px;letter-spacing:-.01em;margin:0 0 4px;opacity:0;transition:opacity .6s ease}
.shelf-s{color:var(--ink3);font-size:14px;margin:0 0 22px;opacity:0;transition:opacity .6s ease .1s}
.lib-in .shelf-h,.lib-in .shelf-s{opacity:1}
.reads{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:28px 22px}
.read{display:grid;gap:10px;opacity:0;transform:translateY(10px);transition:opacity .6s ease,transform .6s ease}
.read.in{opacity:1;transform:none}
.cover{position:relative;aspect-ratio:2/3;border-radius:3px 8px 8px 3px;background:var(--cv0);color:var(--cv2);padding:18px 14px 14px 20px;display:flex;flex-direction:column;box-shadow:0 1px 2px rgba(40,25,10,.18),0 10px 28px -8px rgba(40,25,10,.35);transition:transform .3s ease,box-shadow .3s ease;overflow:hidden}
.cover::before{content:"";position:absolute;inset:0 auto 0 0;width:9px;background:linear-gradient(90deg,rgba(0,0,0,.28),rgba(255,255,255,.07) 60%,transparent)}
.read:hover .cover{transform:translateY(-4px);box-shadow:0 1px 2px rgba(40,25,10,.18),0 18px 34px -10px rgba(40,25,10,.4)}
.cover .ck{font-family:var(--sans);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--cv1)}
.cover .ct{font-family:var(--serif);font-size:20px;line-height:1.12;margin:auto 0;padding-top:.6em;border-top:1px solid color-mix(in srgb,var(--cv1) 70%,transparent)}
.cover .ca{font-family:var(--serif);font-size:12.5px;opacity:.8}
.read .m{display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px;font-size:12.5px;color:var(--ink3);line-height:1.4}
.read .m i{width:7px;height:7px;border-radius:50%;background:var(--mc,var(--ink3))}
.read .m b{font-weight:500;color:var(--ink2);text-transform:capitalize}
.read .pr{height:2px;background:var(--line2);border-radius:1px;overflow:hidden}
.read .pr i{display:block;height:100%;width:var(--p);background:var(--ink2)}
.dock{position:relative;z-index:10;padding:10px max(16px,calc(50vw - 520px)) max(12px,env(safe-area-inset-bottom));background:linear-gradient(to top,var(--bg) 70%,color-mix(in srgb,var(--bg) 0%,transparent))}
.links{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:4px 0 10px;mask-image:linear-gradient(90deg,#000 92%,transparent)}
.links::-webkit-scrollbar{display:none}
.links a{flex:none;font-size:14px;background:var(--surf);border-radius:999px;padding:8px 15px;color:var(--ink2);white-space:nowrap;box-shadow:0 1px 2px rgba(40,25,10,.08),0 0 0 1px var(--line)}
.links a b{font-family:var(--serif);font-weight:400;font-size:15px;color:var(--ink)}
.links a:hover{box-shadow:0 1px 2px rgba(40,25,10,.08),0 0 0 1px var(--ink3)}
.ctrl{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--ink3)}
.ctrl .sp{flex:1}
.ctrl button{color:var(--ink2);border-radius:999px;padding:5px 12px;background:var(--surf2)}
.ctrl button:hover{color:var(--ink)}
.pace{display:inline-flex;align-items:center;gap:10px}
.pace input{width:120px;accent-color:var(--ink2)}

/* ---------- reader: Kindle, themed with the kit's tokens ---------- */
@font-face{font-family:Fraunces;src:url(/fonts/fraunces.woff2) format("woff2");font-weight:300 800;font-display:swap}
@font-face{font-family:"Source Serif 4";src:url(/fonts/source-serif-4.woff2) format("woff2");font-weight:300 700;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url(/fonts/instrument-sans.woff2) format("woff2");font-weight:400 700;font-display:swap}
/* Kindle's own three themes, written in the kit's token names so every scheme works the same way */
:root:where([data-scheme=paper]){--ui-bg:#fbfaf7;--ui-surface:#ffffff;--ui-surface-2:#f2f0ea;--ui-ink:#1c1917;--ui-ink-2:#57534e;--ui-ink-3:#857e77;--ui-line:rgba(0,0,0,.08);--ui-line-2:rgba(0,0,0,.15);--ui-accent:#0f5f86}
:root:where([data-scheme=paper][data-mode=dark]){--ui-bg:#141414;--ui-surface:#1c1c1c;--ui-surface-2:#242424;--ui-ink:#e8e6e3;--ui-ink-2:#aaa49f;--ui-ink-3:#857f7a;--ui-line:rgba(255,255,255,.08);--ui-line-2:rgba(255,255,255,.15);--ui-accent:#7dd3fc}
:root:where([data-scheme=sepia]){--ui-bg:#f3ead6;--ui-surface:#faf3e3;--ui-surface-2:#ece0c6;--ui-ink:#3a2e22;--ui-ink-2:#6b5a47;--ui-ink-3:#93826c;--ui-line:rgba(60,40,10,.1);--ui-line-2:rgba(60,40,10,.18);--ui-accent:#8a4b16}
:root:where([data-scheme=sepia][data-mode=dark]){--ui-bg:#1c1712;--ui-surface:#241e17;--ui-surface-2:#2d251c;--ui-ink:#eadcc3;--ui-ink-2:#bba98f;--ui-ink-3:#968670;--ui-line:rgba(234,220,195,.09);--ui-line-2:rgba(234,220,195,.16);--ui-accent:#e0a96d}
:root:where([data-scheme=night]){--ui-bg:#f7f7f5;--ui-surface:#fff;--ui-surface-2:#efefec;--ui-ink:#111;--ui-ink-2:#454545;--ui-ink-3:#6e6e6e;--ui-line:rgba(0,0,0,.09);--ui-line-2:rgba(0,0,0,.16);--ui-accent:#111}
:root:where([data-scheme=night][data-mode=dark]){--ui-bg:#000;--ui-surface:#111;--ui-surface-2:#1a1a1a;--ui-ink:#d4d4d4;--ui-ink-2:#9a9a9a;--ui-ink-3:#777;--ui-line:rgba(255,255,255,.09);--ui-line-2:rgba(255,255,255,.16);--ui-accent:#e5e5e5}
.reader{--mono:var(--sans);--bg:var(--ui-bg);--ink:var(--ui-ink);--ink2:var(--ui-ink-2);--ink3:var(--ui-ink-3);--line:var(--ui-line);--line2:var(--ui-line-2);--surf:var(--ui-surface);--surf2:var(--ui-surface-2);--accent:var(--ui-accent);
  --pink:var(--ui-ink);--pink2:var(--ui-ink-3);--pline:var(--ui-line);
  --glow:#b7791f;--cold:#2b6cb0;--fire:#c2410c;--hot:#b42318;--love:#be185d;--good:#15803d;--bad:#b91c1c;--up:#8a4b0f;--down:#a8a29e;--spk-s:55%;--spk-l:36%}
[data-mode=dark] .reader{--glow:#fde68a;--cold:#bae6fd;--fire:#fb923c;--hot:#fca5a5;--love:#f9a8d4;--good:#86efac;--bad:#f87171;--up:#fff4d6;--down:#6b6b74;--spk-s:70%;--spk-l:74%}
.reader .stage{background:var(--bg);color:var(--pink)}
[data-mode=light] .reader .stage::before{opacity:.45}
.kbar{position:absolute;left:0;right:0;z-index:20;display:flex;align-items:center;gap:14px;padding:12px max(16px,calc(50vw - 420px));background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(8px);transition:transform .25s ease,opacity .25s ease;font-size:14px}
.kbar.t{top:0;border-bottom:1px solid var(--pline)}
.kbar.b{bottom:0;border-top:1px solid var(--pline);flex-wrap:wrap;padding-bottom:max(12px,env(safe-area-inset-bottom))}
.chrome-off .kbar.t{transform:translateY(-100%);opacity:0;pointer-events:none}
.chrome-off .kbar.b{transform:translateY(100%);opacity:0;pointer-events:none}
.kbar .ttl{flex:1;text-align:center;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink)}
.kbar .ttl small{color:var(--ink3);font-weight:400}
.ib{display:inline-flex;align-items:center;gap:6px;color:var(--ink2);border-radius:8px;padding:6px 8px;font-size:14px}
.ib:hover{color:var(--ink);background:var(--line)}
.ib svg{width:18px;height:18px}
.ib.aa{font-family:var(--serif);font-size:18px;padding:3px 10px}
.scrub{flex:1 1 100%;display:flex;align-items:center;gap:12px;font-family:var(--mono);font-size:12px;color:var(--ink3)}
.scrub input{flex:1;accent-color:var(--ink2)}
.playrow{flex:1 1 100%;display:flex;align-items:center;gap:12px;font-size:13px;color:var(--ink2)}
.playrow .sp{flex:1}
.play{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--ink);color:var(--bg)}
.play svg{width:16px;height:16px}
.wpm{font-family:var(--mono);font-size:12px;min-width:64px;text-align:center}
.page-wrap{position:relative;z-index:1;flex:1;display:flex;align-items:center;justify-content:center;padding:52px 16px 46px}
.viewport{position:relative;overflow:hidden;width:var(--pw,600px);height:var(--ph,600px)}
.flow{height:100%;column-fill:auto;transition:transform .42s cubic-bezier(.3,.7,.2,1);font-family:var(--serif);font-size:var(--fs,20px);line-height:1.62;color:var(--pink);hyphens:auto;-webkit-hyphens:auto;text-align:justify;font-variant-numeric:oldstyle-nums}
.reader[data-font=sans] .flow{font-family:var(--sans);line-height:1.6}
.flow.notrans{transition:none}
.flow p{margin:0;text-indent:1.5em;orphans:2;widows:2}
.flow p.first,.flow h2+p,.flow .tp+p{text-indent:0}
.flow[data-kind=pitch] p,.flow[data-kind=prose] p.block{text-indent:0;margin:0 0 .9em;text-align:left}
.flow h2{break-before:column;font-weight:500;font-size:1.25em;line-height:1.3;text-align:center;margin:2.2em 0 1.6em;text-indent:0;letter-spacing:.01em}
.flow h2:first-child{break-before:auto}
.flow h2 small{display:block;font-family:var(--sans);font-size:.5em;letter-spacing:.18em;text-transform:uppercase;color:var(--pink2);margin-bottom:.9em}
.tp{text-align:center;margin:1.2em 0 2.4em;text-indent:0}
.tp .bt{font-size:1.9em;line-height:1.12;letter-spacing:-.01em;margin:0 0 .35em}
.tp .ba{font-family:var(--sans);font-size:.62em;letter-spacing:.2em;text-transform:uppercase;color:var(--pink2)}
.tp .rule{width:40px;height:1px;background:var(--pink2);opacity:.5;margin:1.2em auto}
.flow .drop::first-letter{float:left;font-size:3.3em;line-height:.86;padding:.06em .08em 0 0}
.status{position:absolute;left:0;right:0;bottom:0;z-index:2;display:flex;justify-content:space-between;padding:0 max(18px,calc(50vw - 330px)) max(14px,env(safe-area-inset-bottom));font-size:11.5px;color:var(--ink3);font-family:var(--sans);pointer-events:none}
.tap{position:absolute;top:0;bottom:0;z-index:3;width:28%}
.tap.l{left:0}.tap.r{right:0}
.sheet{position:absolute;z-index:30;right:max(12px,calc(50vw - 420px));top:56px;width:min(340px,calc(100vw - 24px));background:var(--surf);color:var(--ink);border:1px solid var(--line2);border-radius:14px;box-shadow:0 20px 50px rgba(0,0,0,.35);padding:16px;display:grid;gap:14px;font-size:13.5px}
.sheet[hidden]{display:none}
.sheet h3{margin:0;font-size:11px;font-family:var(--mono);text-transform:uppercase;letter-spacing:.1em;color:var(--ink3);font-weight:500}
.seg{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;border:1px solid var(--line2);border-radius:10px;overflow:hidden}
.seg button{padding:8px 6px;font-size:13px;color:var(--ink2);border-left:1px solid var(--line2)}
.seg button:first-child{border-left:0}
.seg button[aria-pressed=true]{background:var(--ink);color:var(--bg)}
.seg .sw{display:inline-block;width:14px;height:14px;border-radius:50%;vertical-align:-2px;margin-right:6px;border:1px solid var(--line2)}
.sizes{display:flex;align-items:center;gap:10px}
.sizes button{width:40px;height:34px;border:1px solid var(--line2);border-radius:8px;font-family:var(--serif)}
.sizes span{flex:1;height:4px;border-radius:2px;background:var(--line2);position:relative}
.sizes span i{position:absolute;inset:0 auto 0 0;background:var(--ink2);border-radius:2px}
.xray{position:absolute;z-index:30;top:0;bottom:0;right:0;width:min(400px,100vw);background:var(--surf);color:var(--ink);border-left:1px solid var(--line2);box-shadow:-20px 0 60px rgba(0,0,0,.3);overflow-y:auto;padding:18px 18px 40px;transform:translateX(100%);transition:transform .3s ease;font-size:13.5px}
.xray:not(.open){visibility:hidden;transition:transform .3s ease,visibility 0s .3s}
.xray.open{transform:none}
.xray header{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.xray header b{font-size:16px;font-weight:600;letter-spacing:-.01em}
.xray .sub{color:var(--ink3);font-size:12.5px;margin:0 0 16px;line-height:1.5}
.xr{border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin:0 0 10px;background:var(--surf2)}
.xr h3{margin:0 0 8px;font-size:11px;font-family:var(--mono);text-transform:uppercase;letter-spacing:.1em;color:var(--ink3);font-weight:500;display:flex;justify-content:space-between}
.xr .big{font-size:18px;font-weight:550;letter-spacing:-.01em;display:flex;align-items:center;gap:8px;text-transform:capitalize}
.xr .chip{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--c)}
.xr dl{display:grid;grid-template-columns:auto 1fr;gap:5px 14px;margin:10px 0 0;font-size:12.5px}
.xr dt{color:var(--ink3)}.xr dd{margin:0;color:var(--ink2)}
.xr .tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px}
.xr .tags span{font-family:var(--mono);font-size:11px;border:1px solid var(--line2);border-radius:6px;padding:2px 6px;color:var(--ink2)}
.xr .tags span b{color:var(--ink);font-weight:500}
.xr .quote{font-family:var(--serif);font-size:15px;line-height:1.5;color:var(--ink);margin-top:8px}
.meter{height:5px;border-radius:3px;background:var(--line2);margin-top:10px;overflow:hidden}
.meter i{display:block;height:100%;width:var(--v);background:var(--c,var(--accent));transition:width .4s ease}
.chs{display:grid;gap:6px}
.chs button{display:grid;grid-template-columns:10px 1fr auto;align-items:center;gap:10px;text-align:left;border:1px solid var(--line);border-radius:10px;padding:9px 11px;background:var(--surf2)}
.chs button[aria-current=true]{border-color:var(--ink3)}
.chs button i{width:10px;height:10px;border-radius:50%;background:var(--c)}
.chs button small{color:var(--ink3);font-family:var(--mono);font-size:11px}
.toast{position:absolute;z-index:40;left:50%;top:70px;transform:translate(-50%,-10px);opacity:0;transition:all .3s ease;background:var(--ink);color:var(--bg);font-size:13px;padding:8px 14px;border-radius:999px;pointer-events:none}
.toast.on{opacity:1;transform:translate(-50%,0)}
.scene-card{position:absolute;z-index:4;left:50%;top:50%;transform:translate(-50%,-50%);text-align:center;pointer-events:none;opacity:0;transition:opacity .6s ease}
.scene-card.on{opacity:1}
.scene-card b{display:block;font-family:var(--serif);font-weight:400;font-size:28px;color:var(--ink)}
.scene-card span{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--mood)}
@media (max-width:640px){.pace>:first-child{display:none}.ai{grid-template-columns:minmax(0,1fr)}.av{display:none}.kbar .ttl small{display:none}.pace input{width:90px}.ai .body{font-size:17.5px}.home .col{padding-top:24px}}
.endcard{break-before:auto;text-align:center;margin:3em 0 0;font-family:var(--serif)}
.endcard p{text-indent:0;margin:0 0 .8em}
.endcard .src{font-size:.8em;color:var(--pink2)}
.endcard a{text-decoration:underline;text-underline-offset:.2em;text-decoration-color:var(--pline)}

/* ---------- templates: each kind of text gets the page it deserves ---------- */
.flow{font-family:var(--tf,var(--serif));font-size:calc(var(--fs,20px) * var(--ts,1));line-height:var(--tl,1.62)}
[data-font=serif] .flow{--tf:var(--serif)!important}
[data-font=sans] .flow{--tf:var(--sans)!important}
.flow h2,.tp .bt{font-family:var(--th,inherit)}
.fx-term{font-weight:650;color:var(--accent);text-decoration:underline dotted color-mix(in srgb,var(--accent) 50%,transparent);text-underline-offset:.2em}
.flow p.cta-p{text-indent:0;margin:1.2em 0;padding:.8em 1em;border-left:3px solid var(--accent);background:color-mix(in srgb,var(--accent) 7%,transparent);border-radius:0 8px 8px 0}
.tp .dl{font-family:var(--sans);font-size:.62em;letter-spacing:.04em;color:var(--pink2);margin-top:.8em}
.tp .orn{font-size:1.2em;color:var(--pink2);margin:.6em 0}

/* novel: justified, indented, drop cap, centred chapter heads */
[data-template=novel] .flow{--tf:var(--serif);--tl:1.62}
/* short story: the novel page, set darker and closer, the opening line in small capitals */
[data-template=story] .flow{--tf:var(--serif);--tl:1.66}
[data-template=story] .flow p.first::first-line{font-variant:small-caps;letter-spacing:.04em}
[data-template=story] .tp .bt{font-size:2.2em;font-weight:400}
/* memoir: a quieter book, ragged right, heads set left with a large numeral */
[data-template=memoir] .flow{--tf:"Source Serif 4",var(--serif);--th:Fraunces,var(--serif);--tl:1.65;text-align:left}
[data-template=memoir] .flow h2{text-align:left;font-weight:400;font-size:1.5em}
[data-template=memoir] .flow h2 small{letter-spacing:.12em}
[data-template=memoir] .tp{text-align:left}
[data-template=memoir] .tp .rule{margin-left:0}
/* speech: centred, large and slow to read, a breath between paragraphs, like a lectern copy */
[data-template=speech] .flow{--tf:Fraunces,var(--serif);--ts:1.18;--tl:1.72;text-align:center;hyphens:manual}
[data-template=speech] .flow p{text-indent:0;margin:0 0 1.1em}
[data-template=speech] .tp .bt{font-weight:400;font-size:1.6em}
/* textbook: left aligned, spaced paragraphs, sans section heads, key terms marked */
[data-template=textbook] .flow{--tf:"Source Serif 4",var(--serif);--th:"Instrument Sans",var(--sans);--tl:1.6;text-align:left}
[data-template=textbook] .flow p{text-indent:0;margin:0 0 .85em}
[data-template=textbook] .flow h2{text-align:left;font-weight:600;font-size:1.15em;line-height:1.3;border-bottom:1px solid var(--pline);padding-bottom:.6em;margin-top:1em}
[data-template=textbook] .flow h2 small{color:var(--accent)}
[data-template=textbook] .tp{text-align:left;border:1px solid var(--pline);border-radius:10px;padding:1em 1.1em;font-size:.95em}
[data-template=textbook] .tp .bt{font-family:"Instrument Sans",var(--sans);font-weight:650;font-size:1.5em}
[data-template=textbook] .tp .rule{display:none}
/* pitch: sans, short blocks, the opening line large, the ask in a callout */
[data-template=pitch] .flow{--tf:"Instrument Sans",var(--sans);--th:"Instrument Sans",var(--sans);--ts:1.04;--tl:1.55;text-align:left;hyphens:manual}
[data-template=pitch] .flow p{text-indent:0;margin:0 0 .95em}
[data-template=pitch] .flow p.first{font-size:1.65em;line-height:1.18;font-weight:600;letter-spacing:-.015em;margin-bottom:.7em}
[data-template=pitch] .tp{text-align:left;margin-bottom:1.6em}
[data-template=pitch] .tp .bt{font-size:.85em;font-weight:600;letter-spacing:.01em;color:var(--accent)}
[data-template=pitch] .tp .rule{margin-left:0}
/* newsletter: a masthead, sans body, a serif opener */
[data-template=newsletter] .flow{--tf:"Instrument Sans",var(--sans);--th:Fraunces,var(--serif);--tl:1.6;text-align:left;hyphens:manual}
[data-template=newsletter] .flow p{text-indent:0;margin:0 0 .9em}
[data-template=newsletter] .flow p.first{font-family:Fraunces,var(--serif);font-size:1.9em;line-height:1.1;margin-bottom:.6em}
[data-template=newsletter] .tp{border-top:3px double var(--pink2);border-bottom:1px solid var(--pline);padding:.8em 0;margin-bottom:1.6em}
[data-template=newsletter] .tp .bt{font-size:1.25em;letter-spacing:.02em}
[data-template=newsletter] .tp .rule{display:none}
/* article: a blog page, serif body, sans headline and subheads, byline with reading time */
[data-template=article] .flow{--tf:"Source Serif 4",var(--serif);--th:Geist,var(--sans);--tl:1.66;text-align:left;hyphens:manual}
[data-template=article] .flow p{text-indent:0;margin:0 0 .95em}
[data-template=article] .flow h2{text-align:left;font-weight:600;font-size:1.3em;letter-spacing:-.015em;margin:0 0 .8em;break-before:auto}
[data-template=article] .tp{text-align:left;margin-bottom:1.4em}
[data-template=article] .tp .bt{font-family:Geist,var(--sans);font-weight:650;font-size:1.75em;letter-spacing:-.03em}
[data-template=article] .tp .rule{margin-left:0}
[data-template=article] .flow .tp + h2{display:none}
.tmpls{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.tmpls button{border:1px solid var(--line2);border-radius:9px;padding:8px 4px;font-size:12px;color:var(--ink2);display:grid;gap:4px;justify-items:center}
.tmpls button b{font-size:17px;font-weight:400;color:var(--ink)}
.tmpls button[aria-pressed=true]{border-color:var(--ink);color:var(--ink);background:var(--surf2)}
.themes{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.themes button{display:grid;gap:5px;justify-items:center;font-size:12px;color:var(--ink2);padding:6px 2px;border-radius:9px;border:1px solid transparent}
.themes button i{width:34px;height:34px;border-radius:50%;background:var(--a);box-shadow:inset 0 0 0 1px rgba(0,0,0,.12),inset -9px -9px 0 var(--b)}
.themes button[aria-pressed=true]{border-color:var(--ink);color:var(--ink)}
.sheet{max-height:calc(100svh - 80px);overflow-y:auto}

/* while it streams the page reads like the home page: ragged lines and a caret at the voice */
[data-streaming=on] .flow{text-align:left!important}
[data-streaming=on][data-template=speech] .flow{text-align:center!important}
.flow{position:relative}
.rcaret{position:absolute;width:2px;border-radius:1px;background:var(--accent);opacity:0;pointer-events:none;transition:left .18s ease,top .18s ease,opacity .3s ease;animation:blink 1.1s ease-in-out infinite}
[data-streaming=on] .rcaret.live{opacity:.85}

/* no cursor: the founder found it distracting (2026-10-08) */
.caret{display:none!important}

.home-start{display:flex;gap:18px;align-items:center;justify-content:center;margin:12vh 0 14vh}
.home-start[hidden]{display:none}
@media (max-width:640px){.home-start{margin-left:0}}

.ctrl button[data-pause]{width:34px;height:30px;padding:0;display:inline-grid;place-items:center}
.ctrl button[data-pause] svg{width:14px;height:14px}

.ctrl button[data-hsound]{width:34px;height:30px;padding:0;display:inline-grid;place-items:center}
.ctrl button[data-hsound][hidden]{display:none}
.ctrl button[data-hsound] svg{width:16px;height:16px}
.ctrl button[data-hsound] .s-on{display:none}
.ctrl button[data-hsound][aria-pressed=true]{background:var(--ink);color:var(--bg)}
.ctrl button[data-hsound][aria-pressed=true] .s-on{display:block}
.ctrl button[data-hsound][aria-pressed=true] .s-off{display:none}


/* the start: one big play button, centered, and the sound switch beside it (off to begin) */
.big-play{width:96px;height:96px;border-radius:50%;display:grid;place-items:center;background:var(--ink);color:var(--bg);border:0;box-shadow:0 14px 40px -12px rgba(0,0,0,.45);transition:transform .2s ease}
.big-play:hover{transform:scale(1.06)}
.big-play svg{width:40px;height:40px;margin-left:5px}
.start-sound{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,var(--surf) 90%,transparent);color:var(--ink2);border:1px solid var(--line2)}
.start-sound svg{width:24px;height:24px}
.start-sound .s-on{display:none}
.start-sound[aria-pressed=true]{background:var(--ink);color:var(--bg)}
.start-sound[aria-pressed=true] .s-on{display:block}.start-sound[aria-pressed=true] .s-off{display:none}

/* before Play: say what this is, keep the narrator's mark out of sight, and let the shelf show below */
.intro{text-align:center;margin:8vh auto 0;max-width:560px}
.intro h1{font-family:var(--serif);font-weight:400;font-size:clamp(30px,5vw,42px);line-height:1.15;letter-spacing:-.015em;margin:0 0 14px;color:var(--ink)}
.intro p{margin:0;color:var(--ink2);font-size:16px;line-height:1.55}
.col:has(> .home-start:not([hidden])) .home-start{margin:6vh 0 10vh}
.col:has(> .home-start[hidden]) > .intro{display:none}
.col:has(> .home-start:not([hidden])) > .hello,.col:has(> .home-start:not([hidden])) > .ai{display:none}
.col:has(> .home-start:not([hidden])) > #library[hidden]{display:block}
.col:has(> .home-start:not([hidden])) .shelf-h,.col:has(> .home-start:not([hidden])) .shelf-s{opacity:1}
.col:has(> .home-start:not([hidden])) .read{opacity:1;transform:none}
.chipbtn{white-space:nowrap}
@media (max-width:400px){.top .chipbtn{padding-left:11px;padding-right:11px;font-size:13px}}