:root{color-scheme:dark;--bg:#0c131a;--surface:#111e26;--text:#ece9e1;--muted:#a2afb7;--line:#2a3842;--accent:#e6b78d;--teal:#a2c9c5;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:16px;background:var(--bg);color:var(--text)}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0}
main{width:min(calc(100% - 40px),820px);margin-inline:auto;padding:28px 0 34px}
main>*,form>*,.tool-actions,.submit-row>*{min-width:0}
button,textarea{font:inherit}
button{min-height:46px;border:1px solid #3a4b56;border-radius:7px;background:var(--surface);color:var(--text);padding:12px 17px;line-height:1.4;font-weight:600;cursor:pointer;white-space:normal;overflow-wrap:anywhere;transition:background .15s}
button:hover:not(:disabled){background:#263641;border-color:#889da3}
button:disabled{opacity:.45;cursor:default}
button.primary{background:var(--accent);border-color:var(--accent);color:#222027}
button.primary:hover:not(:disabled){background:#f2cbaa}
button.primary>span{padding-left:18px;font-size:20px;line-height:1}
:focus-visible{outline:2px solid var(--teal);outline-offset:4px}
a{color:inherit;text-underline-offset:4px;text-decoration-color:#6c8588;overflow-wrap:anywhere}
a:hover{color:var(--accent)}
p{margin:0 0 16px;line-height:1.7;overflow-wrap:anywhere}
h1,h2,h3{margin:0;overflow-wrap:anywhere}
.small{font-size:12px;line-height:1.65}
.muted{color:var(--muted)}
.eyebrow{font:600 11px/1.5 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.masthead{display:flex;justify-content:space-between;align-items:center;gap:18px;padding-bottom:24px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;font-size:12px;font-weight:750;letter-spacing:.16em}
.brand-mark{display:inline-block;flex:0 0 27px;width:27px;height:27px;position:relative}
.brand-mark::before,.brand-mark::after{content:"";position:absolute;top:3px;width:17px;height:21px;border:1px solid var(--accent);transform:skewY(-16deg)}
.brand-mark::after{left:9px;top:0;border-color:var(--teal)}
.edition{font-size:11px;color:var(--muted);text-align:right}
.cover{min-height:280px;background:var(--bg);position:relative;border-block:1px solid var(--line);padding:30px 28px}
.cover-copy{position:relative;max-width:400px}
.cover .eyebrow{font-size:10px;margin-bottom:18px}
h1{font-size:clamp(48px,8vw,74px);letter-spacing:-.04em;line-height:.94;font-weight:800}
h1 [data-story="cover_b"]{color:var(--accent)}
.tagline{font-family:Georgia,"Times New Roman",serif;font-size:21px;margin:20px 0 0}
.welcome{padding:34px 28px 0}
.welcome h2{font:400 clamp(25px,4vw,31px)/1.35 Georgia,"Times New Roman",serif;margin:13px 0 18px}
.welcome>p:not(.eyebrow){max-width:570px;color:var(--muted)}
.start-row{display:flex;align-items:center;flex-wrap:wrap;gap:14px 24px;margin-top:25px}
.how-to{margin-top:30px;padding-top:24px;border-top:1px solid var(--line)}
.how-to p{font-size:14px;color:var(--muted)}
.how-to p.small{font-size:12px}
.how-to strong{color:var(--text);font-weight:600}
.hero.playing .cover{display:none}
.hero.playing .masthead{border-bottom:1px solid var(--line)}
.story-tools{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:20px 28px 8px}
.tool-actions{display:flex;gap:14px;flex-wrap:wrap}
.text-button{border-color:transparent;background:transparent;color:var(--muted);font-size:12px;padding-inline:2px}
.passage{padding:20px 28px 28px}
.location{font-size:11px;letter-spacing:.07em;color:var(--teal);margin-bottom:12px;text-transform:uppercase}
.passage h2{font:400 clamp(28px,4vw,36px)/1.25 Georgia,"Times New Roman",serif;letter-spacing:-.015em;margin-bottom:25px}
.prose{font:400 clamp(19px,2.8vw,21px)/1.8 Georgia,"Times New Roman",serif}
.prose p{margin-bottom:19px;white-space:pre-line}
.prose p:last-child{margin-bottom:0}
.play{margin:0 28px;padding-top:26px;border-top:1px solid var(--line)}
.input-heading{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:12px}
.input-heading label{font-size:20px;font-weight:700}
.input-heading>span{flex-shrink:0;font-variant-numeric:tabular-nums}
textarea{display:block;width:100%;max-width:100%;min-height:138px;resize:vertical;padding:18px 20px;border:1px solid #4e636e;border-radius:8px;background:#101c24;color:var(--text);font-size:clamp(20px,3vw,23px);font-weight:650;line-height:1.5}
textarea::placeholder{color:#889a9e;font-weight:400}
.helper{font-size:12px;color:var(--muted);margin:10px 0 18px}
.submit-row{display:flex;align-items:center;flex-wrap:wrap;gap:14px 20px}
.submit-row>span{flex:1 1 150px}
@keyframes breathe{50%{opacity:.5}}
details{font-size:14px;color:var(--muted)}
summary{cursor:pointer;min-height:46px;padding-block:14px;line-height:1.5;color:var(--text);overflow-wrap:anywhere}
details[open]>summary{margin-bottom:8px}
.original{margin-top:20px}
.original-options{display:grid;gap:8px}
.original-options button{width:100%;text-align:left;font-weight:500}
.notice,.feedback{padding:18px;background:#172730;border:1px solid var(--line);border-radius:8px;font-size:14px;margin:10px 28px 20px}
.feedback{color:#f1caa5}
.button-row{display:flex;flex-wrap:wrap;gap:10px}
.ending{margin:0 28px;padding:25px 0;border-top:1px solid #62675b}
.ending h3{font:400 24px/1.4 Georgia,"Times New Roman",serif;margin-bottom:13px}
#copy-status{margin-top:12px}
.notebook-section{margin:30px 28px 0;border-top:1px solid var(--line)}
.notebook-section>details{border-bottom:1px solid var(--line)}
.summary-meta{float:right;margin-left:12px;font:11px/2 ui-monospace,monospace;color:var(--muted)}
.possessions{display:flex;flex-wrap:wrap;gap:7px;margin:8px 0 18px}
.possessions span{font-size:11px;padding:4px 9px;border:1px solid #364b52;border-radius:4px;overflow-wrap:anywhere;max-width:100%;color:var(--teal)}
.clue-list{display:grid;gap:17px;margin-bottom:18px}
.clue-list h3{font-size:14px;line-height:1.4;margin-bottom:6px;color:var(--text)}
.clue-list p{font-size:13px;line-height:1.65;margin:0}
.journal-text{max-height:450px;overflow-y:auto;padding-right:15px;scrollbar-color:#50626b transparent}
.journal-text section{border-top:1px solid var(--line);padding-top:16px;margin-bottom:25px}
.journal-text h3{font:500 17px/1.5 Georgia,"Times New Roman",serif;color:var(--text);margin-bottom:12px}
.journal-text p{font:400 16px/1.7 Georgia,"Times New Roman",serif}
.inspector{margin:25px 28px 0;padding-top:6px}
.inspector p{font-size:13px}
.inspector p.small{font-size:12px}
.metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;padding:20px 0}
.metrics strong{display:block;font:600 28px/1.3 ui-monospace,monospace;color:var(--text);overflow-wrap:anywhere}
.metrics>div:first-child strong{color:var(--accent)}
.metrics span{display:block;font-size:11px;margin-top:6px}
.ranking{padding:0;list-style:none}
.ranking li{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding-block:9px;border-bottom:1px solid var(--line);font-size:12px}
.ranking li span:first-child{min-width:0;overflow-wrap:anywhere}
.ranking li span:last-child{flex:0 0 auto;font-variant-numeric:tabular-nums;color:var(--text)}
footer{border-top:1px solid var(--line);padding:25px 28px 0;margin-top:32px}
.model-line{display:flex;align-items:center;gap:9px;font-size:11px;color:var(--muted);margin-bottom:14px}
.model-dot{width:6px;height:6px;border-radius:50%;flex:0 0 6px;background:var(--accent)}
.model-dot.ready{background:#8fc1af}
.footer-principle{font-size:13px;color:var(--muted)}
.footer-principle strong{color:var(--text);font-weight:500}
.credit{font-size:11px;color:var(--muted);line-height:1.9;margin-top:20px}
#recover{margin-left:28px}
@media(max-width:560px){
 main{width:calc(100% - 36px);padding-top:19px}
 .masthead{padding-bottom:18px}.brand{font-size:11px;gap:8px}.edition{max-width:105px;font-size:10px}
 .cover{padding:24px 0;min-height:259px;background-position:60% center}.cover-copy{max-width:310px}.cover .eyebrow{font-size:9px}
 .welcome{padding:28px 0 0}.story-tools{padding:18px 0 6px}.tool-actions{gap:8px}.tool-actions button{font-size:11px}
 .passage{padding:20px 0 26px}.play{margin-inline:0}.last-action{margin-inline:0}
 .notice,.feedback,.ending,.notebook-section,.inspector{margin-inline:0}footer{padding-inline:0}
 .submit-row{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}.submit-row .primary{width:100%}
 .metrics{grid-template-columns:minmax(0,1fr);gap:16px}.metrics>div{display:flex;flex-wrap:wrap;align-items:baseline;gap:14px}.metrics strong{min-width:84px;font-size:25px}
 textarea{padding-inline:16px}.button-row>button{flex:1 1 180px}#recover{margin-left:0}
}
@media(prefers-reduced-motion:reduce){.evaluating{animation:none}button{transition:none}}
/* Scene exchanges keep the book's typography; no chat bubbles or forced scroll. */
.player-words{font:italic 14px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--teal);margin-bottom:12px;white-space:pre-line}
.metric-heading{margin:20px 0 0;color:var(--teal)}
.narrator-link{display:inline-block;margin:12px 0 0 18px}
#single-choice:not([hidden]){margin-bottom:24px}

.reading-tools{display:block;margin-top:20px;color:var(--teal)}
#book-status{margin:18px 0 0}.evaluating{animation:breathe 1.5s ease-in-out infinite}
@media(prefers-reduced-motion:reduce){.evaluating{animation:none}}
/* Read, remember and wait on the same book page. */
.reading-nav{display:flex;flex-wrap:wrap;gap:6px 18px;margin:0 0 8px;border-bottom:1px solid var(--line)}
.reading-nav .text-button{font-size:13px;padding:10px 0;border-radius:0;min-width:0}
.reading-nav [aria-pressed=true]{color:var(--accent);border-bottom-color:var(--accent)}
#reading-label{margin-bottom:22px}
.last-words{border-left:2px solid var(--teal);padding-left:14px;margin:0 0 23px}
.last-words p{font-size:15px;line-height:1.55;margin:5px 0 0;white-space:pre-line;color:var(--teal)}
.first-steps{margin-bottom:24px;padding:0 0 20px;border-bottom:1px solid var(--line)}
.first-steps summary{color:var(--teal);font-weight:600}
.first-steps p{font-size:14px}
.first-steps p.small{font-size:12px}
.starter-examples{display:flex;flex-wrap:wrap;gap:8px}
.starter-examples button{flex:1 1 180px;font-size:12px;font-weight:500}
.reading-wait{margin:18px 0 0;padding:16px 0 0;border-top:1px solid var(--line)}
.wait-heading{display:flex;align-items:baseline;flex-wrap:wrap;gap:8px 10px}
.wait-heading p{flex:1 1 150px;min-width:0;margin:0;font-size:14px;line-height:1.5;color:var(--teal)}
.wait-dot{width:7px;height:7px;border-radius:50%;background:var(--teal);flex:0 0 7px;animation:breathe 1.5s ease-in-out infinite}
#wait-elapsed{font-variant-numeric:tabular-nums;white-space:nowrap}
#wait-detail{margin:9px 0 0}
.journal-text>details{padding-block:4px;border-top:1px solid var(--line)}
.journal-text summary{padding:12px 0;color:var(--teal);font-size:14px;line-height:1.6}
.journal-intent{white-space:pre-line}
.journal-outcome{display:block;font:11px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--muted);margin-top:5px}
.journal-text details>p:last-child{margin-bottom:20px}
@media(prefers-reduced-motion:reduce){.wait-dot{animation:none}}
/* A calm halo around the narrative, without changing its dimensions. */
.passage{position:relative;isolation:isolate}
.passage::before{content:"";position:absolute;inset:0 -8px;border:1px solid rgba(162,201,197,.32);border-radius:15px;box-shadow:0 0 12px rgba(162,201,197,.24),inset 0 0 18px rgba(162,201,197,.04);pointer-events:none;opacity:0;z-index:-1}
.passage.is-thinking::before{animation:story-halo 2.6s ease-in-out infinite}
@keyframes story-halo{0%,100%{opacity:.3}50%{opacity:.9}}
.header-tools{display:flex;align-items:center;justify-content:flex-end;gap:14px;flex-wrap:wrap}
.language-toggle{display:flex;align-items:center;gap:3px;padding:2px;border:1px solid var(--line);border-radius:7px}
.language-toggle button{padding:5px 9px;min-height:38px;font-size:11px;background:transparent;border-color:transparent;line-height:1.2}
.language-toggle [aria-pressed=true]{color:var(--bg);background:var(--teal)}
@media(max-width:560px){.header-tools{gap:7px}.header-tools .edition{display:none}.language-toggle button{min-height:40px}}
@media(prefers-reduced-motion:reduce){.passage.is-thinking::before{animation:none;opacity:.65}}
/* A completed turn returns to its heading without changing keyboard focus. */
#passage { scroll-margin-block-start: 24px; }

/* Startup and optional execution trace share the book column. */
.model-startup{padding:14px 0;margin:0 0 24px;border-bottom:1px solid var(--line);overflow-wrap:anywhere}
.model-startup p{margin:4px 0;font-size:13px}
.model-startup #startup-title{color:var(--teal);font-weight:600}
.model-startup.is-loading #startup-title::before{content:"";display:inline-block;width:7px;height:7px;margin-right:9px;border-radius:50%;background:var(--teal);animation:breathe 1.5s ease-in-out infinite}
.call-trace{margin:18px 0;padding:12px 0;border-top:1px solid var(--line)}
.call-trace summary{font-size:13px;color:var(--muted)}
.call-trace ol{padding-left:22px;margin:14px 0;overflow-wrap:anywhere}
.call-trace li{padding:8px 0;font-size:13px;min-width:0}
.call-trace p{margin:5px 0;line-height:1.6}
@media(prefers-reduced-motion:reduce){.model-startup.is-loading #startup-title::before{animation:none}}

.story-library{padding:28px 0 24px}
.story-library h2{font-size:24px;margin-bottom:8px}
.story-options{display:grid;gap:10px;margin-top:18px}
.story-option{width:100%;text-align:left;padding:16px 18px;display:grid;gap:5px;min-width:0;white-space:normal;overflow-wrap:anywhere}
.story-option[aria-pressed="true"]{border-color:var(--accent);background:#28282a}
.story-option strong{font-size:17px;line-height:1.35}
.story-option span{font-size:13px;line-height:1.45;color:var(--muted)}
.library-navigation{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px}
.library-navigation button{min-width:44px;min-height:44px;font-size:20px}
.library-navigation span[role="status"]{text-align:center}
#cover-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:right center;pointer-events:none}
.header-tools{flex-wrap:wrap}
@media(max-width:480px){.story-library{padding-top:18px}.masthead{align-items:flex-start;gap:12px}.header-tools{justify-content:flex-end;gap:8px}.story-option{padding:14px 16px}}

/* Shared book width; settings stay out of the narrative prose. */
.narrator-settings { margin-block: 1rem; }
.narrator-settings label { display:block; margin-block:1rem .5rem; }
.narrator-settings select { box-sizing:border-box; width:100%; min-width:0; max-width:100%; font:inherit; color:inherit; background:#16212a; border:1px solid #465761; border-radius:.5rem; padding:.75rem; }
.narrator-settings p { overflow-wrap:anywhere; }
.chance-result { padding-block:.75rem; color:var(--muted,#9baeb3); border-top:1px solid #33434b; overflow-wrap:anywhere; }