/* Conversation over a living painting. All controls/text are HTML, never image slices. */
:root{color-scheme:dark;--ivory:#fff2d8;--ivory-soft:#eee6d5;--amber:#e6be79;--amber-soft:#c5a870;--muted:#a8a8a0;--night:#070c11;--glass:#121b23b8;--line:#d1b27766;--serif:Georgia,'Times New Roman',serif;--sans:Arial,Helvetica,sans-serif}
html{background:var(--night);scroll-behavior:smooth}body{margin:0;background:var(--night);color:var(--ivory);font-family:var(--sans);font-size:15px}*{box-sizing:border-box}button,textarea{font:inherit}button,a{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:focus-visible,a:focus-visible,textarea:focus-visible{outline:2px solid #ffe5ac;outline-offset:5px}button:disabled{cursor:wait;opacity:.5}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.skip{z-index:30}a{color:inherit}

/* World: the code-drawn night (home) or a painted story scene (reading) layered under the text. */
.world{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;background:var(--night)}
.living-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity 1.4s ease}
.living-ready .living-canvas{opacity:1}
.world-shade{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(4,8,13,.28),transparent 22%,transparent 46%,rgba(5,9,14,.62) 70%,rgba(5,9,13,.9));transition:background 1.2s ease}
.in-chapter .world-shade{background:linear-gradient(90deg,rgba(5,9,14,.82),rgba(5,9,14,.5) 38%,transparent 62%),linear-gradient(180deg,rgba(4,8,13,.3),transparent 25%,transparent 60%,rgba(5,9,13,.75))}

/* Header */
.quiet-header{height:88px;padding:0 4%;display:flex;align-items:center;justify-content:space-between;position:relative;z-index:4;gap:20px}
.quiet-brand{font:24px var(--serif);text-decoration:none;letter-spacing:-.6px;white-space:nowrap;text-shadow:0 1px 12px #0008}
.spark{color:#ffd895;font-size:28px;margin-right:9px;text-shadow:0 0 25px #ecc37e80}
#chapter-label{font-size:10px;letter-spacing:3px;color:#e8dcc0b0;margin-left:auto;text-shadow:0 1px 8px #000a;transition:opacity .6s}
#motion-toggle,#music-toggle{color:#d2cfbf;background:#07111b55;border:1px solid #e4cc9433;border-radius:50%;width:44px;height:44px;font-size:13px;backdrop-filter:blur(6px)}
#music-toggle{font-size:16px;margin-right:-8px}#music-toggle.on{color:#1b2229;background:#f2d9a8;border-color:#f2d9a8}

/* Conversation */
.conversation-shell{position:relative;z-index:2;min-height:calc(100svh - 88px);max-width:780px;margin:0 auto;padding:0 22px 30px;display:flex;flex-direction:column;justify-content:flex-end;transition:max-width .8s ease,margin .8s ease}
.conversation{width:100%;padding-top:24px}
.messages{max-height:50svh;min-height:150px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#e3bd7150 transparent;padding:20px 5px 8px;mask-image:linear-gradient(transparent,#000 28px)}
.message{display:flex;gap:22px;margin:18px 0 26px;animation:message-in .7s cubic-bezier(.2,.7,.2,1) both}.message>div{min-width:0}
.companion-mark{font-size:34px;line-height:1;color:#ffe0a2;text-shadow:0 0 22px #f6ca8580;flex:none;margin-top:16px;animation:mark-breathe 5s ease-in-out infinite}
.speaker{display:block;font-size:10px;letter-spacing:3.5px;color:#eac98e;margin:0 0 11px}
.message p.greeting{font:400 clamp(27px,3.1vw,38px)/1.25 var(--serif);letter-spacing:-.5px;color:var(--ivory);margin:0 0 22px;text-shadow:0 2px 24px #000c;white-space:normal}
.welcome h1.speaker{font:10px/1.5 var(--sans);font-weight:400;letter-spacing:3px;text-transform:uppercase;color:#eac98e;margin:0 0 11px;text-shadow:0 1px 10px #000c}
.message p{font:16.5px/1.75 var(--serif);margin:0;white-space:pre-wrap;overflow-wrap:anywhere;max-width:640px;color:#f1eadb;text-shadow:0 1px 14px #000c}
.message.user{justify-content:flex-end;margin-left:65px}
.message.user p{padding:12px 20px;background:#c9c2a514;border:1px solid #d6cdaa2c;border-radius:22px 22px 5px 22px;color:#e2ded4;font:14.5px/1.6 var(--sans);backdrop-filter:blur(10px)}
.message.error p{color:#e9c394}
.message p.value-line{font:13px/1.6 var(--sans);color:#d9cfb8;margin:-8px 0 20px;max-width:520px}.value-line a{color:#f0cf93;white-space:nowrap;text-underline-offset:3px}
.starter-replies{display:flex;gap:10px;flex-wrap:wrap}
.starter-replies button{border:1px solid #e7c28866;background:#0d1720a6;color:#e6dac3;border-radius:100px;padding:11px 16px;min-height:44px;font-size:13px;backdrop-filter:blur(10px);transition:background .25s,border-color .25s,transform .25s}
.starter-replies button:hover{background:#d2aa6124;border-color:#e7c288;transform:translateY(-1px)}.starter-replies span{margin-left:10px;color:var(--amber-soft)}
.composer{position:relative;display:flex;align-items:flex-end;gap:12px;padding:10px 10px 10px 26px;background:linear-gradient(120deg,#151e26c4,#141920b8);border:1px solid #d1b277a8;border-radius:32px;box-shadow:inset 0 1px 1px #fff2d818,0 0 30px #d8ae6214,0 14px 50px #0006;backdrop-filter:blur(22px);transition:border-color .3s,box-shadow .3s}
.composer:focus-within{border-color:#f5d5a0;box-shadow:0 0 36px #d8ae6226}
.composer textarea{resize:none;min-width:0;flex:1;max-height:118px;background:transparent;border:0;outline:none!important;color:var(--ivory);padding:11px 0 10px;font:17px/1.5 var(--serif);scrollbar-width:thin}
.composer textarea::placeholder{color:#b8b9b3}
.composer button{flex:none;border:0;border-radius:50%;background:#ffefd2;color:#1b252a;width:46px;height:46px;display:grid;place-items:center;transition:transform .2s,box-shadow .2s}
.composer button:hover{transform:translateY(-2px);box-shadow:0 0 24px #ffdf9766}
.composer svg path{stroke:currentColor;stroke-width:1.6;fill:none;stroke-linecap:round;stroke-linejoin:round}
.whisper{text-align:center;letter-spacing:1.2px;font:11px var(--serif);color:#aaa99e;margin:16px 0 0}.whisper span{margin:0 7px;color:#c3a66f}
.connection-status{font-size:12px;min-height:16px;margin:0 0 9px 60px;color:#cdbd96}.connection-status:empty{min-height:0;margin-bottom:12px}
.thinking{display:inline-flex;gap:6px;padding:9px 0}.thinking i{width:5px;height:5px;border-radius:100%;background:var(--amber);animation:pulse 1.5s ease-in-out infinite}.thinking i:nth-child(2){animation-delay:.2s}.thinking i:nth-child(3){animation-delay:.4s}

/* Pathways: one meaningful next step, styled as a door into the next scene. */
.pathways{display:flex;flex-direction:column;gap:8px;margin-top:18px;max-width:500px}
.pathway{display:flex;align-items:center;gap:14px;text-decoration:none!important;border:1px solid #cdb47b4d;border-radius:14px;padding:13px 16px;min-height:56px;background:linear-gradient(100deg,#13202bd0,#0f1820b8);backdrop-filter:blur(12px);transition:background .3s,transform .3s,border-color .3s;animation:message-in .7s .15s both}
.pathway:nth-child(2){animation-delay:.3s}.pathway:nth-child(3){animation-delay:.45s}
.pathway:hover{background:#22303ae6;border-color:#e7c288aa;transform:translateX(4px)}.pathway span{flex:1}
.pathway small{display:block;font-size:9px;letter-spacing:1.8px;text-transform:uppercase;color:#c9ab72;margin-bottom:5px}
.pathway strong{font:15px var(--serif);font-weight:400;color:#f5ead3}.pathway b{color:#e8c88e;font-size:19px;font-weight:400}

/* Reading: the conversation steps aside, the story plays as acts over the scene. */
.story-space{padding:12px 0 6px}.story-space[hidden]{display:none}
.back-to-chat{border:0;background:transparent;color:#e2c48e;padding:10px 0;min-height:44px;font-size:13px;letter-spacing:.3px}
.back-to-chat:hover{color:#ffe1aa}
.chapter-content{max-height:min(64svh,calc(100svh - 230px));overflow:auto;padding:8px 18px 12px 0;scrollbar-width:thin;scrollbar-color:#d8b37444 transparent;animation:message-in .8s both}
.chapter-content>h2{font:400 clamp(15px,1.4vw,18px)/1.4 var(--serif);letter-spacing:.2px;color:#e6d3ae;margin:4px 0 18px}
.chapter-acts{display:flex;gap:6px;max-width:300px;margin:6px 0 10px}
.chapter-acts i{flex:1;height:2px;border-radius:2px;background:#fff2d82e;overflow:hidden;position:relative}
.chapter-acts i.done{background:#e6be79aa}
.chapter-acts i.now::after{content:'';position:absolute;inset:0;background:#f3d49a;transform-origin:left;animation:act-fill 1.6s cubic-bezier(.3,.6,.2,1) both}
.chapter-progress{color:#cdb07a!important;font:10px/1.5 var(--sans)!important;letter-spacing:2.6px;margin:0 0 6px!important}
.chapter-panel{outline:none;min-height:7.5em}
.chapter-panel>*{animation:act-in 1.3s .35s cubic-bezier(.2,.7,.2,1) both}
.chapter-panel>*:nth-child(2){animation-delay:.75s}.chapter-panel>*:nth-child(3){animation-delay:1.1s}
.chapter-panel p{font:400 clamp(23px,2.5vw,32px)/1.5 var(--serif);max-width:640px;color:var(--ivory-soft);margin:0 0 14px;text-shadow:0 2px 22px #000d}
.chapter-panel blockquote{font:italic clamp(18px,1.8vw,22px)/1.65 var(--serif);color:#f0e4c8;border-left:1px solid #d3af70;padding-left:18px;margin:16px 0 8px}
.chapter-panel h2,.chapter-panel h3{font:400 23px/1.4 var(--serif)}
.chapter-panel cite{display:block;font:12px/1.8 var(--sans);color:#c9ad78;margin-bottom:12px}
.chapter-epilogue{padding:20px 22px;max-width:560px;border:1px solid #e3c48a55;border-radius:18px;background:linear-gradient(110deg,#162330d9,#101922c7);backdrop-filter:blur(12px)}
.chapter-epilogue h3{font:400 clamp(22px,2.2vw,28px)/1.3 var(--serif)!important;color:#fff0d3;margin:0 0 10px}.chapter-epilogue p{font:15px/1.65 var(--sans)!important;color:#ddd5c4!important;margin:0 0 16px!important;text-shadow:none!important}
.endcard-cta{display:inline-flex;align-items:center;min-height:44px;padding:0 20px;border-radius:999px;background:#f2d9a8;color:#1b2229;text-decoration:none;font-size:14px}.endcard-cta:hover{background:#ffe8bd}
.pathway-app{border-color:#f2d9a888;background:linear-gradient(100deg,#2a2a22d9,#16202ad0)}
.chapter-controls{display:flex;align-items:center;gap:12px;margin:26px 0 14px}
.chapter-controls button{border:1px solid #e5c58b55;border-radius:999px;background:#10202ccc;color:#e7d3ad;font-size:13px;padding:11px 18px;min-height:44px;backdrop-filter:blur(10px);transition:background .25s,border-color .25s}
.chapter-controls button:first-child{padding:11px 15px}
.chapter-controls button:last-child{background:#f2d9a8;color:#1b2229;border-color:#f2d9a8}
.chapter-controls button:last-child:hover{background:#ffe8bd}
.chapter-controls button:disabled{opacity:.25;cursor:default}
.chapter-more{display:flex;flex-wrap:wrap;align-items:center;gap:0 22px;margin:4px 0 8px}.chapter-more details[open]{flex-basis:100%}
.chapter-film,.chapter-explore{margin:0;color:#b7b6aa;font-size:12px}
.chapter-film summary,.chapter-explore summary{cursor:pointer;color:#cfb68a;padding:13px 0;min-height:44px}
.chapter-film video{display:block;width:min(100%,300px);max-height:35svh;object-fit:contain;border-radius:13px;background:var(--night);margin:10px 0}
.chapter-explore a{display:block;line-height:1.7;margin:10px 0;color:#dfcfac;text-decoration:none}
.original-page{display:inline-flex;align-items:center;min-height:44px;font-size:12px;color:#e3be7f}
.in-chapter .messages{display:none}
.in-chapter .conversation{padding-top:6px}
.in-chapter .composer{padding:6px 8px 6px 22px}.in-chapter .composer textarea{font-size:15px;padding:8px 0}.in-chapter .composer button{width:38px;height:38px}
.in-chapter .whisper{display:none}

/* Footer info and crawlable continuity */
.quiet-info{position:fixed;z-index:5;bottom:18px;left:22px;color:#a6a698;font:12px/1.6 var(--sans)}
.quiet-info summary{width:28px;height:28px;border:1px solid #b9b4a544;border-radius:50%;display:grid;place-items:center;cursor:pointer;list-style:none;font:12px var(--serif)}
.quiet-info summary::-webkit-details-marker{display:none}
.quiet-info>div{position:absolute;bottom:38px;width:min(310px,80vw);padding:21px;background:#0d1922f5;border:1px solid #c2a26c50;border-radius:15px;box-shadow:0 10px 40px #0007}
.quiet-info p{font-size:12px;color:#acb6ba}.quiet-info a{margin-right:13px;font-size:12px}

@keyframes message-in{from{opacity:0;transform:translateY(14px);filter:blur(4px)}to{opacity:1;transform:none;filter:none}}
@keyframes act-in{from{opacity:0;transform:translateY(12px);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
@keyframes act-fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes pulse{0%,100%{opacity:.25;transform:translateY(0)}50%{opacity:1;transform:translateY(-3px)}}
@keyframes mark-breathe{0%,100%{text-shadow:0 0 18px #f6ca8560}50%{text-shadow:0 0 30px #f6ca85aa}}

@media(min-width:900px){
  .in-chapter .conversation-shell{max-width:640px;margin:0 0 0 7vw}
}
@media(max-width:600px){
  .world{background-position:79% 50%}
  .quiet-header{height:68px;padding:0 18px}#music-toggle{margin-left:auto}.quiet-brand{font-size:20px}.spark{font-size:24px}#chapter-label{display:none}
  .conversation-shell{min-height:calc(100svh - 68px);padding:0 18px max(26px,env(safe-area-inset-bottom));max-width:100%}
  .messages{max-height:52svh;min-height:150px}
  .message{gap:13px;margin-bottom:22px}.companion-mark{font-size:26px;margin-top:17px}
  .message p.greeting{font-size:25px;margin-bottom:16px}.welcome h1.speaker{font-size:9px;letter-spacing:2px}
  .starter-replies{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-right:-18px;padding-right:18px}.starter-replies button{flex:none}.speaker{font-size:9px;letter-spacing:3px}.message p{font-size:15.5px;line-height:1.7}
  .message.user{margin-left:34px}
  .starter-replies{gap:8px}.starter-replies button{font-size:12.5px;padding:10px 13px}
  .composer{padding:7px 7px 7px 18px;border-radius:28px}.composer textarea{font-size:16px}.composer button{width:44px;height:44px}
  .whisper{font-size:10px;margin-top:12px}.connection-status{margin-left:40px}
  .quiet-info{left:10px;bottom:9px}
  .in-chapter .world-shade{background:linear-gradient(180deg,rgba(4,8,13,.25),transparent 22%,rgba(5,9,14,.55) 48%,rgba(5,9,13,.92) 72%)}
  .message p.value-line{font-size:12px;margin:-6px 0 14px}
  .chapter-content{max-height:62svh}.chapter-panel p{font-size:21px}.chapter-panel{min-height:5.5em}.chapter-controls{margin:16px 0 4px}.chapter-more{gap:0 16px}
  .in-chapter .composer textarea{font-size:16px}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
.paused .companion-mark,.paused .chapter-acts i::after{animation:none}

/* Breath of life (presence.js): a presence of light; Scripture, then an introduction, then the conversation. */
body.presence-home{background:radial-gradient(120% 90% at 50% 30%,#171221 0%,#0b0910 55%,#050407 100%) fixed}
.presence-home .world{background:transparent}
.presence-home .world-shade{display:none}
.presence{position:fixed;inset:0;z-index:1;pointer-events:none;transition:opacity 1.2s ease}.presence.away{opacity:0}
.presence-canvas{position:absolute;inset:0;width:100%;height:100%}
.presence-glow{position:absolute;left:0;top:0;width:200px;height:200px;border-radius:50%;opacity:0;pointer-events:none;
  background:radial-gradient(circle,#fff6e0 0%,#ffd893cc 9%,#f2b2605c 26%,#c97a4a1f 48%,transparent 70%);filter:blur(2px);will-change:transform,opacity}
.presence.no-gl .presence-glow{animation:presence-breathe 6.2s ease-in-out infinite}
@keyframes presence-breathe{0%,100%{opacity:.5}42%{opacity:.85}}
.presence-home .conversation-shell{min-height:calc(100svh - 88px);justify-content:flex-start;align-items:stretch}
.presence-anchor{flex:0 0 40svh;position:relative;transition:flex-basis 1.4s cubic-bezier(.3,.7,.2,1)}
.prologue{text-align:center;max-width:700px;margin:0 auto;padding:0 6px}
.verse-now{margin:0;min-height:7.4em}
.verse-now p{font:400 clamp(24px,3vw,36px)/1.45 var(--serif);color:#fff3dc;margin:0;text-shadow:0 0 30px #f6c87a33}
.verse-now .w{display:inline-block;opacity:0;filter:blur(6px);transform:translateY(4px);transition:opacity 1.1s ease,filter 1.1s ease,transform 1.1s ease;white-space:pre}
.verse-now .w.lit{opacity:1;filter:none;transform:none}
.verse-now.out .w{opacity:0;filter:blur(8px);transition-duration:.8s}
.verse-now cite{display:block;margin-top:14px;font:12px/1.6 var(--sans);font-style:normal;letter-spacing:2.5px;text-transform:uppercase;color:#d8b77a;opacity:0;transition:opacity 1s}
.verse-now.has-ref cite{opacity:1}.verse-now.out cite{opacity:0}
.intro{margin:20px auto 0;max-width:560px;opacity:0;transform:translateY(12px);transition:opacity 1.4s ease,transform 1.4s ease}
.intro h1{font:400 13px/1.4 var(--sans);letter-spacing:4px;text-transform:uppercase;color:#eccf98;margin:0 0 10px}
.intro p{font:16px/1.75 var(--serif);color:#d9d2c4;margin:0}
.intro .ai-note{display:block;margin-top:8px;font:11px/1.6 var(--sans);letter-spacing:.5px;color:#9d968b}
.pg-intro .intro,.pg-chat .intro{opacity:1;transform:none}
.presence-home .conversation{opacity:0;transform:translateY(24px);pointer-events:none;transition:opacity 1.2s ease,transform 1.2s ease;margin-top:auto}
.pg-chat .conversation{opacity:1;transform:none;pointer-events:auto}
.pg-chat .presence-anchor{flex-basis:27svh}
.pg-chat .verse-now{min-height:0}.pg-chat .verse-now p{font-size:clamp(18px,1.9vw,23px)}
.pg-talking .prologue{display:none}.pg-talking .presence-anchor{flex-basis:22svh}
.presence-home .welcome{justify-content:center;text-align:center}.presence-home .welcome .companion-mark{display:none}
.presence-home .welcome .starter-replies{justify-content:center}
.talk-ui .message p.greeting{font-size:clamp(22px,2.4vw,28px);margin-bottom:16px}
.skip-prologue{position:fixed;right:22px;bottom:22px;z-index:6;border:0;background:transparent;color:#a99f8f;font-size:12px;letter-spacing:1px;min-height:44px;padding:0 10px}
.pg-chat .skip-prologue{display:none}
@media(max-width:600px){.presence-anchor{flex-basis:32svh}.pg-chat .presence-anchor{flex-basis:22svh}.pg-talking .presence-anchor{flex-basis:18svh}.verse-now p{font-size:23px}.pg-chat .verse-now p{font-size:16px}
  .intro p{font-size:15px}.pg-chat .intro p{font-size:13.5px}.pg-chat .intro h1{display:none}}
.presence-home:not(.in-chapter) .living-canvas{opacity:0!important}
/* The page breathes with the presence (--breath 0..1, written each frame by presence.js). */
.presence-home{--breath:0}
.presence-home .world::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 45% at 50% 22%,rgb(242 178 96 / calc(.04 + .07*var(--breath))),transparent 70%)}
.talk-ui .composer{box-shadow:inset 0 1px 1px #fff2d818,0 0 calc(18px + 30px*var(--breath)) rgb(226 180 104 / calc(.07 + .16*var(--breath))),0 14px 50px #0006;
  border-color:rgb(222 190 128 / calc(.55 + .35*var(--breath)))}
.talk-ui .message.assistant .companion-mark{animation:none;opacity:calc(.6 + .4*var(--breath));text-shadow:0 0 calc(10px + 22px*var(--breath)) #f6ca85aa}
[data-presence="thinking"] .talk-ui .thinking i{background:#ffe0a8}
.presence.ready .presence-glow{filter:blur(1px)}

/* Invitation to hear the presence speak, and the sound switch. */
.touch-light{position:absolute;left:0;right:0;margin:0 auto;width:max-content;bottom:4px;min-height:44px;padding:0 18px;border-radius:999px;border:1px solid rgb(236 200 140 / calc(.25 + .45*var(--breath)));
  background:#0d0b14aa;color:#f1dfbd;font:13px/1 var(--sans);letter-spacing:.6px;backdrop-filter:blur(8px);box-shadow:0 0 calc(8px + 20px*var(--breath)) rgb(242 190 110 / calc(.1 + .25*var(--breath)));animation:message-in 1.2s both}
.touch-light[hidden]{display:none}
.pg-chat .touch-light{bottom:-6px}
@media(max-width:600px){.touch-light{min-height:40px;padding:0 14px;font-size:12px;bottom:0}.pg-chat .touch-light{bottom:-10px}}
#sound-toggle{color:#f1dfbd;background:#07111b55;border:1px solid #e4cc9444;border-radius:50%;width:44px;height:44px;font-size:15px;margin-right:-8px}
#sound-toggle[hidden]{display:none}#sound-toggle[aria-pressed="true"]{border-color:#f2d9a8;box-shadow:0 0 calc(6px + 16px*var(--breath)) #f2c47a66}
.talk-ui .messages{mask-image:linear-gradient(transparent,#000 48px)}
@media(max-width:600px){#sound-toggle{margin-left:auto}}

/* Beyond the conversation: the same night, continued (no panels, light as the only accent). */
.beyond{position:relative;z-index:2;max-width:1080px;margin:0 auto;padding:8vh 24px 0;color:#cfc8ba}
.beyond section{margin:0 auto 10vh;text-align:center}
.beyond-eyebrow{font:11px/1.6 var(--sans);letter-spacing:3.5px;text-transform:uppercase;color:#e3c286;margin:0 0 14px}
.beyond h2{font:400 clamp(28px,3.4vw,44px)/1.2 var(--serif);color:#fff2dc;margin:0 auto 28px;max-width:760px;text-shadow:0 0 40px #f6c87a22}
.beyond-intro p{font:clamp(17px,1.5vw,20px)/1.75 var(--serif);color:#ddd5c6;max-width:680px;margin:0 auto 14px}
.beyond-intro .beyond-sub{font:15px/1.7 var(--sans);color:#a9a397}
.beyond-grid{list-style:none;padding:0;margin:0 auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;text-align:left}
.beyond-grid.two{grid-template-columns:repeat(2,minmax(0,1fr));max-width:820px}
.beyond-card{position:relative;display:block;padding:24px 22px 22px;border-radius:18px;border:1px solid #f0d29b1f;background:linear-gradient(160deg,#ffffff08,#ffffff02);text-decoration:none;transition:border-color .4s,transform .4s,background .4s}
.beyond-card:hover{border-color:#f0d29b55;transform:translateY(-2px);background:linear-gradient(160deg,#f6d69a10,#ffffff03)}
.beyond-card h3{font:400 19px/1.35 var(--serif);color:#f6ead4;margin:10px 0 8px}
.beyond-card p{font:14px/1.65 var(--sans);color:#aaa498;margin:0}
.beyond-card .dot{display:block;width:8px;height:8px;border-radius:50%;background:#ffe2a8;box-shadow:0 0 12px 3px #f2b86266}
.beyond-card.guide b{position:absolute;right:20px;top:22px;color:#e3c286;font-weight:400}
.story-row{list-style:none;padding:0;margin:0 0 22px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;text-align:left}
.story-card{display:block;position:relative;border-radius:16px;overflow:hidden;aspect-ratio:9/13;text-decoration:none;border:1px solid #f0d29b22;transition:transform .5s,border-color .5s}
.story-card img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.story-card::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,#07060bdd)}
.story-card span{position:absolute;left:14px;right:14px;bottom:14px;z-index:1}
.story-card strong{display:block;font:400 16px/1.3 var(--serif);color:#fff3de}.story-card small{font:11px var(--sans);letter-spacing:1px;color:#e3c286}
.story-card:hover{transform:translateY(-3px);border-color:#f0d29b66}.story-card:hover img{transform:scale(1.04)}
.chips{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;max-width:860px;margin:0 auto 22px}
.chip{display:inline-flex;align-items:center;min-height:42px;padding:0 16px;border-radius:999px;border:1px solid #f0d29b2e;color:#e8dcc3;text-decoration:none;font:14px var(--sans);background:#ffffff05;transition:border-color .3s,background .3s,color .3s}
.chip:hover{border-color:#f0d29b88;background:#f6d69a12;color:#fff3de}
.beyond-link{color:#e8c98e;text-decoration:none;font:14px var(--sans);letter-spacing:.3px;border-bottom:1px solid #e8c98e55;padding-bottom:2px}
.beyond-faq{max-width:760px;margin:0 auto;text-align:left}
.beyond-faq details{border-top:1px solid #f0d29b1c;padding:4px 0}.beyond-faq details:last-child{border-bottom:1px solid #f0d29b1c}
.beyond-faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px;align-items:center;min-height:56px;font:400 18px/1.4 var(--serif);color:#f1e6d1}
.beyond-faq summary::-webkit-details-marker{display:none}.beyond-faq summary::after{content:'+';color:#e3c286;font:300 22px var(--sans);transition:transform .3s}
.beyond-faq details[open] summary::after{transform:rotate(45deg)}
.beyond-faq p{font:15px/1.75 var(--sans);color:#b2ab9e;margin:0 0 16px}
.beyond-cta{position:relative;padding:6vh 0 12vh;margin-bottom:0!important}
.beyond-cta p{font:17px/1.7 var(--serif);color:#d6cebf;margin:0 auto 26px;max-width:520px}
.beyond-cta .store-row{justify-content:center}
.cta-light{display:block;width:120px;height:120px;margin:0 auto 26px;border-radius:50%;
  background:radial-gradient(circle,#fff6e0 0%,#ffd893cc 10%,#f2b2605c 30%,transparent 70%);transform:scale(calc(.85 + .3*var(--breath)));opacity:calc(.6 + .4*var(--breath))}
/* Rise into view like light gathering. */
.rise{opacity:0;transform:translateY(22px);filter:blur(4px);transition:opacity 1.2s ease,transform 1.2s cubic-bezier(.2,.7,.2,1),filter 1.2s ease}
.rise.seen{opacity:1;transform:none;filter:none}
.story-row li:nth-child(2),.beyond-grid li:nth-child(2){transition-delay:.08s}.story-row li:nth-child(3),.beyond-grid li:nth-child(3){transition-delay:.16s}.story-row li:nth-child(4),.beyond-grid li:nth-child(4){transition-delay:.24s}
@media(max-width:900px){.beyond-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.story-row{grid-template-columns:repeat(4,minmax(150px,1fr));overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:6px}.story-row li{scroll-snap-align:start}}
@media(max-width:600px){.beyond{padding:6vh 18px 0}.beyond section{margin-bottom:8vh}.beyond-card{padding:18px 18px 16px}.beyond-grid,.beyond-grid.two{grid-template-columns:1fr}.beyond h2{font-size:27px}
  .story-row{grid-template-columns:repeat(8,46vw);margin-right:-18px;padding-right:18px}.beyond-faq summary{font-size:16px}.chip{font-size:13px;min-height:40px}}
@media(prefers-reduced-motion:reduce){.rise{opacity:1;transform:none;filter:none}}
html:not(.js) .rise{opacity:1;transform:none;filter:none}

/* The conversation, in the same language as the opening: words written in light, no chat chrome. */
.talk-ui .message{gap:0}
.talk-ui .message.assistant:not(.welcome) .companion-mark,.talk-ui .message.assistant .speaker{display:none}
.talk-ui .message.assistant:not(.welcome) p{font:19px/1.75 var(--serif);color:#f3eadb;text-shadow:0 0 24px #f6c87a1f}
.lw{opacity:0;filter:blur(5px);transition:opacity .9s ease,filter .9s ease}.lw.lit{opacity:1;filter:none}
.talk-ui .message.user{justify-content:flex-end;margin:26px 0 18px 15%}
.talk-ui .message.user p{background:none;border:0;border-radius:0;padding:0 2px 0 0;backdrop-filter:none;text-align:right;font:italic 17px/1.6 var(--serif);color:#e6cb92}
.talk-ui .message.user p::after{content:'';display:block;margin:10px 0 0 auto;width:42px;height:1px;background:linear-gradient(90deg,transparent,#e6cb92aa)}
.talk-ui .pathways{max-width:520px;gap:10px}
.talk-ui .pathway{border-radius:16px;border:1px solid #f0d29b2a;background:linear-gradient(160deg,#ffffff0a,#ffffff02);backdrop-filter:none;padding:14px 18px}
.talk-ui .pathway:hover{border-color:#f0d29b77;background:linear-gradient(160deg,#f6d69a14,#ffffff04);transform:translateY(-2px)}
.talk-ui .pathway small{color:#e3c286;letter-spacing:2.4px}.talk-ui .pathway strong{font-size:16px}
.talk-ui .pathway-app{border-color:#f2d9a866}
.talk-ui .thinking i{background:#ffe0a8;box-shadow:0 0 8px #f2c47a}
.talk-ui .connection-status{margin-left:0;text-align:center}
/* While talking: the light stays at the top, the conversation flows in the page and fades beneath it,
   and the composer rests at the bottom of the screen. */
.pg-talking .presence{z-index:4}
.pg-talking::before{content:'';position:fixed;left:0;right:0;top:0;height:calc(22svh + 30px);z-index:3;pointer-events:none;
  background:linear-gradient(180deg,#0d0a12 0%,#0d0a12 62%,#0d0a1200 100%)}
.pg-talking .quiet-header{position:sticky;top:0;z-index:5}
.pg-talking .presence-anchor{position:sticky;top:0;z-index:0}
.pg-talking .messages{max-height:none;overflow:visible;mask-image:none;-webkit-mask-image:none;min-height:0;padding:10px 4px 20px}
.pg-talking .conversation{padding-bottom:10px}
.pg-talking .composer{position:sticky;bottom:max(16px,env(safe-area-inset-bottom));z-index:5}
.pg-talking .composer::before,.pg-talking .composer::after{content:'';position:absolute;left:-60vw;right:-60vw;z-index:-1;pointer-events:none}
.pg-talking .composer::before{bottom:100%;height:80px;background:linear-gradient(0deg,#08070c,#08070c00)}
.pg-talking .composer::after{top:100%;height:calc(max(16px,env(safe-area-inset-bottom)) + 4px);background:#08070c}
.pg-talking .composer{background:linear-gradient(120deg,#15131d,#100e16)}
.pg-talking .whisper{display:none}
.pg-talking .beyond{display:none}
@media(max-width:600px){.talk-ui .message.assistant:not(.welcome) p{font-size:17px}.pg-talking::before{height:calc(18svh + 24px)}.talk-ui .message.user{margin-left:10%}}

/* Story covers sit in the night until touched. */
.story-card img{filter:sepia(.45) saturate(.55) brightness(.62) contrast(1.05);transition:transform 1.2s cubic-bezier(.2,.7,.2,1),filter .8s ease}
.story-card:hover img,.story-card:focus-visible img{filter:none}
.beyond h2.writing .hw{opacity:0;filter:blur(6px);transition:opacity 1s ease,filter 1s ease}
.beyond h2.writing .hw.lit,.beyond h2 .hw.lit{opacity:1;filter:none}

/* Reading inside the light (home): one act per screen, centred, no inner scroll box. */
.presence-home.in-chapter .prologue,.presence-home.in-chapter .presence-anchor,.presence-home.in-chapter .whisper{display:none}
.presence-home.in-chapter .conversation-shell{max-width:760px;margin:0 auto;justify-content:flex-start}
.presence-home .story-space{padding:4vh 0 2vh;text-align:center}
.presence-home .back-to-chat{display:inline-flex;align-items:center;min-height:44px;margin:0 auto 2vh;color:#e3c286;font:13px var(--sans);letter-spacing:.5px}
.presence-home .chapter-content{max-height:none!important;overflow:visible!important;padding:0;mask-image:none}
.presence-home .chapter-acts{margin:0 auto 14px}
.presence-home .chapter-progress{text-align:center}
.presence-home .chapter-content>h2{text-align:center;font:400 15px/1.4 var(--serif);color:#d9c79f;letter-spacing:.3px;margin:2px 0 6vh}
.presence-home .chapter-panel{min-height:34svh;display:flex;flex-direction:column;justify-content:center;align-items:center}
.presence-home .chapter-panel p{font:400 clamp(22px,2.4vw,30px)/1.6 var(--serif);text-align:center;max-width:680px;margin:0 auto 18px;text-shadow:0 0 30px #f6c87a22}
.presence-home .chapter-panel blockquote{border:0;padding:0;margin:0 auto 18px;max-width:700px;text-align:center;font:400 clamp(26px,3vw,40px)/1.45 var(--serif);font-style:normal;color:#fff3dc;text-shadow:0 0 34px #f6c87a33}
.presence-home .chapter-panel cite{text-align:center;font:12px/1.6 var(--sans);letter-spacing:2.5px;text-transform:uppercase;color:#e3c286}
.presence-home .chapter-panel h3{font:11px/1.6 var(--sans)!important;letter-spacing:3.5px;text-transform:uppercase;color:#e3c286;margin:0 0 16px}
.presence-home .chapter-controls{justify-content:center;margin:5vh 0 2vh}
.presence-home .chapter-more{justify-content:center}
.presence-home .chapter-epilogue{margin:0 auto;text-align:center}
.presence-home.in-chapter .composer{max-width:560px;margin:3vh auto 0}
@media(max-width:600px){.presence-home .story-space{padding-top:1vh}.presence-home .chapter-content>h2{margin-bottom:4vh}.presence-home .chapter-panel{min-height:40svh}
  .presence-home .chapter-panel blockquote{font-size:25px}.presence-home .chapter-panel p{font-size:20px}.presence-home .chapter-controls{margin-top:4vh}}

/* Story cards are words in light, not pictures. */
.story-card{aspect-ratio:auto;min-height:250px;display:flex;flex-direction:column;padding:22px 20px 20px;background:linear-gradient(165deg,#ffffff0a,#ffffff02);border-color:#f0d29b24}
.story-card::after{display:none}
.story-card .sc-light{display:block;width:34px;height:34px;border-radius:50%;margin-bottom:22px;background:radial-gradient(circle,#fff6e0 0%,#ffd893cc 18%,#f2b2605c 40%,transparent 70%);
  transform:scale(calc(.85 + .25*var(--breath)));transition:transform .6s}
.story-card small{font:11px var(--sans);letter-spacing:2px;text-transform:uppercase;color:#e3c286;margin-bottom:8px}
.story-card strong{font:400 21px/1.3 var(--serif);color:#fff3de;margin-bottom:12px}
.story-card em{font:italic 15px/1.6 var(--serif);color:#c9c1b2;flex:1}
.story-card b{font:400 13px var(--sans);color:#e3c286;margin-top:16px}
.story-card:hover .sc-light{transform:scale(1.25)}
@media(max-width:600px){.story-card{min-height:230px}}
.presence-home.in-chapter .beyond,.presence-home.in-chapter .skip-prologue{display:none!important}
.presence-home .chapter-panel[data-size="mid"] blockquote{font-size:clamp(22px,2.4vw,31px)}.presence-home .chapter-panel[data-size="mid"] p{font-size:clamp(19px,2vw,25px)}
.presence-home .chapter-panel[data-size="long"] blockquote{font-size:clamp(19px,1.9vw,25px);line-height:1.55}.presence-home .chapter-panel[data-size="long"] p{font-size:clamp(17px,1.6vw,21px)}
@media(max-width:600px){.presence-home .chapter-panel[data-size="mid"] blockquote{font-size:21px}.presence-home .chapter-panel[data-size="long"] blockquote{font-size:17.5px}.presence-home .chapter-panel[data-size="long"] p{font-size:16.5px}}

/* The composer at rest: a breathing light that unfolds when approached. */
.talk-ui .composer{width:min(100%,600px);margin-left:auto;margin-right:auto;min-height:60px;
  transition:width .8s cubic-bezier(.2,.8,.2,1),min-height .6s ease,padding .6s ease,border-radius .8s ease,background .6s ease,border-color .6s ease,box-shadow .6s ease}
.composer-orb,.composer-hint{display:none}
.talk-ui .composer.closed{width:76px;min-height:76px;height:76px;padding:0;border-radius:50%;cursor:pointer;justify-content:center;align-items:center;
  background:radial-gradient(circle at 50% 46%,#fffaf0 0 9%,#ffe3ad 22%,#f0b763 42%,#9a6531 66%,#2a1a14 100%);border:1px solid #ffe6b899;
  box-shadow:0 0 0 1px #0007,0 6px 18px #0008,0 0 calc(14px + 26px*var(--breath,0)) rgb(242 190 110 / calc(.3 + .3*var(--breath,0)))}
.talk-ui .composer.closed textarea,.talk-ui .composer.closed #send{position:absolute;opacity:0;width:0;min-width:0;padding:0;pointer-events:none}
.talk-ui .composer textarea,.talk-ui .composer #send{transition:opacity .5s .25s ease}
/* A single warm light: a soft halo breathes around it; while listening, ripples go out from it. */
.talk-ui .composer.closed .composer-orb{display:block;position:absolute;inset:0;border-radius:50%;pointer-events:none}
.composer-orb::before,.composer-orb::after{content:'';position:absolute;inset:0;border-radius:50%;border:1.5px solid #ffdf9f;opacity:0}
.composer-orb::before{animation:orb-halo 4.8s ease-out infinite}
.composer-orb i{display:none}
.talk-ui .composer.closed .composer-hint{display:block;position:absolute;top:calc(100% + 12px);left:50%;transform:translateX(-50%);white-space:nowrap;
  font:13px/1 var(--serif);letter-spacing:1px;color:#f1dfbd;pointer-events:none}
.talk-ui .composer.closed:hover{transform:scale(1.04)}
.talk-ui .composer.closed~.whisper{margin-top:42px}
@keyframes orb-halo{0%{transform:scale(1);opacity:.55}70%,100%{transform:scale(1.45);opacity:0}}
@keyframes ripple{0%{transform:scale(1);opacity:.8}100%{transform:scale(2.1);opacity:0}}
.paused .composer-orb::before{animation:none}
@media(max-width:600px){.talk-ui .composer.closed{width:70px;height:70px;min-height:70px}}
.talk-ui .composer.closed{margin-bottom:40px}
.talk-ui .composer.closed:focus-within{outline:none}
@media(min-width:601px){.presence-home.pg-chat:not(.pg-talking) .presence-anchor{flex-basis:22svh}.presence-home.pg-chat:not(.pg-talking) .intro{margin-top:12px}}
html:has(body.presence-home),body.presence-home{overflow-x:clip}

/* One button: tap to write, press and hold to speak. The arrow shows once there is something to send. */
.composer .i-voice{display:none}.composer.empty .i-send{display:none}.composer.empty .i-voice{display:block}
.composer.closed,.composer #send{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;touch-action:none}
.composer #send{transition:transform .2s,box-shadow .3s,background .3s}
.composer #send{position:relative;overflow:visible}
.composer #send::after{content:'';position:absolute;inset:0;border-radius:50%;border:1.5px solid #ffdf9f;opacity:0;pointer-events:none}
.composer[data-voice="listening"] #send{background:#ffe7b8;box-shadow:0 0 calc(16px + 24px*var(--breath,0)) rgb(242 196 122 / .6)}
.composer[data-voice="listening"] #send::after,.composer[data-voice="listening"] .composer-orb::before,.composer[data-voice="listening"] .composer-orb::after{animation:ripple 1.4s ease-out infinite}
.composer[data-voice="listening"] .composer-orb::after{animation-delay:.7s}
.composer[data-voice="listening"] .i-voice path{animation:bars .9s ease-in-out infinite alternate;transform-origin:center}
@keyframes bars{to{transform:scaleY(.45)}}
.talk-ui .composer.closed[data-voice="listening"]{transform:scale(1.12)}
.composer[data-voice="speaking"] #send{background:#f2d9a8aa}
.composer[data-voice="listening"] .composer-hint{opacity:0!important}
/* While talking the composer stays sticky inside the whole conversation, not just its slot. */
.pg-talking .composer-slot{display:contents}

/* Docked: the composer rests at the bottom of the screen and unfolds right there. */
.talk-ui .composer.docked{position:fixed;left:50%;bottom:calc(max(18px,env(safe-area-inset-bottom)) + var(--kb,0px));z-index:20;margin:0;translate:-50% 0;width:min(600px,calc(100% - 32px))}
.talk-ui .composer.docked.closed{width:64px;height:64px;min-height:64px;left:auto;right:16px;translate:none}
/* Resting in the corner; its caption says what it does, then steps back so it never sits on the text. */
.talk-ui .composer.docked.closed .composer-hint{top:auto;left:auto;right:0;transform:none;bottom:calc(100% + 12px);padding:8px 12px;border-radius:999px;background:#0e0b14ee;border:1px solid #f0d29b44;font:12.5px/1 var(--sans);letter-spacing:.3px;box-shadow:0 4px 16px #0008;animation:hint-out 6s 1s forwards}
@keyframes hint-out{0%,70%{opacity:1}100%{opacity:0;visibility:hidden}}
.talk-ui .composer.docked:not(.closed){background:linear-gradient(120deg,#17131f,#100e16);box-shadow:0 8px 30px #000a}
.docking .connection-status:not(:empty){position:fixed;z-index:21;left:50%;translate:-50% 0;width:max-content;max-width:calc(100% - 32px);margin:0;padding:6px 14px;border-radius:999px;
  bottom:calc(max(18px,env(safe-area-inset-bottom)) + var(--kb,0px) + 74px);background:#0e0b14e6;text-align:center;backdrop-filter:blur(8px)}
.presence-home.in-chapter .conversation-shell{padding-bottom:110px}
/* The shell is its own stacking layer; lift it so the docked composer sits above the page below. */
.docking .conversation-shell{z-index:6}

/* Asking while reading: the conversation rises as a sheet over the page; the page stays where it was. */
.sheet-close{display:none}
.reader-talk .messages{display:none}
body.chapter-talk .messages{display:block;position:fixed;z-index:19;left:50%;translate:-50% 0;width:min(640px,calc(100% - 24px));
  bottom:calc(max(18px,env(safe-area-inset-bottom)) + var(--kb,0px) + 112px);height:min(54svh,520px);max-height:none;min-height:0;margin:0;overflow-y:auto;overscroll-behavior:contain;
  padding:52px 22px 14px;border-radius:24px;border:1px solid #f0d29b33;background:linear-gradient(170deg,#17131ff2,#0c0a12f7);backdrop-filter:blur(18px);box-shadow:0 20px 60px #000b;
  mask-image:none;-webkit-mask-image:none;animation:message-in .45s both}
body.chapter-talk .sheet-close{display:inline-flex;align-items:center;position:fixed;z-index:20;left:50%;translate:-50% 0;min-height:44px;padding:0 18px;border:0;border-radius:999px;background:transparent;
  color:#e3c286;font:13px var(--sans);letter-spacing:.5px;bottom:calc(max(18px,env(safe-area-inset-bottom)) + var(--kb,0px) + 112px + min(54svh,520px) - 48px)}
body.chapter-talk .messages .message{margin:12px 0 18px}
body.chapter-talk .messages .message.assistant p{font:17px/1.7 var(--serif)}
body.chapter-talk .messages .welcome .greeting,body.chapter-talk .messages .starter-replies{display:none}
body.chapter-talk .messages .welcome p{font:15px/1.6 var(--serif);color:#d9c79f}
.reader-talk .welcome small{display:block;margin-top:6px;font:12px var(--sans);color:#a6a698}.reader-talk .welcome small a{color:#d9c79f}
/* Reading pages share the conversation's look without the homepage around it. */
.reader-talk{position:relative;z-index:5;padding:0}.reader-talk .connection-status{margin:0}
.reader-talk .message p{text-shadow:none}
@media(max-width:600px){body.chapter-talk .messages{height:min(58svh,520px);padding:50px 18px 12px}
  body.chapter-talk .sheet-close{bottom:calc(max(18px,env(safe-area-inset-bottom)) + var(--kb,0px) + 112px + min(58svh,520px) - 48px)}}

/* The little "i" lives in the header on phones, clear of the composer and replies. */
@media(max-width:600px){.quiet-info{position:absolute;top:30px;bottom:auto;left:auto;right:64px}.quiet-info summary{width:30px;height:30px}
  .quiet-info>div{bottom:auto;top:38px;right:-50px}.pg-talking .quiet-info{position:fixed}
  .starter-replies{padding:2px}.touch-light{bottom:14px}.pg-chat .touch-light{bottom:6px}}
.docking .quiet-info>div{z-index:22}
/* No square ghosts: a blurred backdrop on a round, moving light renders as a box in Safari, so the
   resting light has none; and the talking composer no longer sits on full-width dark bands. */
.talk-ui .composer.closed{-webkit-backdrop-filter:none;backdrop-filter:none}
.pg-talking .composer::before,.pg-talking .composer::after{display:none}