@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Libre+Caslon+Display&display=swap');
:root{color-scheme:dark;--cream:#f0e9d9;--muted:#aeb9b5;--gold:#d6b17b;--reading-scale:1}*{box-sizing:border-box}body{margin:0;background:#0c191e;color:var(--cream);font-family:'DM Sans',sans-serif;min-height:100svh}.backdrop{position:fixed;inset:0;background:linear-gradient(90deg,rgba(8,21,27,.96) 0%,rgba(8,21,27,.84) 32%,rgba(8,21,27,.2) 80%),linear-gradient(0deg,#0c191e 0%,transparent 40%),url('assets/island.png') center/cover;background-size:cover;background-repeat:no-repeat;z-index:-2;transition:filter 2s}.grain{position:fixed;inset:0;pointer-events:none;z-index:-1;background:radial-gradient(ellipse at 30% 40%,transparent,#07121766)}header,footer{display:flex;justify-content:space-between;align-items:center;margin:0 5vw}header{height:105px;border-bottom:1px solid #d9e3dc22}.brand{display:flex;align-items:center;gap:12px;font-size:24px;color:var(--cream);text-decoration:none;letter-spacing:-1px}.brand-icon{color:var(--gold);font-size:34px}.beta{font-size:9px;letter-spacing:2px;color:var(--muted);margin-left:18px;border-left:1px solid #ffffff33;padding-left:25px}button,input,select{font:inherit}button{cursor:pointer;color:inherit}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--gold);outline-offset:5px}.quiet{border:0;background:transparent;color:var(--muted);padding:10px 0;font-size:12px}.quiet:hover{color:var(--cream)}#settingsToggle span{margin-left:15px;font-size:20px}main{min-height:calc(100svh - 180px);position:relative}.intro{padding:65px 0 55px 10vw;max-width:800px}.eyebrow{color:var(--gold);font-size:10px;letter-spacing:3px;font-weight:600}h1,h2{font-family:'Libre Caslon Display',Georgia,serif;font-weight:400;letter-spacing:-2px}h1{font-size:clamp(75px,8.3vw,128px);line-height:.9;margin:30px 0}h1 em{font-weight:400;color:#dec69c}.rule{height:1px;background:var(--gold);width:45px;margin:35px 0 25px}.synopsis{font-family:Georgia,serif;font-size:18px;line-height:1.8;color:#d1d8d1}.intro-note{font-size:11px;color:var(--muted);margin:25px 0}.primary{display:flex;align-items:center;justify-content:space-between;gap:45px;background:#dec292;color:#17252a;border:1px solid #dec292;padding:19px 25px;font-size:12px;font-weight:700;min-width:225px}.primary:hover{background:#f1d6a7}.primary span{font-size:20px;font-weight:400}.book-meta{display:flex;gap:25px;margin-top:40px;color:var(--muted);font-size:10px}footer{min-height:75px;border-top:1px solid #ffffff1c;font-size:9px;color:#9aa9a7;letter-spacing:2px}#reader{max-width:790px;margin-left:8vw;padding:25px 30px 65px}.reader-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:30px;gap:20px}#pageNumber{font-size:10px;color:var(--muted);letter-spacing:2px}article{max-width:635px}h2{font-size:55px;line-height:1.05;margin:20px 0 26px}h2:focus{outline:none}.audio-bar{display:flex;gap:15px;align-items:center;background:#10252bd9;border:1px solid #ffffff19;padding:12px 17px}.play{width:36px;height:36px;border-radius:50%;border:1px solid #d8c49e;background:transparent;color:var(--gold);font-size:12px}.audio-info{flex:1;display:flex;flex-direction:column;gap:8px}.audio-info span{font-size:8px;letter-spacing:2px;color:var(--muted)}input[type=range]{accent-color:var(--gold);width:100%;height:3px;cursor:pointer}#time{font-size:10px;color:var(--muted);font-variant-numeric:tabular-nums}#prose{font-family:Georgia,serif;font-size:calc(21px * var(--reading-scale));line-height:1.9;color:#e3e3d7;margin:28px 0}.memory{color:var(--gold);font-size:11px;line-height:1.8}.choice-heading{font-size:9px;letter-spacing:2px;color:var(--muted);margin:30px 0 12px}#choices{display:grid;gap:9px}.choice{background:#10252ad9;border:1px solid #ffffff24;padding:17px 20px;text-align:left;display:flex;align-items:center;gap:18px;width:100%}.choice:hover{background:#233b3de8;border-color:var(--gold)}.choice .number{font-size:10px;color:var(--gold);border:1px solid #bca98066;width:24px;height:24px;display:grid;place-items:center;flex-shrink:0}.choice strong{font-weight:500;font-size:13px;display:block}.choice small{display:block;color:var(--muted);font-size:10px;margin-top:7px}.choice .arrow{margin-left:auto;color:var(--gold)}aside{position:fixed;right:4vw;top:100px;width:340px;max-height:75svh;overflow:auto;background:#11252bfa;border:1px solid #bca98055;padding:30px;box-shadow:0 20px 90px #0009;z-index:4}aside h3{font-family:Georgia,serif;font-size:24px;font-weight:400;margin:0 0 25px}aside label{display:block;font-size:12px;margin:22px 0}aside input[type=range]{display:block;margin-top:15px}aside select{margin-left:12px;background:#142d32;color:var(--cream);padding:5px}.check{display:flex!important;gap:10px;align-items:center}aside p,aside li{font-size:12px;color:var(--muted);line-height:1.8}#inventory{font-size:12px;color:var(--gold);line-height:2}#history{padding-left:18px}#ending{border-top:1px solid #d4b18066;padding-top:24px;margin-top:25px}#ending p{font-family:Georgia,serif;color:var(--muted);font-style:italic}.status{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:#132b31;border:1px solid #bda57b66;padding:12px 20px;font-size:12px;max-width:90vw}.status:empty{display:none}[hidden]{display:none!important}.reading .backdrop{filter:brightness(.65)}.reduced *{animation:none!important;transition:none!important}@media(prefers-reduced-motion:reduce){*{transition:none!important}}@media(max-width:700px){header{height:80px}.beta{display:none}.brand{font-size:21px}header .quiet{font-size:10px}.backdrop{background-position:62% center;background-image:linear-gradient(90deg,#08151be8,#08151b77),linear-gradient(0deg,#0c191e,transparent),url('assets/island.png')}.intro{padding:65px 7vw 45px}h1{font-size:90px}.synopsis{font-size:16px}.synopsis br{display:none}.book-meta{gap:15px;font-size:9px;flex-wrap:wrap}footer{font-size:8px;letter-spacing:1px;gap:15px}#reader{margin:0;padding:25px 7vw 45px}h2{font-size:43px}#prose{font-size:calc(18px * var(--reading-scale))}.reader-top{gap:10px}.reader-top .quiet{font-size:10px}aside{width:calc(100vw - 30px);right:15px;top:90px}.choice{padding:15px 12px}.choice strong{font-size:12px}}

.tower .backdrop{background-image:linear-gradient(90deg,rgba(8,21,27,.96),rgba(8,21,27,.8) 40%,rgba(8,21,27,.15)),linear-gradient(0deg,#0c191e,transparent 40%),url(assets/lantern-room.png)}

.spoken-word{will-change:opacity}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* Cinematic reader: the scene is the canvas, the interface is an overlay. */
.screen-tools{display:flex;align-items:center;gap:26px}
.reading{background:#050b10}
.reading header{position:fixed;top:0;left:0;right:0;height:76px;z-index:3;border:0;margin:0;padding:0 4vw;background:linear-gradient(#02080cc9,transparent)}
.reading header .beta,.reading footer{display:none}
.reading .brand{font-size:18px;opacity:.75}
.reading .brand-icon{font-size:25px}
.reading main{min-height:100svh}
.reading .backdrop{background-image:linear-gradient(0deg,rgba(2,8,12,.95),rgba(2,8,12,.18) 60%,rgba(2,8,12,.2)),url('assets/island.png');background-position:center;transition:filter 1.5s,background-image 1s}
.reading.tower .backdrop{background-image:linear-gradient(0deg,rgba(2,8,12,.95),rgba(2,8,12,.12) 70%),url('assets/lantern-room.png')}
#reader{max-width:none;margin:0;min-height:100svh;padding:110px 6vw 126px;display:flex;flex-direction:column;justify-content:flex-end;align-items:center}
.reader-top{position:fixed;bottom:26px;left:4vw;right:4vw;margin:0;z-index:2;pointer-events:none}
.reader-top>*{pointer-events:auto}
#pageNumber{display:none}
article{width:100%;max-width:880px;text-align:center}
#place{font-size:9px;letter-spacing:4px}
h2{font-size:clamp(32px,4vw,52px);margin:12px 0 22px;text-shadow:0 2px 25px #000}
#prose{font-size:calc(clamp(18px,2vw,25px) * var(--reading-scale));line-height:1.65;text-shadow:0 2px 10px #000,0 1px 35px #000;margin:22px 0;max-height:42svh;overflow:auto;scrollbar-width:thin;text-wrap:pretty}
.audio-bar{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);width:min(540px,56vw);border:1px solid #ffffff20;background:#071217b3;backdrop-filter:blur(18px);border-radius:50px;padding:10px 18px;z-index:2;gap:12px}
.audio-info span{display:none}
#showChoices{white-space:nowrap;font-size:10px}
#time{white-space:nowrap;font-size:9px}
#memory{display:none}
#choices,.choice-heading,#ending{display:none}
.deciding #choices{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px}
.deciding .choice-heading,.deciding #ending:not([hidden]){display:block}
.deciding #prose{max-height:28svh;font-size:calc(18px * var(--reading-scale));color:#d3d8d5}
.choice{text-align:left;border-radius:4px;background:#0b1d25bd;backdrop-filter:blur(16px);padding:18px;min-height:85px}
.choice .number{border:0;font-size:13px}
#ending{margin-top:16px;padding-top:20px}
#ending .primary{margin:auto}
.reading header,.reader-top,.audio-bar{transition:opacity .5s,visibility .5s}
.controls-hidden.reading header,.controls-hidden .reader-top,.controls-hidden .audio-bar{opacity:0;visibility:hidden;pointer-events:none}
.reading aside{top:85px;text-align:left;z-index:5}
.reading .status{bottom:88px;z-index:6}
@media(max-width:700px){
 .screen-tools{gap:16px}.screen-tools .quiet{font-size:10px}
 .reading header{height:64px}.reading .brand{font-size:15px}.reading .brand-icon{display:none}
 #reader{padding:90px 6vw 150px}.audio-bar{bottom:65px;width:90vw;padding:9px 14px}
 .reader-top{bottom:15px;left:6vw;right:6vw}#prose{max-height:45svh;line-height:1.65}
 .deciding #prose{max-height:23svh;font-size:calc(16px * var(--reading-scale))}
 .deciding #choices{grid-template-columns:1fr}.choice{min-height:65px;padding:12px}
 h2{font-size:34px;margin-bottom:14px}.choice-heading{margin-top:16px}
}
@media(max-height:600px) and (min-width:701px){#reader{padding-top:80px;padding-bottom:90px}#prose{font-size:18px;line-height:1.5}h2{font-size:30px;margin:8px}.deciding #prose{max-height:19svh}}
/* Fluid cinema typography is based on CSS viewport width, including desktop zoom. */
:root{--ui-size:clamp(16px,1vw,32px);--story-size:clamp(26px,1.8vw,60px);--choice-size:clamp(28px,1.45vw,50px)}
.quiet,.screen-tools .quiet,.reader-top .quiet{font-size:var(--ui-size);min-height:44px}
.reading header{height:clamp(76px,6vw,150px)}
.reading .brand{font-size:clamp(18px,1.3vw,40px)}
.reading .brand-icon{font-size:clamp(25px,1.8vw,54px)}
#reader{padding-top:clamp(100px,8vw,220px);padding-bottom:clamp(140px,9vw,280px)}
article{max-width:clamp(880px,68vw,2200px)}
h2{font-size:clamp(38px,3.3vw,100px);letter-spacing:-.025em}
#place,.choice-heading{font-size:clamp(12px,.8vw,24px);letter-spacing:.22em}
#prose,.deciding #prose{font-size:calc(var(--story-size) * var(--reading-scale));line-height:1.55}
.deciding #prose{max-height:26svh;color:#e2e5df}
.deciding #choices{grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:clamp(16px,3vw,100px);margin-top:clamp(12px,1.3vw,40px)}
.choice{position:relative;border:0;border-top:1px solid #d6b17b80;border-bottom:1px solid #d6b17b40;border-radius:0;background:linear-gradient(90deg,transparent,#07121755,transparent);backdrop-filter:none;min-height:100px;padding:clamp(20px,1.6vw,52px) clamp(8px,1vw,32px);gap:clamp(15px,1.2vw,38px);text-shadow:0 2px 12px #000;transition:background .25s,border-color .25s,transform .25s}
.choice strong{font-family:'Libre Caslon Display',Georgia,serif;font-weight:400;font-size:calc(var(--choice-size) * var(--reading-scale));line-height:1.15;color:var(--cream)}
.choice small{font-size:calc(clamp(14px,.9vw,28px) * var(--reading-scale));line-height:1.5;color:#c6cec6;margin-top:.6em}
.choice .number{font-size:var(--ui-size);width:auto;height:auto;opacity:.8}
.choice .arrow{font-size:clamp(24px,1.8vw,50px);transition:transform .25s}
.choice:hover,.choice:focus-visible{background:linear-gradient(90deg,transparent,#d6b17b20,transparent);border-color:var(--gold)}
.choice:hover .arrow,.choice:focus-visible .arrow{transform:translateX(6px)}
.choice-heading{margin-top:clamp(22px,2vw,60px)}
.audio-bar{width:clamp(600px,47vw,1500px);max-width:90vw;bottom:clamp(20px,1.6vw,50px);padding:clamp(10px,.8vw,25px) clamp(18px,1.5vw,48px);gap:clamp(12px,1vw,32px)}
.play{width:clamp(44px,3vw,88px);height:clamp(44px,3vw,88px);flex-shrink:0;font-size:clamp(16px,1.2vw,32px)}
#showChoices,#time,#replay{font-size:var(--ui-size)}
#replay{min-width:44px;font-size:clamp(24px,1.6vw,42px)}
.audio-info{min-width:50px}input[type=range]{min-height:24px}
.reader-top{bottom:clamp(26px,2.2vw,72px)}
.primary{font-size:var(--ui-size);padding:clamp(19px,1.4vw,42px) clamp(25px,2vw,64px)}
aside{width:clamp(340px,24vw,760px);max-width:calc(100vw - 30px);top:clamp(85px,6vw,170px)}
aside h3{font-size:clamp(24px,1.6vw,48px)}
aside label,aside p,aside li,#inventory{font-size:var(--ui-size)}
.synopsis{font-size:clamp(18px,1.3vw,38px)}
.intro-note,.book-meta{font-size:var(--ui-size)}
@media(min-width:1800px){.intro{max-width:55vw}h1{font-size:clamp(128px,8vw,260px)}.reading .status{bottom:160px;font-size:var(--ui-size)}}
@media(max-width:700px){
 #reader{padding:85px 6vw 170px}.reading header{height:70px}.reading .brand{font-size:16px}
 .screen-tools{gap:12px}.screen-tools .quiet{font-size:13px}
 .audio-bar{bottom:65px;gap:8px;padding:8px 12px}.reader-top{bottom:12px}
 #time{font-size:11px}#showChoices{font-size:12px}.play{width:40px;height:40px}
 #prose,.deciding #prose{font-size:calc(20px * var(--reading-scale))}
 .deciding #prose{max-height:23svh}.deciding #choices{grid-template-columns:1fr;gap:12px}
 .choice{padding:16px 8px;min-height:80px}.choice strong{font-size:calc(23px * var(--reading-scale))}.choice small{font-size:calc(14px * var(--reading-scale))}
 h2{font-size:36px}.choice-heading{margin-top:18px}
}

/* Choices reveal only the action, without hints or directional ornament. */
.choice{justify-content:center;text-align:center}
.library{background:#08151b}.library header .eyebrow{letter-spacing:.15em}.library main{padding:30px 8vw 90px}.library-intro{padding:20px 0 40px}.library-intro h1{font-size:clamp(70px,7vw,200px);margin:30px 0}.library-intro>p:last-child{font-family:Georgia,serif;font-size:clamp(20px,1.5vw,42px);line-height:1.6;color:var(--muted)}.books{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,480px),1fr));gap:32px}.book-card{max-width:none;min-height:500px;border:1px solid #d6b17b44;text-align:left;display:flex;align-items:end;padding:clamp(28px,3vw,80px);background:linear-gradient(0deg,#02090ff5,#02090f25),var(--book-art) center/cover}.book-card h2 a{color:var(--cream);text-decoration:none}.book-card p{font-size:clamp(18px,1.2vw,34px);line-height:1.6;max-width:45em}.book-card .eyebrow,.book-card .book-details{font-size:var(--ui-size)}.book-card .primary{display:inline-flex;text-decoration:none;margin-top:16px}.choice{text-decoration:none}.route-content{max-width:70ch;margin:100px auto;padding:30px;font-size:24px;line-height:1.7}.route-content h1{font-size:54px}.route-content a{color:var(--gold);display:inline-block;margin:10px}.reading .backdrop,.reading.tower .backdrop{background-image:linear-gradient(0deg,rgba(2,8,12,.95),rgba(2,8,12,.18) 60%,rgba(2,8,12,.2)),var(--scene-art,url('/assets/island.png'))}
@media(max-width:700px){.library header .eyebrow{display:none}.library main{padding-left:6vw;padding-right:6vw}.book-card{min-height:450px}.reader-top .quiet{font-size:13px}}
body[data-story]:not(.reading) .backdrop{background-image:linear-gradient(90deg,#08151bf0,#08151b66),var(--scene-art,url('/assets/island.png'))}
.voice-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,360px),1fr));gap:32px}.voice-card{max-width:none;text-align:left;padding:clamp(24px,2.5vw,64px);border-top:1px solid #d6b17b66;background:linear-gradient(135deg,#d6b17b08,transparent)}.voice-card h2{margin-top:0}.voice-card p{font-size:var(--ui-size);line-height:1.6;color:var(--muted)}.voice-card audio{width:100%;margin-top:20px}.library footer a,aside a{color:var(--gold)}
/* Romance keeps the cinematic layout, with a warm paper palette. */
body.watercolor{--cream:#382c35;--muted:#695a65;--gold:#986444;background:#f7efdf}
.watercolor.reading header{background:linear-gradient(#f8efdfdd,transparent)}
.watercolor[data-story]:not(.reading) .backdrop{background-image:linear-gradient(90deg,#faf2e3f0,#faf2e385 50%,#faf2e310),var(--scene-art)}
.watercolor.reading .backdrop{background-image:linear-gradient(0deg,#faf2e3fa,#faf2e3d9 30%,#faf2e34d 60%,transparent 80%),var(--scene-art)}
.watercolor #prose,.watercolor.deciding #prose{color:#382c35;text-shadow:none}
.watercolor h2{ text-shadow:none }
.watercolor .choice{background:linear-gradient(90deg,transparent,#f9eed866,transparent);border-color:#98644470;text-shadow:none}
.watercolor .choice:hover,.watercolor .choice:focus-visible{background:linear-gradient(90deg,transparent,#dba97d40,transparent);border-color:#986444}
.watercolor .audio-bar{background:#faf1e2d9;border-color:#98644455}
.watercolor aside{background:#faf1e2fa}.watercolor aside select{background:#eee0cb;color:#382c35}
.watercolor .status{background:#faf1e2;color:#382c35}
.watercolor .primary{background:#986444;border-color:#986444;color:#fff7e8}.watercolor .primary:hover{background:#7b4b32}
.watercolor .synopsis{color:#453643;text-shadow:none}
.watercolor .screen-tools .quiet,.watercolor .reader-top .quiet{color:#453643}
.watercolor header{background:linear-gradient(#faf2e3c9,transparent)}