.mermaid-reader{position:fixed;inset:0;z-index:100;background:#052b3a;color:#fff4d7;font-family:system-ui,sans-serif;overflow:hidden}.mermaid-reader[hidden]{display:none}.mermaid-art,.mermaid-shade{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.mermaid-shade{background:linear-gradient(90deg,transparent 20%,#05243288 65%,#052432bb),linear-gradient(0deg,#042735 0%,transparent 70%)}.mermaid-reader header{position:absolute;z-index:2;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;padding:24px 32px;gap:16px}.mermaid-reader button{font:inherit;color:inherit;border:1px solid #e9dbac55;background:#073b48bf;border-radius:30px;padding:12px 23px;cursor:pointer}.mermaid-reader button:hover{background:#205966}.mermaid-reader button:focus-visible{outline:3px solid #f9d786;outline-offset:4px}.mermaid-reader button:disabled{opacity:.45;cursor:default}.mermaid-content{position:absolute;z-index:1}.mermaid-content.opening{width:min(480px,42vw);right:9%;top:50%;transform:translateY(-45%)}.mermaid-eyebrow{font-size:13px;letter-spacing:.18em;color:#c8dfd5}.mermaid-content h1{font-family:serif;font-size:clamp(40px,5.5vw,88px);font-weight:500;letter-spacing:.14em;margin:20px 0}.mermaid-subtitle{font-size:22px;letter-spacing:.2em}.mermaid-intro{background:#06313fbb;border:1px solid #cadaca33;border-radius:22px;padding:22px;margin:32px 0;line-height:1.9}.mermaid-intro p{font-size:16px;color:#dde7df}.mermaid-reader [data-action=start],.mermaid-reader [data-action=restart]{background:#eddda6;color:#163e43;font-weight:600;min-width:180px}.mermaid-content.reading{bottom:0;left:0;right:0;background:linear-gradient(0deg,#052c3bf5 70%,#052c3be8);padding:26px max(6vw,24px) 22px;border-top:1px solid #c2d8d444}.mermaid-text{max-width:1040px;margin:auto;max-height:28vh;overflow:auto;font-size:clamp(18px,1.6vw,24px);line-height:1.85;letter-spacing:.035em}.mermaid-text p{margin:0 0 14px}.mermaid-speaker{font-size:13px;color:#a8d4d3;white-space:nowrap}.mermaid-controls{display:flex;justify-content:center;gap:24px;margin-top:18px}.mermaid-progress{display:flex;align-items:center;gap:20px;max-width:680px;margin:18px auto 0;font-size:12px;color:#b9d4d3}.mermaid-characters{position:absolute;right:5%;top:-64px;display:flex;gap:10px}.mermaid-status{position:absolute;z-index:4;top:85px;left:50%;transform:translateX(-50%);background:#052c3be8;border-radius:16px;padding:8px 16px;text-align:center;font-size:14px}.mermaid-status:empty{display:none}.mermaid-dialog{color:#173f42;background:#f5eddb;border:0;border-radius:24px;padding:28px;width:min(430px,80vw);max-height:80vh;overflow:auto}.mermaid-dialog::backdrop{background:#021b29aa}.mermaid-dialog>button{float:right;color:#173f42;background:transparent}.mermaid-dialog img{display:block;width:140px;height:140px;object-fit:cover;border-radius:50%;margin:20px auto}.mermaid-dialog p{line-height:1.9}.mermaid-dialog div>button{display:block;margin:12px 0;background:#dbe3d2;color:#173f42;width:100%}.mermaid-complete{inset:30% 15%;text-align:center;padding:30px;background:#052c3bdf;border-radius:24px}.mermaid-complete h2{font-size:32px}.mermaid-complete button{margin:20px 8px}@media(max-width:700px){.mermaid-reader header{padding:14px 12px;font-size:12px}.mermaid-reader button{padding:10px 15px}.mermaid-chapter{max-width:130px;text-align:center}.mermaid-content.opening{width:auto;left:24px;right:24px;top:auto;bottom:35px;transform:none}.mermaid-content h1{font-size:48px}.mermaid-intro{margin:18px 0;padding:16px}.mermaid-art{object-position:35% center}.mermaid-content.reading{padding:20px 20px 24px}.mermaid-text{max-height:36vh;font-size:18px}.mermaid-controls{gap:12px}.mermaid-status{top:66px;width:75%}.mermaid-complete{inset:25% 6% 15%}.mermaid-characters{top:-52px}}@media(max-height:580px){.mermaid-content.opening{top:auto;bottom:16px;transform:none}.mermaid-content h1{font-size:38px;margin:8px 0}.mermaid-intro{margin:10px 0;padding:10px}.mermaid-intro p{font-size:13px;margin:6px 0}.mermaid-text{max-height:24vh;font-size:17px}.mermaid-content.reading{padding-top:14px}.mermaid-controls{margin-top:8px}}

/* Horizontal story stage: original art reserves the right side for reading. */
.mermaid-reader.reading-world{background:#bed4d9;color:#203f50}
.reading-world .mermaid-shade{background:linear-gradient(90deg,transparent 52%,#e4f0ed12 65%,#edf3ec20)}
.reading-world .mermaid-art{object-fit:cover;object-position:center;transform-origin:28% 40%}
.reading-world header{color:#244351}
.reading-world button{color:#244351;background:#f0f4e76b;border-color:#33576833;backdrop-filter:blur(8px)}
.reading-world button:hover{background:#fff6dfb0}
.mermaid-content.reading{inset:20% 5% 13% 64%;padding:0;background:none;border:0;display:flex;flex-direction:column;justify-content:center}
.mermaid-text{margin:0;max-height:100%;font-family:'Songti SC','STSong',serif;font-size:clamp(20px,1.75vw,30px);line-height:1.95;letter-spacing:.055em;text-shadow:0 1px 8px #ffffff70;scrollbar-width:thin}
.mermaid-speaker{display:block;font:12px/2 system-ui,sans-serif;letter-spacing:.2em;color:#506f78;margin-bottom:14px}
.mermaid-controls{position:fixed;bottom:26px;left:50%;transform:translateX(-50%);margin:0;gap:18px;white-space:nowrap}
.mermaid-controls button{font-size:13px;padding:11px 20px}
.mermaid-progress{position:fixed;right:5%;bottom:37px;width:17%;margin:0;color:#365c6c;font-size:11px;gap:12px}
.mermaid-characters{position:fixed;right:5%;top:auto;bottom:90px;gap:8px}
.mermaid-characters button{font-size:12px;padding:8px 14px}


.mermaid-reader .mermaid-meet{position:absolute;left:27%;top:67%;z-index:2;font-size:13px;padding:10px 18px;background:#fff3d4c9;color:#274d60;border-color:#fff7dd;animation:mermaid-copy-in 1s both}
.mermaid-reader [hidden]{display:none!important}
/* Illustration changes dissolve; paragraph changes keep the same framing. */
.cinematic .mermaid-text{animation:mermaid-copy-in 1.8s .4s both}


@keyframes mermaid-copy-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@media(max-height:600px) and (orientation:landscape){.mermaid-content.reading{inset:19% 5% 24% 62%}.mermaid-text{font-size:18px;line-height:1.7}.mermaid-controls{bottom:14px}.mermaid-progress{bottom:25px}.mermaid-characters{bottom:64px}.mermaid-speaker{margin-bottom:6px}}
@media(orientation:portrait){.mermaid-content.reading{inset:48% 7% 19%}.reading-world .mermaid-shade{background:linear-gradient(0deg,#e5f0ed 10%,#dce9e8dd 48%,transparent 72%)}.reading-world .mermaid-art{object-position:25% center}.mermaid-text{font-size:20px}.mermaid-progress{display:none}.mermaid-controls{bottom:28px;gap:6px}.mermaid-controls button{padding:10px 12px}.mermaid-characters{bottom:86px}.mermaid-reader .mermaid-meet{top:34%;left:20%}}
@media(prefers-reduced-motion:reduce){.cinematic .mermaid-art,.cinematic .mermaid-text,.mermaid-reader .mermaid-meet{animation:none!important}}

.cinematic .mermaid-characters{display:none}

/* Approved companion welcome: character invitation in the original right-side space. */
.welcome-world{background:#bed4d9;color:#203f50}
.welcome-world .mermaid-shade{background:linear-gradient(90deg,transparent 55%,#edf3ec12)}
.welcome-world header button{color:#244351;background:#f0f4e780;border-color:#33576833}
.mermaid-content.companion-welcome{inset:16% 5% 10% 63%;width:auto;transform:none;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:18px;overflow:auto}
.mermaid-welcome-portrait{width:clamp(100px,12vw,176px);height:clamp(100px,12vw,176px);object-fit:cover;border-radius:50%;border:4px solid #ffffff80;box-shadow:0 8px 30px #2a536b15}
.mermaid-welcome-name{font-size:15px;letter-spacing:.15em;margin:0;color:#426777}
.companion-welcome h1{font-family:'Songti SC','STSong',serif;font-size:clamp(26px,2.5vw,40px);letter-spacing:.06em;line-height:1.55;margin:0;font-weight:500}
.mermaid-welcome-copy{font-family:'Songti SC','STSong',serif;font-size:clamp(18px,1.5vw,24px);line-height:1.9;margin:0 0 10px;max-width:22em}
.companion-welcome [data-action=start]{min-width:210px;background:linear-gradient(#f5e9c8,#ead3a4);border-color:#e3c995;padding:15px 30px;box-shadow:0 5px 15px #7b603518}
@media(max-height:600px) and (orientation:landscape){.mermaid-content.companion-welcome{inset:18% 5% 6% 61%;gap:9px}.mermaid-welcome-portrait{width:82px;height:82px}.companion-welcome h1{font-size:24px}.mermaid-welcome-copy{font-size:16px;margin:0}.companion-welcome [data-action=start]{padding:10px 25px}}
@media(orientation:portrait){.mermaid-content.companion-welcome{inset:35% 8% 6%;gap:12px}.welcome-world .mermaid-shade{background:linear-gradient(0deg,#e5f0ed 10%,#dce9e8ef 55%,transparent 85%)}.companion-welcome h1{font-size:28px}}

/* Companion uses the same right-side space as the reading, without a modal. */
.mermaid-reader .mermaid-companion-entry{display:flex;align-items:center;gap:12px;align-self:flex-start;padding:7px 16px 7px 7px;margin-bottom:28px;font:14px/1.5 system-ui,sans-serif;background:#f5f5e889}
.mermaid-companion-entry img{width:46px;height:46px;border-radius:50%;object-fit:cover}
.cinematic .mermaid-characters{display:flex}
/* Natural-height conversation: no empty flex spacer between greeting and input. */
.mermaid-content.companion-chat{inset:15% 5% 8% 63%;display:flex;flex-direction:column;align-items:stretch;gap:16px;overflow:hidden;max-width:580px}
.mermaid-chat-heading{display:flex;align-items:center;gap:14px;flex-shrink:0}
.mermaid-chat-heading .mermaid-welcome-portrait{width:54px;height:54px;border-width:2px}
.mermaid-chat-heading h2{font:500 23px/1.4 'Songti SC','STSong',serif;margin:0;letter-spacing:.06em}
.mermaid-chat-caption{font:12px/1.5 system-ui,sans-serif;margin:4px 0 0;color:#55737d}
.mermaid-messages{overflow:auto;flex:0 1 auto;min-height:0;scrollbar-width:thin;padding:2px 4px}
.mermaid-message{font:clamp(18px,1.45vw,22px)/1.85 'Songti SC','STSong',serif;margin:0 0 14px;padding:16px 20px;border-radius:4px 20px 20px;background:#edf5efd9;color:#244351;overflow-wrap:anywhere}
.mermaid-message:last-child{margin-bottom:0}
.mermaid-message.child{background:#f4e6c5e0;margin-left:28px;border-radius:20px 4px 20px 20px;font-size:17px}
.mermaid-chat-tabs{display:flex;gap:8px;flex-shrink:0}
.mermaid-reader .mermaid-chat-tabs button{font:14px/1.4 system-ui,sans-serif;padding:9px 16px;background:transparent;border-color:transparent}
.mermaid-reader .mermaid-chat-tabs button[aria-pressed=true]{background:#f4eedabf;border-color:#c2b99480}
.mermaid-chat-form{display:flex;align-items:flex-end;gap:8px;flex-shrink:0;border:1px solid #597c8155;border-radius:18px;padding:8px;background:#f7f8efd9;box-shadow:0 4px 18px #3355680a}
.mermaid-chat-form:focus-within{border-color:#62868c;box-shadow:0 0 0 2px #62868c22}
.mermaid-chat-form textarea{resize:none;box-sizing:border-box;min-width:0;flex:1;height:70px;border:0;border-radius:10px;padding:8px 10px;background:transparent;color:#244351;font:16px/1.6 system-ui,sans-serif}
.mermaid-chat-form textarea:focus{outline:none}
.mermaid-reader .mermaid-chat-form button{font:14px/1.4 system-ui,sans-serif;padding:11px 17px;border-radius:12px;background:#eddda6;color:#244351;border-color:#d6c591;flex-shrink:0}
.mermaid-chat-actions{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px;flex-shrink:0}
.companion-chat [data-action=resume]{align-self:center;background:#f5efdbce;color:#244351;font-size:14px;padding:11px 20px;flex-shrink:0}
.mermaid-reader [data-action=preset-next]{font-size:14px;background:#eddda6;color:#244351;padding:11px 20px}
.mermaid-question-step{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:10px;color:#55737d;font:12px/1.5 system-ui,sans-serif}
.mermaid-reader .mermaid-question-step button,.mermaid-reader .mermaid-replay{font:12px/1.5 system-ui,sans-serif;background:transparent;border:0;padding:4px 8px}
.mermaid-options{display:grid;gap:8px}
.mermaid-reader .mermaid-options button{border-radius:14px;text-align:left;font:15px/1.65 system-ui,sans-serif;padding:11px 16px;background:#f5f6ede0;border-color:#65808633}
.mermaid-reader .mermaid-options button:hover{background:#fff2cee8;border-color:#beae78}
.companion-welcome [data-action=welcome-audio],.companion-welcome [data-action=invitation-audio]{font-size:13px;background:transparent;color:#426777;border:0;padding:4px 12px}
.mermaid-dialog img.mermaid-discovery-image{width:100%;height:auto;border-radius:14px}
@media(max-height:600px) and (orientation:landscape){.mermaid-content.companion-chat{inset:17% 4% 4% 60%;gap:8px}.mermaid-chat-heading .mermaid-welcome-portrait{width:40px;height:40px}.mermaid-chat-heading h2{font-size:20px}.mermaid-message{font-size:17px;padding:12px;margin-bottom:10px}.mermaid-chat-form textarea{height:48px;font-size:14px;padding:5px}.mermaid-reader .mermaid-options button{font-size:14px;padding:9px 12px}.mermaid-companion-entry{margin-bottom:12px!important}}
@media(orientation:portrait){.mermaid-content.companion-chat{inset:27% 6% 5%;gap:12px}.chat-world .mermaid-shade{background:linear-gradient(0deg,#e5f0ed 10%,#dce9e8f0 65%,transparent 90%)}.mermaid-message{font-size:18px}.mermaid-reader .mermaid-companion-entry{margin-bottom:15px}}
.welcome-world button{color:#244351;background:#f4f4e5a8;border-color:#33576833}
.welcome-world button:hover{background:#fff6dfd0}
.companion-welcome [data-action=chat]{min-width:210px;background:#eddda6;border-color:#e3c995;font-weight:600}
.mermaid-recap{overflow:auto;font:17px/1.8 'Songti SC','STSong',serif;text-align:left;flex-shrink:1}
.mermaid-recap p{margin:0 0 12px}
@media(min-height:601px) and (max-height:800px) and (orientation:landscape){
  .mermaid-content.companion-chat{inset:14% 5% 5% 63%;gap:10px}
  .mermaid-chat-heading .mermaid-welcome-portrait{width:44px;height:44px}
  .mermaid-chat-heading h2{font-size:21px}
  .mermaid-message{font-size:18px;padding:12px 16px;margin-bottom:10px;line-height:1.75}
  .mermaid-reader .mermaid-options button{font-size:14px;padding:9px 13px}
  .mermaid-chat-form textarea{height:56px;font-size:14px}
  .mermaid-question-step{margin-bottom:7px}
}

/* Each welcome borrows a published illustration, softened behind clear foreground content. */
.mermaid-reader{--arrival-base:#e6eee7;--arrival-wash:239,245,234}
.mermaid-reader[data-book="wizard_of_oz_10_days"]{--arrival-base:#ede7cc;--arrival-wash:250,245,223}
.mermaid-reader[data-book="the_little_mermaid_3_days"]{--arrival-base:#d3e6ed;--arrival-wash:229,244,246}
.mermaid-reader[data-book="journey_to_the_west_monkey_king_10_days"]{--arrival-base:#e5e5d5;--arrival-wash:243,241,224}
.arrival-world,.arrival-curtain{background:var(--arrival-base)}
.arrival-world>.mermaid-art,.arrival-background{position:absolute;inset:-32px;width:calc(100% + 64px);height:calc(100% + 64px);object-fit:cover;object-position:center;filter:blur(18px) saturate(.85);transform:none;animation:none}
.arrival-world>.mermaid-shade,.arrival-glass{position:absolute;inset:0;width:100%;height:100%;background:linear-gradient(0deg,rgba(var(--arrival-wash),.52),rgba(var(--arrival-wash),.18)),radial-gradient(ellipse at 50% 48%,rgba(var(--arrival-wash),.35),transparent 75%)}
.arrival-bubble{backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.mermaid-content.arrival{inset:18% 10% 12%;width:auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:40px;color:#244351}
.arrival-conversation{display:flex;align-items:center;gap:44px;width:min(870px,100%)}
.arrival-identity{flex:0 0 190px;text-align:center;animation:mermaid-copy-in .65s both}
.arrival-identity .mermaid-welcome-portrait{width:174px;height:174px;border:5px solid #fff9;box-shadow:0 12px 45px #4976851c}
.arrival-identity h1{font:500 28px/1.5 'Songti SC','STSong',serif;letter-spacing:.08em;margin:18px 0 0}
.arrival-bubble{position:relative;flex:1;border:0;border-radius:28px;padding:30px 34px 20px;background:#fffdf3df;box-shadow:0 16px 60px #4976850d;animation:mermaid-copy-in .6s .18s both}
.arrival-bubble:before{content:'';position:absolute;left:-14px;top:45%;width:14px;height:24px;background:#fffdf3df;clip-path:polygon(100% 0,100% 100%,0 50%);pointer-events:none}
.arrival-bubble .mermaid-welcome-copy{position:relative;max-width:none;font-size:clamp(19px,1.6vw,25px);line-height:1.95;margin:0 0 12px}
.mermaid-reader .arrival-bubble button{background:transparent;border:0;font-size:14px;padding:6px 0;color:#52737c}
.mermaid-reader .arrival>[data-action=start]{padding:16px 48px;min-width:230px;font-size:18px;background:#eddda6;border-color:#d8c58e;box-shadow:0 6px 20px #76876c16}
.arrival-curtain{position:absolute;inset:0;z-index:3;pointer-events:none}
.arrival-curtain .arrival-identity,.arrival-curtain .arrival-bubble{animation:none}
.arrival-travelling-face{position:fixed;z-index:4;border-radius:50%;object-fit:cover;transform-origin:top left;pointer-events:none;box-sizing:border-box}
.entering-story .mermaid-companion-entry img{visibility:hidden}
/* Keep viewport-fixed controls anchored while the story fades in. A transform
   on this ancestor would position them inside the right-hand reading column. */
.entering-story .mermaid-content.reading{animation:mermaid-reading-reveal .9s both}
@keyframes mermaid-reading-reveal{from{opacity:0}to{opacity:1}}
.entering-story header{pointer-events:none}
@media(max-height:600px) and (orientation:landscape){.mermaid-content.arrival{inset:20% 12% 5%;gap:20px}.arrival-identity{flex-basis:130px}.arrival-identity .mermaid-welcome-portrait{width:114px;height:114px}.arrival-identity h1{font-size:23px;margin-top:8px}.arrival-bubble{padding:20px 26px 12px}.arrival-bubble .mermaid-welcome-copy{font-size:18px}.mermaid-reader .arrival>[data-action=start]{padding:12px 36px}}
@media(orientation:portrait){.mermaid-content.arrival{inset:14% 8% 6%;gap:25px}.arrival-conversation{flex-direction:column;gap:24px}.arrival-identity{flex:0 0 auto}.arrival-identity .mermaid-welcome-portrait{width:120px;height:120px}.arrival-identity h1{font-size:24px;margin-top:8px}.arrival-bubble{padding:22px}.arrival-bubble:before{left:calc(50% - 12px);top:-14px;width:24px;height:14px;clip-path:polygon(0 100%,50% 0,100% 100%)}.arrival-bubble .mermaid-welcome-copy{font-size:19px}}
@media(prefers-reduced-motion:reduce){.arrival-identity,.arrival-bubble,.entering-story .mermaid-content.reading{animation:none!important}}

/* Compact chapter entry and a paper-lined, ordinary rounded dialog. */
.mermaid-reader header .mermaid-chapter{position:absolute;left:50%;transform:translateX(-50%);max-width:50%;text-align:center;pointer-events:none}
.mermaid-route{position:absolute;left:32px;bottom:24px;z-index:2}
.arrival-world .mermaid-route{display:none}
.mermaid-reader .mermaid-route button{padding:12px 23px;background:#f0f4e7c9;border-color:#33576833;color:#244351;font:14px system-ui;backdrop-filter:blur(8px)}
.mermaid-controls{z-index:3;left:50%;bottom:25px;gap:10px}
.mermaid-progress{z-index:3;right:3%;width:auto;bottom:37px;white-space:nowrap}
.mermaid-content.reading{bottom:20%}
.mermaid-content.companion-chat{bottom:15%}
.mermaid-dialog.journey-sheet{box-sizing:border-box;position:fixed;inset:0;margin:auto;width:min(1280px,calc(100vw - 64px));height:min(780px,calc(100dvh - 80px));max-width:none;max-height:none;padding:28px 28px 20px;border:1px solid #d3b780;border-radius:22px;overflow:hidden;color:#193b53;background:radial-gradient(ellipse at 25% 15%,#fffaf0,#f6ecd9 75%);box-shadow:inset 0 0 0 7px #fff9ee,inset 0 0 0 8px #dac295,0 22px 90px #0b25386b}
.journey-sheet::backdrop{background:#102c4b75;backdrop-filter:blur(5px)}
.journey-sheet[open]{animation:journey-open .22s ease-out both}
.journey-sheet>div{height:100%;display:flex;flex-direction:column;min-height:0;gap:18px}
.journey-sheet>button{position:absolute;z-index:3;top:18px;right:18px;border:0;background:transparent;color:#193b53;font-size:30px;padding:0;width:40px;height:40px;line-height:40px}
.journey-heading{text-align:center;flex-shrink:0}
.journey-sheet .journey-heading h2{font:500 clamp(30px,3.5vw,48px)/1.2 'Songti SC','STSong',serif;letter-spacing:.15em;color:#17334f;margin:0}
.journey-heading p{font:16px/1.5 'Songti SC',serif;letter-spacing:.25em;margin:7px 0 0}
.journey-chapters{display:flex;flex:1;min-height:0;gap:8px;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;scrollbar-color:#c9ad78 transparent;overscroll-behavior:contain;cursor:grab;user-select:none;touch-action:pan-x}
.journey-chapters.dragging{cursor:grabbing}
.journey-chapter{flex:0 0 max(300px,calc((100% - 16px)/3));display:flex;flex-direction:column;min-height:0;text-align:center}
.journey-picture{position:relative;flex:1;min-height:90px;overflow:hidden;background:#e6e8df;display:grid;place-content:center;clip-path:polygon(0 2%,3% 1%,6% 2%,10% 0,14% 1.6%,19% .5%,23% 2%,28% 1%,32% 2%,36% 0,41% 1%,46% .4%,51% 2%,56% 1%,62% 2%,67% 0,72% 1.5%,77% .5%,82% 2%,87% 0,92% 1%,97% 0,100% 2%,99% 9%,100% 17%,98.8% 24%,100% 33%,99% 43%,100% 52%,98.8% 62%,100% 72%,99% 83%,100% 94%,98% 100%,93% 98.5%,88% 100%,82% 98.5%,76% 100%,69% 99%,62% 100%,56% 98%,49% 100%,42% 99%,36% 100%,29% 98.5%,22% 100%,15% 99%,8% 100%,2% 98.5%,0 96%,1% 89%,0 80%,1% 71%,0 61%,1% 50%,0 40%,1% 31%,0 21%,1% 12%)}
.mermaid-dialog .journey-picture img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:12% center;border-radius:0;margin:0;max-width:none}
.journey-picture>span,.journey-picture>button{position:relative;z-index:1;color:#244351}
.journey-caption{display:grid;grid-template-columns:auto auto;justify-content:center;align-content:start;align-items:baseline;column-gap:12px;flex:0 0 132px;padding:14px 8px 0;box-sizing:border-box}
.journey-number{font:28px/1.4 'Songti SC',serif;color:#193b53}
.journey-chapter h3{font:500 clamp(18px,1.5vw,23px)/1.5 'Songti SC',serif;margin:0;color:#193b53}
.journey-chapter .journey-state{grid-column:1/-1;font:15px/1.6 'Songti SC',serif;color:#81878c;margin:8px 0 12px}
.journey-chapter.current .journey-state{color:#4d4d43}
.current .journey-state:before{content:'';display:inline-block;width:10px;height:10px;border-radius:50%;background:#c99b53;margin-right:10px;box-shadow:0 0 0 2px #e6d1a266}
.mermaid-dialog.journey-sheet .journey-caption>button{grid-column:1/-1;justify-self:center;display:block;width:auto;min-width:175px;padding:10px 28px;margin:0;background:linear-gradient(110deg,#e7c88c,#cfaa67);border:1px solid #bd924e;box-shadow:inset 0 0 0 2px #f5dfb4,0 3px 7px #90784d22;color:#193b53;font:600 18px/1.3 'Songti SC',serif}
.journey-scroll-controls{display:flex;justify-content:center;align-items:center;gap:24px;flex-shrink:0;color:#45596b;height:42px}
.journey-scroll-controls button{background:transparent;border:1px solid #7e8991;color:#193b53;padding:0;width:40px;height:40px;font:30px/36px system-ui;border-radius:50%}
.journey-scroll-controls span{font:16px 'Songti SC',serif;letter-spacing:.12em;min-width:80px;text-align:center}
.journey-count{display:none}
@keyframes journey-open{from{opacity:0;transform:translateY(8px) scale(.985)}to{opacity:1;transform:none}}
@media(max-height:650px){.mermaid-dialog.journey-sheet{height:calc(100dvh - 32px);padding:18px 24px 14px}.journey-sheet>div{gap:10px}.journey-sheet .journey-heading h2{font-size:28px}.journey-heading p{font-size:13px;margin-top:3px}.journey-caption{flex-basis:112px;padding-top:6px}.journey-number{font-size:23px}.journey-chapter h3{font-size:18px}.journey-chapter .journey-state{margin:5px 0 8px;font-size:13px}.mermaid-dialog.journey-sheet .journey-caption>button{padding:7px 24px;font-size:16px}.journey-scroll-controls{height:32px}.journey-scroll-controls button{width:32px;height:32px;line-height:28px;font-size:24px}}
@media(max-width:900px){.mermaid-progress{display:none}.journey-chapter{flex-basis:max(280px,44%)}.mermaid-dialog.journey-sheet{width:calc(100vw - 32px)}.journey-sheet>button{right:10px;top:10px}}
@media(orientation:portrait){.mermaid-route{left:16px;bottom:24px}.mermaid-controls{left:65%;bottom:24px}.mermaid-controls button{font-size:12px;padding:10px}.mermaid-reader header .mermaid-chapter{left:auto;right:4%;transform:none;max-width:45%;font-size:12px}.journey-chapter{flex-basis:85%}.mermaid-dialog.journey-sheet{padding:26px 20px 18px}}
@media(prefers-reduced-motion:reduce){.journey-sheet[open]{animation:none}}
/* Geometry-based chevrons avoid font-baseline and glyph-centering differences. */
.journey-scroll-controls button{display:grid;place-items:center;box-sizing:border-box;line-height:1}
.journey-scroll-controls button svg{display:block;width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}

/* Companion floats over the lower-left illustration; reading geometry stays unchanged. */
 .mermaid-content.reading>.mermaid-companion-entry{position:fixed;left:150px;bottom:23px;z-index:3;margin:0!important;padding:5px 14px 5px 5px;font-size:13px;background:#faf7e9ed;box-shadow:0 3px 12px #24435118}
.mermaid-companion-entry img{width:36px;height:36px}
.chat-world .mermaid-content.reading>.mermaid-companion-entry{visibility:hidden}
.mermaid-conversation{position:fixed;left:32px;bottom:86px;z-index:4;box-sizing:border-box;width:min(560px,calc(60vw - 64px));height:min(740px,calc(100dvh - 170px));max-height:calc(100dvh - 170px);display:flex;flex-direction:column;gap:14px;min-height:0;padding:22px;border:1px solid #ffffffb8;border-radius:22px;background:#faf8eff5;box-shadow:0 12px 40px #183b4e35;color:#244351;animation:companion-unfold .2s ease-out;transform-origin:bottom left}
@keyframes companion-unfold{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
.mermaid-conversation .companion-chat-identity{display:flex;align-items:center;gap:12px;color:#244351;font-size:20px}
.mermaid-conversation .companion-chat-identity img{width:46px;height:46px;object-fit:cover;border-radius:50%}
.mermaid-conversation .mermaid-chat-heading{justify-content:space-between;font:13px/1.5 system-ui;color:#57727a}
.mermaid-conversation .mermaid-chat-heading button{font-size:15px;padding:8px 12px;border:0;background:transparent}
.mermaid-chat-scroll{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;padding:2px 5px 6px 0}
.mermaid-conversation .mermaid-messages{display:block;overflow:visible;min-height:0;padding:0}
.mermaid-conversation .mermaid-message{font-size:20px;line-height:1.7;padding:10px 13px;margin-bottom:10px;background:#e6eee9}
.mermaid-conversation .mermaid-message.child{background:#f0dfb4}
.mermaid-conversation .mermaid-chat-form{padding:5px;border-radius:14px;background:#fffdf7;flex-direction:column;align-items:stretch}
.mermaid-conversation .mermaid-chat-form textarea{height:72px;font-size:17px;flex:none;width:100%}
.mermaid-input-actions{display:flex;align-items:center;gap:8px}
.mermaid-input-actions [type=submit]{margin-left:auto}
.mermaid-conversation .mermaid-input-actions [data-action=record]{background:#e6eee9;border-color:#33576833}
.mermaid-conversation .mermaid-input-actions [data-action=record][aria-pressed=true]{background:#f0dfb4;border-color:#b68c55}
.mermaid-conversation .mermaid-input-actions [data-action=cancel-record]{background:transparent;border-color:#33576833}
.mermaid-record-status{margin:3px 7px 5px;color:#57727a;font:13px/1.6 system-ui,sans-serif}
.mermaid-conversation .mermaid-chat-tabs{gap:4px}
.mermaid-conversation .mermaid-chat-tabs button{font-size:15px;padding:8px 14px}
.mermaid-question-controls{overflow:visible;max-height:none;margin-top:14px}
.mermaid-conversation .mermaid-options{gap:9px}
.mermaid-conversation .mermaid-options button{font-size:17px;padding:10px 14px;min-height:44px}
.mermaid-conversation [data-action=preset-next]{margin-top:12px;font-size:15px;padding:8px 14px}
.mermaid-conversation .mermaid-chat-actions button{font-size:14px;padding:7px 14px;background:transparent}
@media(max-height:650px){.mermaid-conversation{padding:14px;gap:8px;height:calc(100dvh - 155px);max-height:calc(100dvh - 155px)}.mermaid-conversation .mermaid-chat-form textarea{height:40px}}
@media(orientation:portrait){.mermaid-content.reading>.mermaid-companion-entry{left:16px;bottom:80px}.mermaid-conversation{left:16px;bottom:80px;width:min(560px,calc(100vw - 32px));height:calc(100dvh - 160px);max-height:calc(100dvh - 160px)}}
@media(prefers-reduced-motion:reduce){.mermaid-conversation{animation:none}}
.mermaid-status progress{display:block;width:220px;max-width:70vw;height:6px;margin:10px auto 3px;accent-color:#eddda6}
.mermaid-reader .mermaid-status{box-sizing:border-box;max-width:calc(100vw - 32px);margin:0;color:#244351;background:#faf7ed;border:1px solid #cedbd7;box-shadow:0 3px 12px #24435112;line-height:1.6}
.mermaid-reader .mermaid-status button{margin-left:8px;padding:6px 12px;background:#e6eee9;color:#244351;border-color:#33576833}
.mermaid-conversation [data-action=more-topic],.mermaid-conversation [data-action=topic-audio]{font-size:14px;padding:8px 14px;margin-bottom:10px}
.mermaid-conversation .mermaid-chat-actions [data-action^="chapter:"]{background:#eddda6;border-color:#d6c591;font-size:15px;padding:10px 20px}

/* Familiar symbols, generous hit targets and accessible names for chat controls. */
.mermaid-reader .mermaid-conversation .mermaid-icon-control{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:48px;height:48px;min-height:48px;padding:0;border-radius:50%;flex-shrink:0;box-sizing:border-box}
.mermaid-reader .mermaid-conversation .mermaid-icon-control[hidden]{display:none}
.mermaid-icon-control svg{width:24px;height:24px;flex-shrink:0;pointer-events:none}
.mermaid-reader .mermaid-conversation .mermaid-icon-control.with-label{width:auto;padding:0 16px;border-radius:24px}
.mermaid-reader .mermaid-conversation :is(.mermaid-reply-voice,.mermaid-replay){display:flex;width:36px;height:36px;min-height:36px;margin:8px 0 0;padding:0;background:#f8fbf4;border:1px solid #33576833}
.mermaid-conversation :is(.mermaid-reply-voice,.mermaid-replay) svg{width:20px;height:20px}
.mermaid-conversation .mermaid-chat-heading .mermaid-icon-control{background:transparent;border-color:transparent}
.mermaid-conversation .mermaid-icon-control:focus-visible{outline:3px solid #537c78;outline-offset:3px}
.mermaid-conversation .mermaid-icon-control[data-icon=loading] svg{animation:mermaid-icon-spin 1s linear infinite}
.mermaid-conversation .mermaid-input-actions [data-icon=stop]{color:#a24735;background:#fae5dc;border-color:#d59b88}
@keyframes mermaid-icon-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.mermaid-conversation .mermaid-icon-control[data-icon=loading] svg{animation:none}}

/* Canonical speaker portraits identify dialogue without introducing card buttons. */
.mermaid-speaker.has-portrait{display:flex;align-items:center;gap:9px;min-height:32px;letter-spacing:.1em}
.mermaid-speaker-avatar{display:block;width:32px;height:32px;flex:0 0 32px;object-fit:cover;border-radius:50%;border:1px solid #fff9;box-sizing:border-box}

.mermaid-reader .mermaid-speaker-trigger{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;padding:2px;border:1px solid #ffffffa0;border-radius:50%;background:#fff8;flex-shrink:0;transition:transform .15s,box-shadow .15s}
.mermaid-reader .mermaid-speaker-trigger:hover{transform:scale(1.08);box-shadow:0 2px 10px #24435130;background:#fff9}
.mermaid-dialog.character-sheet{width:min(1000px,calc(100vw - 64px));max-height:calc(100dvh - 64px);box-sizing:border-box;padding:18px;background:#faf5e8;color:#183b50;text-align:left;border:1px solid #c9ad74;border-radius:28px;box-shadow:0 22px 90px #092c4070;outline:none}
.character-sheet::backdrop{background:#12324666;backdrop-filter:blur(7px)}
.character-sheet:before{content:'';position:absolute;inset:10px;border:1px solid #d6ba81;border-radius:20px;pointer-events:none}
.character-sheet>button{position:absolute;right:22px;top:20px;float:none;z-index:1;width:44px;height:44px;padding:0;font-size:30px;background:transparent;border:0}
.character-sheet>div{display:grid;grid-template-columns:1fr 1fr;min-height:480px}
.character-card-portrait{position:relative;display:flex;align-items:center;min-width:0}
.mermaid-dialog .character-card-image{display:block;width:100%;height:auto;max-height:65vh;object-fit:contain;border-radius:16px;mask-image:linear-gradient(to right,#000 82%,transparent)}
.character-card-copy{display:flex;flex-direction:column;justify-content:center;padding:48px 32px 38px 22px;min-width:0}
.character-sheet .character-card-eyebrow{font:15px/1.5 'Songti SC',serif;letter-spacing:.2em;color:#6e7a77;margin:0 0 18px}
.character-card-title{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.character-sheet h2{font:500 clamp(30px,3.5vw,48px)/1.4 'Songti SC',serif;margin:0}
.character-sheet .character-card-description{font:22px/1.95 'Songti SC',serif;margin:26px 0 36px;white-space:pre-wrap}
.character-card-title:after{content:'';display:block;width:100%;height:3px;margin-top:10px;background:linear-gradient(to right,#c9ad74 55px,transparent 55px)}
.mermaid-dialog.character-sheet .character-card-copy>[data-action="dismiss"]{width:auto;margin:0;align-self:flex-start;min-width:180px;padding:14px 26px;background:linear-gradient(110deg,#ecd9a5,#d7b677);border:1px solid #c4a05c;font-size:19px;color:#183b50}
.mermaid-dialog.character-sheet [data-action="card-voice"]{width:auto;margin:0;display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:8px 12px;font:14px/1.3 system-ui;background:#f0e8d5;border:1px solid #d6c8a6;white-space:nowrap}
.character-sheet .is-speaking span:first-child{animation:character-voice-pulse .8s ease-in-out infinite alternate}
@keyframes character-voice-pulse{to{transform:scale(1.3);opacity:.5}}
.character-sheet .character-card-status{position:absolute;bottom:12px;left:12px;right:12px;font:13px/1.6 system-ui;color:#637f86;background:#faf5e8e8;border-radius:10px;padding:8px;text-align:center}
.character-sheet .character-card-status button{font-size:13px;padding:6px 12px;margin-left:8px}
@media(max-width:680px){.mermaid-dialog.character-sheet{width:calc(100vw - 24px);max-height:calc(100dvh - 24px)}.character-sheet>div{grid-template-columns:1fr;min-height:0}.mermaid-dialog .character-card-image{height:30vh;mask-image:none}.character-card-copy{padding:14px 18px 20px}.character-sheet .character-card-description{font-size:18px;margin:16px 0 22px}.character-sheet .character-card-eyebrow{margin-bottom:8px}}
@media(prefers-reduced-motion:reduce){.character-sheet .is-speaking span:first-child{animation:none}}
@media(prefers-reduced-motion:reduce){.mermaid-reader .mermaid-speaker-trigger{transition:none}}

/* One gentle chapter-end invitation, never an automatically opened conversation. */
.mermaid-reading-tools{display:flex;align-items:center;justify-content:flex-end;gap:16px;min-width:0}
.mermaid-reader header .mermaid-reading-tools .mermaid-chapter{position:static;transform:none;max-width:none}
.mermaid-reader .mermaid-pinyin-toggle{display:none;padding:9px 17px;font-size:14px;white-space:nowrap}
.reading-world .mermaid-pinyin-toggle{display:inline-flex;align-items:center;gap:8px}
.mermaid-controls .mermaid-icon-control{display:inline-flex;align-items:center;justify-content:center;gap:7px}
.mermaid-controls .mermaid-icon-control svg,.mermaid-pinyin-toggle svg{width:18px;height:18px;flex:0 0 18px}
.mermaid-pinyin-toggle[data-icon=loading] svg{animation:mermaid-icon-spin 1s linear infinite}
@media(orientation:portrait){.mermaid-controls{left:auto;right:8px;transform:none;gap:6px}.mermaid-controls .mermaid-icon-control{gap:5px;padding-inline:6px}.mermaid-controls .mermaid-icon-control svg{width:16px;height:16px;flex-basis:16px}}
@media(prefers-reduced-motion:reduce){.mermaid-pinyin-toggle[data-icon=loading] svg{animation:none}}
.mermaid-pinyin-toggle:after{content:'';width:8px;height:8px;border-radius:50%;background:#6c8186;opacity:.5}
.mermaid-reader .mermaid-pinyin-toggle[aria-pressed=true]{background:#fff3d5;border-color:#b3985e}
.mermaid-pinyin-toggle[aria-pressed=true]:after{background:#45745e;opacity:1}
.with-pinyin .mermaid-text{line-height:2.65;padding-top:.45em}
.mermaid-story-copy ruby{ruby-align:center;ruby-position:over;margin-inline:.07em}
.mermaid-story-copy rt{font:500 max(11px,.48em)/1.25 system-ui,sans-serif;letter-spacing:0;color:#3f616f;text-shadow:none}
@media(max-width:700px){.mermaid-reading-tools{gap:8px}.mermaid-reader .mermaid-pinyin-toggle{padding:8px 12px}.mermaid-reader header .mermaid-reading-tools .mermaid-chapter{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:120px}}

.mermaid-companion-entry .companion-invitation{position:absolute;left:0;bottom:calc(100% + 12px);padding:12px 18px;border-radius:16px;background:#fff9e9;color:#244351;box-shadow:0 5px 20px #24435125;font:15px/1.5 system-ui;white-space:nowrap;pointer-events:none}
.companion-invitation:after{content:'';position:absolute;bottom:-6px;left:22px;width:12px;height:12px;transform:rotate(45deg);background:#fff9e9}
.mermaid-companion-entry.invite-once img{animation:companion-invite-hop .55s ease-in-out 2}
@keyframes companion-invite-hop{0%,100%{transform:translateY(0)}45%{transform:translateY(-8px)}70%{transform:translateY(1px)}}
@media(prefers-reduced-motion:reduce){.mermaid-companion-entry.invite-once img{animation:none}}

.mermaid-chat-notice{margin:0;flex-shrink:0;font:12px/1.5 system-ui,sans-serif;color:#55737d}.mermaid-chat-notice a{color:inherit;text-underline-offset:3px}.mermaid-chat-notice a:focus-visible{outline:2px solid #55737d;outline-offset:3px}