:root{color-scheme:dark;--ink:#111716;--paper:#f3e7ce;--gold:#dbad56;--jade:#8fc5b3;--dim:#a2aaa0;font-family:Georgia,'Times New Roman',serif;background:var(--ink);color:var(--paper)}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:65px}body{margin:0;overflow-x:hidden}a{color:inherit}button,input,select,textarea{font:inherit}button,a{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--gold);outline-offset:4px}button{border:1px solid #526059;background:#1c2824;color:var(--paper);border-radius:30px;padding:8px 14px;font-family:system-ui,sans-serif;font-size:12px}.skip{position:fixed;top:-100px;left:12px;z-index:50;padding:12px;background:var(--paper);color:var(--ink)}.skip:focus{top:8px}.reader-bar{position:fixed;inset:0 0 auto;z-index:20;height:57px;display:flex;align-items:center;justify-content:space-between;padding:0 24px;background:#111716ed;border-bottom:1px solid #ffffff15;backdrop-filter:blur(12px);font:11px system-ui,sans-serif;letter-spacing:2px}.reader-bar>a{text-decoration:none;font-weight:750}.reader-bar>a span{color:var(--gold);margin-left:10px}.reader-bar>div{display:flex;align-items:center;gap:10px}.reader-bar button{font-size:11px;padding:6px 11px}.studio-link{font:11px system-ui,sans-serif;letter-spacing:0;color:var(--dim)}.reading-progress{position:absolute;left:0;bottom:-1px;height:2px;background:var(--gold);width:calc(var(--read,0)*100%)}
.cover{position:relative;min-height:90svh;max-width:1000px;margin:auto;padding:130px 32px 80px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:radial-gradient(ellipse at 50% 45%,#34514244,transparent 62%)}.brand{text-decoration:none;letter-spacing:12px;font-size:19px;margin-bottom:55px}.brand span{color:var(--gold)}.eyebrow{font:10px system-ui,sans-serif;letter-spacing:4px;color:var(--gold);margin:0 0 25px}.cover h1{font-size:clamp(48px,9vw,98px);font-weight:400;line-height:.98;letter-spacing:-3px;margin:0 0 28px;max-width:780px}.deck{font-size:17px;font-style:italic;color:#c3bcae;line-height:1.6;max-width:400px}.enter{display:flex;align-items:center;gap:28px;font:11px system-ui,sans-serif;letter-spacing:2px;text-decoration:none;margin-top:30px;padding:14px 25px;border-top:1px solid #cba46455;border-bottom:1px solid #cba46455}.enter span{color:var(--gold);font-size:22px}.content-note{color:#89938b;font:10px system-ui,sans-serif;margin-top:22px}
main{padding:0 0 90px}.panel{width:100%;max-width:800px;margin:0 auto var(--gap);position:relative}.stage{position:relative;width:100%;isolation:isolate;overflow:hidden;background:#141917}.stage>img{display:block;width:100%;height:100%;object-fit:cover}.letters{position:absolute;inset:0;width:100%;height:100%;overflow:visible;z-index:3;pointer-events:none}.balloon{filter:drop-shadow(0 2px 1px #0005);transition:opacity .12s ease-out,translate .12s ease-out}.balloon text{font-family:Georgia,'Times New Roman',serif;font-style:italic;font-weight:400;fill:#24231c;line-height:1.28;stroke:none}.bubble-shape{fill:#fff5df;stroke:#312a1c;stroke-width:2.2;stroke-linejoin:round}.voice-master .bubble-shape{fill:#f6e6be;stroke:#a37b37}.voice-egg .bubble-shape{fill:#e7f3e6;stroke:#518a76}.think .bubble-shape{fill:#efe0baff;stroke:#9a7e43;stroke-width:2}.off .bubble-shape{fill:#e3eae3;stroke:#697c79}.narr .bubble-shape{fill:#edddbb;stroke:#877653;stroke-width:1.3}.narr text{line-height:1.4}.gate .bubble-shape{fill:#152723;stroke:#91bcb0;stroke-width:2}.gate text{font-family:Georgia,serif;fill:#e7ede6;line-height:1.45;font-style:italic}.vow .bubble-shape{fill:#1e5143;stroke:#b7d5b8;stroke-width:2}.vow text{fill:#eef2d5;line-height:1.4}.say text{line-height:1.32}.off text{line-height:1.32}.think text{line-height:1.32}.sfx{fill:#f5dca0;stroke:#252b22;stroke-width:4;paint-order:stroke;font-family:Impact,'Arial Black',sans-serif;font-weight:900;letter-spacing:2px}.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}.edit-panel{display:none}.fx-layer{position:absolute;inset:0;pointer-events:none;z-index:2;overflow:hidden}
.enhanced:not(.motion-off) .balloon:not(.shown){opacity:0;translate:0 4px}.enhanced:not(.motion-off) .held{width:min(100%,calc((100svh - 90px)*800/var(--panel-h)))}.enhanced:not(.motion-off) .held::after{content:"";display:block;height:var(--hold)}.enhanced:not(.motion-off) .held .stage{position:sticky;top:65px}.fx-crane{position:absolute;width:21%;aspect-ratio:1;opacity:0;transform:translateY(-80px) rotate(-10deg);transition:opacity .2s,transform .4s}.fx-crane.arrived{opacity:1;transform:translateY(0) rotate(var(--angle))}.fx-crane svg{width:100%;height:100%;filter:drop-shadow(3px 5px 3px #0007)}.fx-crane span{position:absolute;inset:54% 0 auto;text-align:center;font:700 clamp(8px,1.6vw,13px) system-ui,sans-serif;color:#221d15;transform:rotate(-12deg)}.pulse-light{position:absolute;border-radius:50%;background:radial-gradient(ellipse,#80ffd580 0,#57cdaa20 45%,transparent 70%);mix-blend-mode:screen;opacity:0;scale:.75;transition:opacity .3s}.is-pulsing .pulse-light{opacity:1;animation:jade-answer 1.8s ease-in-out infinite}.impact .stage{animation:impact .3s linear}.settled .stage{box-shadow:0 0 0 1px #a9cbb52a}.motion-off .fx-crane{opacity:1;transform:rotate(var(--angle))}.motion-off .pulse-light{opacity:.28}.motion-off .balloon{opacity:1;translate:none}.motion-off .stage{animation:none!important}.motion-off *{animation:none!important;transition:none!important}
@keyframes jade-answer{50%{scale:1.14;opacity:.6}}@keyframes impact{0%,100%{transform:translate(0)}20%{transform:translate(-5px,2px)}50%{transform:translate(4px,-2px)}75%{transform:translate(-2px,1px)}}
.end-card{max-width:800px;text-align:center;padding:80px 24px 85px;margin:auto;border-top:1px solid #67867455;background:radial-gradient(ellipse at top,#44625133,transparent 65%)}.end-card h2{font-size:clamp(34px,5vw,54px);font-weight:400;line-height:1.18;max-width:550px;margin:0 auto 28px}.end-card>p:not(.eyebrow){color:#82988c;font-size:12px;font-style:italic}.end-actions{display:flex;justify-content:center;gap:25px;align-items:center;margin-top:42px;font:12px system-ui,sans-serif}.end-actions a{color:var(--jade);text-decoration:none}#learn-more{max-width:680px;margin:0 auto 90px;padding:45px 30px;border-top:1px solid #ffffff22;color:#c4cabc;font-size:17px;line-height:1.8}#learn-more h2{font-weight:400;color:var(--paper);line-height:1.2}#learn-more a{color:var(--jade);text-decoration-thickness:1px;text-underline-offset:3px}#learn-more .credits{font:11px/1.7 system-ui,sans-serif;color:#849087;margin-top:40px}
.studio{position:fixed;right:0;top:57px;bottom:0;width:350px;z-index:30;padding:22px;background:#1d2823;overflow:auto;border-left:1px solid #607266;font:13px/1.5 system-ui,sans-serif}.studio h2{font:25px Georgia,serif;margin:0 0 5px}.studio p{color:#a9b9ab;margin:0 0 18px}.studio label{display:block;font-size:11px;color:#b6c8bc;margin:12px 0 5px}.studio input,.studio select,.studio textarea{display:block;width:100%;background:#101a15;color:#f6ecd6;border:1px solid #4b6554;border-radius:5px;padding:8px;font:13px system-ui,sans-serif}.studio textarea{height:95px;resize:vertical}.studio .pair{display:grid;grid-template-columns:1fr 1fr;gap:10px}.studio button{font-size:12px;margin-top:15px;margin-right:6px}.studio #save{background:#bdd1a7;color:#16291d;border:0;font-weight:700}.studio .status{color:#dbc582;white-space:pre-wrap;font-size:12px;margin-top:15px}.studio details{border-top:1px solid #496150;margin-top:18px;padding-top:14px}.studio summary{cursor:pointer}.studio code{font-size:11px;overflow-wrap:anywhere}.with-studio{padding-right:350px}.with-studio .reader-bar{right:350px}.with-studio .edit-panel{display:block;position:absolute;left:10px;bottom:10px;z-index:6;background:#122a21df}.with-studio .letters{pointer-events:auto}.with-studio .balloon{cursor:move;pointer-events:all}.with-studio .selected .bubble-shape{stroke:#e76c47;stroke-width:4}
@media(max-width:650px){.reader-bar{padding:0 12px;letter-spacing:1px}.reader-bar>div{gap:6px}.reader-bar button{padding:6px 8px;font-size:10px}.cover{padding:115px 20px 62px;min-height:88svh}.brand{margin-bottom:42px;font-size:16px;letter-spacing:9px}.cover h1{letter-spacing:-1.6px}.deck{font-size:15px}.panel{margin-bottom:calc(var(--gap)*.58)}.end-card{padding-top:65px}.end-actions{gap:14px}.studio-link{font-size:10px}.with-studio{padding-right:0;padding-bottom:45svh}.with-studio .reader-bar{right:0}.studio{top:auto;left:0;width:100%;height:40svh;border-top:1px solid #657e6d}.with-studio main{padding-bottom:40svh}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.balloon{transition:none}.enhanced:not(.motion-off) .held{width:100%}.enhanced:not(.motion-off) .held::after{display:none}.enhanced:not(.motion-off) .held .stage{position:relative;top:auto}.enhanced:not(.motion-off) .balloon:not(.shown){opacity:1;translate:none}*{animation:none!important;transition:none!important}}
@media print{.reader-bar,.cover,.end-actions,.studio,.edit-panel{display:none!important}.held::after{display:none!important}.stage{position:relative!important;top:0!important}.balloon{opacity:1!important;translate:none!important}}
.gate text{font-family:"Courier New",monospace;font-style:normal}
.enhanced:not(.motion-off) .has-unveil .stage>img{clip-path:inset(var(--curtain,80%) 0 0)}
.motion-off .has-unveil .stage>img{clip-path:none}
.art-only .letters{visibility:hidden}
.producer-credit a{display:inline-flex;align-items:center;min-height:44px;padding:0 5px;color:var(--jade);text-underline-offset:4px}
.voice-key{display:flex;gap:10px 18px;flex-wrap:wrap;justify-content:center;max-width:560px;margin:18px auto;font:11px system-ui,sans-serif;color:#c4cabc}.voice-chip{display:inline-flex;align-items:center;gap:6px}.voice-chip i{display:inline-block;width:11px;height:11px;border-radius:50%;background:var(--voice-paper);border:1px solid var(--voice-edge)}
.balloon.hot .bubble-shape{fill:#fff0dd;stroke:#a83f2d;stroke-width:3}.balloon.hot text{fill:#912d1f}
.chapter-nav{display:flex;justify-content:center;flex-wrap:wrap;gap:16px;margin:38px auto 0;font:13px system-ui,sans-serif}.chapter-nav a{color:var(--jade);padding:10px 14px;border:1px solid #60726655;text-decoration:none;border-radius:4px}.resume-reading{margin-top:24px;color:var(--jade);font:12px system-ui,sans-serif;text-underline-offset:5px}.resume-reading[hidden]{display:none}
@media(max-width:450px){.reader-bar{padding:0 8px;letter-spacing:0}.reader-bar>div{gap:4px}.reader-bar button{font-size:10px;padding:7px 6px}.reader-bar>a span{margin-left:5px}.with-studio .reader-bar button{padding:7px 4px}}
@media(prefers-reduced-motion:reduce){.enhanced .has-unveil .stage>img{clip-path:none}}
.voice-master{--voice-paper:#fae4ad;--voice-edge:#a37122;--voice-ink:#352715}
.voice-egg{--voice-paper:#d8f0d6;--voice-edge:#397b53;--voice-ink:#183b2b}
.voice-yan{--voice-paper:#ffddd2;--voice-edge:#b64f3c;--voice-ink:#50281f}
.voice-bo{--voice-paper:#d9eaff;--voice-edge:#3569a4;--voice-ink:#1d3553}
.voice-customer{--voice-paper:#eaddfa;--voice-edge:#79559c;--voice-ink:#3d2854}
.voice-clerk{--voice-paper:#dbe4ea;--voice-edge:#516979;--voice-ink:#273843}
.voice-giver{--voice-paper:#f7dce9;--voice-edge:#9f527b;--voice-ink:#4c293b}
.voice-traveler{--voice-paper:#e8dcc9;--voice-edge:#807050;--voice-ink:#3b3325}
.voice-narrator{--voice-paper:#edddbb;--voice-edge:#877653;--voice-ink:#322b1f}
.voice-gate{--voice-paper:#172c3d;--voice-edge:#91bdcf;--voice-ink:#e3f1f4}
.balloon[class*="voice-"] .bubble-shape{fill:var(--voice-paper,#fff5df);stroke:var(--voice-edge,#312a1c)}
.balloon[class*="voice-"] text{fill:var(--voice-ink,#24231c)}
.balloon.vow{--voice-paper:#1e5143;--voice-ink:#eef2d5}