:root{--red:#a6302d;--deep:#762923;--gold:#e8b548;--paper:#fff3d9;--ink:#47382c;--muted:#856e54;--ease:cubic-bezier(.22,.72,.22,1)}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden}body{background:#8b302b;color:var(--ink);font-family:"Microsoft YaHei","PingFang SC",sans-serif}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:3px solid var(--gold);outline-offset:3px}h1,h2,p,figure{margin:0}h1,h2{font-family:"KaiTi","STKaiti","SimSun",serif;font-weight:700}em{font-style:normal;color:var(--red)}
.step{width:1280px;height:720px;visibility:hidden;pointer-events:none}.step.onstage{visibility:visible}.step.active{pointer-events:auto}.stage{position:relative;width:1280px;height:720px;overflow:hidden;isolation:isolate}.paper{background-color:var(--paper);background-image:url(assets/paper-grain.svg);background-size:180px 180px}.red-stage{background:#a3332e;background-image:url(assets/paper-grain.svg);background-size:180px 180px}.actor{position:absolute;pointer-events:none}.actor img{display:block;width:100%;height:100%;object-fit:contain}.lift{opacity:0;transform:translate3d(0,30px,0);transition:transform 650ms var(--ease),opacity 500ms ease}.entered .lift{opacity:1;transform:translate3d(0,0,0);transition-delay:var(--delay,0ms)}.pop{opacity:0;transform:scale(.7) rotate(-15deg);transition:transform 650ms var(--ease),opacity 400ms}.entered .pop{opacity:1;transform:scale(1) rotate(-10deg);transition-delay:var(--delay,0ms)}.initial{transition:transform 550ms var(--ease),opacity 350ms ease}.revealed .initial{opacity:0!important;pointer-events:none;transform:translate3d(-30px,-10px,0)!important}.reveal{opacity:0;pointer-events:none;transform:translate3d(35px,0,0);transition:transform 650ms var(--ease),opacity 500ms ease}.revealed .reveal{opacity:1;pointer-events:auto;transform:none}.chapter{position:absolute;left:70px;top:38px;z-index:10;font-size:17px;letter-spacing:.15em;color:var(--red)}.chapter span{color:var(--muted);font-size:14px;letter-spacing:.08em;margin-left:20px}.chapter:before{content:"";display:inline-block;width:20px;height:3px;margin-right:12px;vertical-align:middle;background:var(--red)}.page-number{position:absolute;right:58px;top:30px;color:#bd905b;font:24px Georgia,serif}.title-block{position:absolute;left:70px;top:100px;z-index:5}.title-block h1{font-size:54px;line-height:1.2}.title-block p{font-size:20px;line-height:1.75;margin-top:18px;color:var(--muted)}footer{position:absolute;left:70px;bottom:42px;font-size:18px;color:var(--muted)}
/* A letter is assembled from separate paper, envelope, author, actor and desk layers. */
.sun-disc{position:absolute;width:420px;height:420px;border-radius:50%;background:#d49b42;left:850px;top:72px;opacity:.8}.cover-stripe{position:absolute;right:-170px;top:-170px;width:400px;height:1000px;background:#7f2824;transform:rotate(-20deg)}.envelope-back{position:absolute;left:40px;top:325px;width:725px;height:360px;background:#832b25;transform:rotate(-2deg)}.cover-paper{position:absolute;left:68px;top:53px;width:704px;height:597px;padding:34px 48px;z-index:2;transform:translate3d(0,125px,0) rotate(-4deg);border-top:7px solid #edc567}.entered .cover-paper{transform:translate3d(0,0,0) rotate(-2deg)}.letter-top{display:flex;justify-content:space-between;align-items:center;color:#947044;font-size:14px;letter-spacing:.12em;padding-bottom:17px;border-bottom:1px solid #ddc59b}.cover-paper h1{font-size:72px;line-height:1.1;letter-spacing:.025em;margin-top:27px;color:var(--red)}.cover-paper h1 strong{font-size:104px;font-weight:700;display:block;margin-top:5px}.subtitle{font-family:"KaiTi","STKaiti",serif;font-size:28px;letter-spacing:.15em;margin-top:19px;color:var(--deep)}.author-rule{height:1px;background:#dbc192;margin:25px 0 21px;width:100%}.author{display:flex;align-items:baseline;gap:24px;color:var(--deep)}.author strong{font-family:"KaiTi","STKaiti",serif;font-size:34px}.author span{font-size:17px;color:var(--muted)}.class-name{font-size:18px;margin-top:10px}.period{font-size:13px;color:var(--muted);margin-top:15px;letter-spacing:.03em}.cover-person{left:786px;top:139px;width:450px;height:565px;z-index:4}.desk{position:absolute;background:#a6673c;border-top:10px solid #c79256;z-index:6}.cover-desk{left:784px;top:575px;width:510px;height:180px;transform:translate3d(80px,0,0)}.desk:after{content:"";position:absolute;left:0;right:0;top:30px;height:3px;background:#8d512f60}.desk-paper{position:absolute;left:20px;top:-14px;width:275px;height:60px;background:#f1dfb6;transform:skew(-30deg);z-index:1}.book-stack{position:absolute;width:170px;height:65px}.book-stack i{display:block;height:17px;margin:4px 0;border:3px solid #b17b36;border-left-width:12px;background:#fff0cd;transform:rotate(-3deg)}.book-stack i:nth-child(2){border-color:#8f362b;width:150px;margin-left:18px;transform:rotate(4deg)}.book-stack i:nth-child(3){border-color:#687879;width:160px;margin-left:7px}.cover-desk .book-stack{right:20px;top:-70px;width:125px}.cover-desk .book-stack i{max-width:120px}.mug{position:absolute;right:170px;top:-35px;width:34px;height:40px;background:#d4a337;border-radius:3px 3px 9px 9px}.mug:after{content:"";position:absolute;left:29px;top:7px;width:16px;height:21px;border:5px solid #d4a337;border-radius:50%}.envelope-front{position:absolute;left:28px;bottom:-40px;width:780px;height:140px;background:#b94432;clip-path:polygon(0 0,48% 52%,100% 0,100% 100%,0 100%);z-index:7}.wax-seal{position:absolute;left:647px;bottom:30px;width:76px;height:76px;border-radius:50%;border:5px double #af7e29;background:#ecc05b;z-index:8;text-align:center;padding-top:10px;font:23px "KaiTi",serif;color:#855626}.wax-seal small{font:11px Georgia,serif}.cover-side-note{position:absolute;right:44px;top:46px;color:#f3d18b;font:25px/1.5 "KaiTi",serif;writing-mode:vertical-rl;letter-spacing:.13em}
/* Theory: the reader leaves, then the two separate people and speech paper enter. */
.thought .title-block{top:107px}.thought .title-block h1{font-size:63px}.honor-note{position:absolute;left:73px;top:337px;width:420px;padding-left:20px;border-left:4px solid #d7a643}.honor-note b{display:block;color:var(--red);font-size:25px}.honor-note span{display:block;font-size:14px;color:var(--muted);margin-top:9px}.honor-note p{font-size:18px;margin-top:15px}.qingma{position:absolute;left:75px;top:478px;width:232px;display:flex;gap:22px;align-items:end}.qingma img{width:210px;height:154px;object-fit:contain;background:#fffdfa;border:7px solid #fffdfa}.qingma figcaption{font:22px/1.5 "KaiTi",serif;min-width:160px;color:var(--muted)}.reading-ring{position:absolute;left:731px;top:194px;width:350px;height:350px;border:1px solid #d7ab68;border-radius:50%;background:#f2dca4}.reader{left:778px;top:112px;width:310px;height:554px;z-index:3}.reading-books{left:660px;top:550px;z-index:4}.thought-initial{position:absolute;inset:0}.dialogue{position:absolute;inset:0}.dialogue .title-block{top:125px}.dialogue .title-block h1{font-size:54px;line-height:1.25}.small-label{margin-top:0!important;margin-bottom:24px!important;font-size:17px!important;letter-spacing:.15em}.dialogue-paper{position:absolute;left:650px;top:118px;width:464px;background:#f1dcac;color:#775431;padding:25px 30px;transform:rotate(2deg);font:28px/1.4 "KaiTi",serif;border-bottom:3px solid #d4af69}.dialogue-paper:after{content:"";position:absolute;left:60px;bottom:-22px;border-top:24px solid #e6cc96;border-right:25px solid transparent}.dialogue-paper span{display:block;font:13px "Microsoft YaHei",sans-serif;margin-top:15px;color:#947651}.elder{left:585px;top:311px;width:283px;height:324px;transform:translateX(-50px);transition:transform 650ms var(--ease)}.listener{left:920px;top:262px;width:285px;height:394px;transform:translateX(70px);transition:transform 650ms 120ms var(--ease)}.revealed .elder,.revealed .listener{transform:none}.table-round{position:absolute;left:720px;top:554px;width:305px;height:24px;background:#b58654;border-radius:50%;z-index:4}.table-round:after{content:"";position:absolute;left:40px;right:40px;top:20px;height:80px;border-left:12px solid #9b6b40;border-right:12px solid #9b6b40}.dialogue-thread{position:absolute;left:73px;top:493px;width:370px;height:2px;background:#d5aa59;transform:scaleX(0);transform-origin:left;transition:transform 650ms 200ms}.revealed .dialogue-thread{transform:scaleX(1)}
/* Practice: transform-only screen zoom. */
.practice .title-block h1{font-size:50px}.practice .title-block p{font-size:18px}.developer{left:124px;top:325px;width:255px;height:332px;z-index:3;transition:transform 650ms var(--ease),opacity 400ms}.practice.revealed .developer{transform:translate3d(-25px,0,0) scale(.94)}.monitor-group{position:absolute;left:486px;top:142px;width:708px;height:420px;transform-origin:50% 30%;z-index:4}.monitor{height:365px;background:#faf4e4;border:10px solid #667777;border-bottom-width:18px;border-radius:12px;overflow:hidden}.monitor-toolbar{height:31px;background:#e8e5d9;display:flex;align-items:center;gap:6px;padding:0 14px;color:#74786b;font-size:11px}.monitor-toolbar i{width:6px;height:6px;background:#ae6850;border-radius:50%}.monitor-toolbar span{margin-left:12px}.screen-placeholder{height:calc(100% - 31px);display:flex;flex-direction:column;justify-content:center;align-items:center;background:#f9f5e9}.screen-placeholder small{color:#938467;font-size:13px;letter-spacing:.12em}.screen-placeholder h2{font-size:49px;color:var(--red);margin-top:12px}.screen-placeholder p{font-size:14px;color:#a4967c;margin-top:18px}.placeholder-symbol{display:flex;gap:5px;align-items:end;height:40px;margin-bottom:16px}.placeholder-symbol span{background:#d6b66e;width:8px;height:20px;border-radius:3px}.placeholder-symbol span:nth-child(2){height:34px;background:#a95442}.placeholder-symbol span:nth-child(3){height:26px;background:#829590}.monitor-stand{position:absolute;left:calc(50% - 55px);top:365px;width:110px;height:38px;background:#859089;clip-path:polygon(30% 0,70% 0,78% 70%,100% 85%,100% 100%,0 100%,0 85%,22% 70%)}.practice.revealed .monitor-group{transform:translate3d(0,-16px,0) scale(1.015)}.system-caption{position:absolute;left:610px;top:598px;color:var(--muted);font:26px "KaiTi",serif}.system-flow{position:absolute;left:443px;right:58px;top:579px;display:flex;align-items:center;justify-content:space-between}.system-flow div{opacity:0;transform:translateY(20px);transition:opacity 400ms,transform 550ms var(--ease);border-top:3px solid #d9ad57;padding-top:15px}.revealed .system-flow div{opacity:1;transform:none;transition-delay:calc(var(--order)*140ms)}.system-flow b{font-size:21px;color:var(--red);display:block}.system-flow span{display:block;font-size:13px;color:var(--muted);margin-top:9px}.system-flow i{font-style:normal;color:#ba914c}
/* Awards fan independently; typography never changes font-size during motion. */
.learning .title-block h1{font-size:52px}.scholar{left:967px;top:210px;width:244px;height:439px;z-index:3}.scholar-disc{position:absolute;width:254px;height:254px;background:#f1dba5;border-radius:50%;left:946px;top:250px;z-index:-1}.achievement-summary{position:absolute;left:74px;top:205px;display:flex;gap:65px;align-items:center;transition:transform 600ms var(--ease);transform-origin:0 0}.gpa b{font:108px/.95 Georgia,serif;color:var(--red)}.gpa sup{font-size:55px;vertical-align:top}.gpa>span{display:block;font-size:20px;margin-top:12px;color:var(--muted)}.paper-result>div{font-size:24px;color:var(--red)}.paper-result b{font:57px Georgia,serif}.paper-result p{font-size:23px;margin-top:12px}.paper-result small{display:block;font-size:12px;color:var(--muted);margin-top:14px}.learning.revealed .achievement-summary{transform:translate3d(0,-13px,0) scale(.83)}.learning-message{position:absolute;left:75px;top:459px;font:30px/1.65 "KaiTi",serif;color:var(--red)}.learning-message span{font:19px "Microsoft YaHei",sans-serif;color:var(--muted)}.awards{position:absolute;left:77px;top:353px;width:835px;height:306px}.award{position:absolute;width:247px;height:310px;padding:10px;background:#fffdfa;border:1px solid #dbc99e;opacity:0;transform:translate3d(270px,110px,0) rotate(-8deg) scale(.65);transition:transform 720ms var(--ease),opacity 400ms}.revealed .award{transform:translate3d(var(--x),0,0) rotate(var(--angle));opacity:1;transition-delay:calc(var(--order)*110ms)}.award img{display:block;width:100%;height:205px;object-fit:contain;background:white}.award figcaption{padding:10px 5px}.award b{font-size:20px;color:var(--red);display:block}.award span{display:block;font-size:12px;margin-top:6px}.award small{font-size:11px;color:var(--muted);display:block;margin-top:5px}
/* Work: two people + separate desk/computer, then documentary evidence. */
.service .title-block h1{font-size:49px}.help-scene{position:absolute;left:54px;top:278px;width:533px;height:340px}.helper{left:14px;top:20px;width:255px;height:321px;z-index:2}.peer{left:292px;top:35px;width:235px;height:300px;z-index:2}.help-desk{left:20px;top:240px;width:510px;height:27px;border-top-width:7px;z-index:5}.help-desk:after{left:25px;right:25px;top:20px;height:75px;border-left:12px solid #a6673c;border-right:12px solid #a6673c;background:transparent}.laptop{position:absolute;left:180px;top:173px;width:143px;height:78px;border:6px solid #708688;background:#d2ddd3;border-radius:5px;z-index:6}.laptop:after{content:"";position:absolute;left:-14px;bottom:-11px;width:164px;height:8px;background:#8f9e98;border-radius:3px}.laptop div{position:absolute;left:30px;top:15px;width:70px;height:35px;border-top:5px solid #f8f0d8;border-bottom:5px solid #f8f0d8}.help-message{position:absolute;left:60px;top:-8px;padding:13px 18px;background:#eddaaf;color:#876543;font:20px "KaiTi",serif;z-index:7;transform:translate3d(0,10px,0) rotate(-4deg)}.entered .help-message{transform:rotate(-4deg)}.service-role{position:absolute;left:77px;bottom:39px;font-size:19px;color:var(--red)}.service-role span{display:block;font-size:13px;color:var(--muted);margin-top:9px}.appointment{position:absolute;left:808px;top:124px;width:311px;height:480px;padding:9px;border:1px solid #d2b77d;background:#fff9e9;transform:translateY(30px) rotate(3deg)}.entered .appointment{transform:rotate(3deg)}.appointment img{width:100%;height:100%;object-fit:contain}.work-evidence{position:absolute;inset:0}.work-evidence figure{position:absolute;padding:11px;background:#fffdf5;border:1px solid #e2d3b6}.work-evidence figcaption{font-size:17px;color:var(--red);font-weight:bold;margin:2px 3px 10px}.work-evidence img{display:block;width:100%;object-fit:contain}.tutorial{left:642px;top:145px;width:281px;transform:translate3d(30px,40px,0) rotate(-7deg);transition:transform 700ms var(--ease)}.tutorial img{height:386px}.support{left:948px;top:295px;width:259px;transform:translate3d(0,70px,0) rotate(6deg);transition:transform 700ms 140ms var(--ease)}.support img{height:240px}.revealed .tutorial{transform:rotate(-2deg)}.revealed .support{transform:rotate(2deg)}.work-evidence>p{position:absolute;left:680px;top:628px;font-size:18px;color:var(--red)}
/* Four physical paper objects tell the actual workflow. */
.organize .title-block h1{font-size:48px}.organize .title-block p{font-size:17px}.organizer{left:68px;top:293px;width:255px;height:357px}.workflow{position:absolute;left:350px;right:57px;top:333px;height:266px;display:flex;gap:27px}.work-node{position:relative;flex:1;opacity:0;transform:translateY(30px);transition:transform 550ms var(--ease),opacity 400ms;text-align:center}.entered .work-node{opacity:1;transform:none;transition-delay:calc(180ms + var(--order)*210ms)}.work-node small{display:block;font:17px Georgia,serif;color:#ba9457;margin-top:30px}.work-node h2{font-family:"Microsoft YaHei",sans-serif;font-weight:500;font-size:25px;color:var(--red);margin-top:12px}.work-node p{font-size:14px;color:var(--muted);margin-top:10px}.flow-line{position:absolute;left:25px;right:25px;top:157px;height:2px;background:#d5aa5a;transform:scaleX(0);transform-origin:left;transition:transform 1200ms 300ms var(--ease)}.entered .flow-line{transform:scaleX(1)}.prop{position:relative;width:116px;height:132px;margin:auto}.notice-paper{background:#fffaf0;border:1px solid #d6b57a;transform:rotate(-5deg);padding:27px 16px}.notice-paper i{display:block;height:5px;background:#d7c49e;margin-bottom:12px}.notice-paper i:first-child{background:#b8614b;width:70%}.notice-paper span{position:absolute;right:-14px;top:-12px;width:37px;height:37px;background:#ad4335;border-radius:50%}.notice-paper span:after{content:"!";color:#fff2c9;position:absolute;left:14px;top:5px;font:bold 24px Georgia,serif}.stamp-paper{background:#fffaf0;border:1px solid #dbc59b;transform:rotate(3deg)}.paper-lines{position:absolute;left:17px;top:25px;width:80px;height:30px;border-top:4px solid #ddcfb6;border-bottom:4px solid #ddcfb6}.stamp{position:absolute;left:38px;top:45px;width:70px;height:54px;transform:translateY(-25px) rotate(-15deg)}.stamp>i{display:block;position:absolute;left:20px;top:0;width:30px;height:42px;background:#a63b2d;border-radius:15px 15px 0 0}.stamp:after{content:"";position:absolute;bottom:0;left:0;width:70px;height:16px;background:#7a3427;border-radius:4px}.entered .stamp{animation:stamp-down 800ms 720ms both}.stamp-mark{position:absolute;left:34px;bottom:14px;width:46px;height:34px;border:2px solid #ba4f37;color:#ba4f37;text-align:center;padding-top:4px;opacity:0;transform:rotate(-9deg)}.entered .stamp-mark{animation:mark-in 400ms 1130ms forwards}.chat-prop span{position:absolute;left:0;top:5px;width:80px;height:67px;background:#e4c477;color:#fff9df;border-radius:18px;font:45px Georgia,serif;padding-top:6px}.chat-prop span:after{content:"";position:absolute;bottom:-10px;left:20px;border-top:15px solid #e4c477;border-right:18px solid transparent}.chat-prop b{position:absolute;right:-6px;bottom:4px;width:77px;height:61px;background:#829891;color:#fff9e7;border-radius:18px;font-size:33px;padding-top:7px;transform:scale(.3);opacity:0}.entered .chat-prop b{animation:answer-in 500ms 1100ms both}.folder-prop{padding-top:28px}.folder-prop>div{position:absolute;bottom:0;width:128px;height:92px;background:#d4a448;border-radius:4px 4px 7px 7px;transform:skewY(-4deg)}.folder-prop>div:before{content:"";position:absolute;left:0;top:-13px;width:55px;height:20px;background:#c4943c;border-radius:5px 5px 0 0}.folder-prop>i{position:absolute;left:8px;top:3px;width:99px;height:100px;background:#f9efda;border:1px solid #d0ba8e;transform:translateY(-30px) rotate(-8deg);opacity:0}.folder-prop>i:nth-child(2){left:15px;transform:translateY(-40px) rotate(6deg)}.entered .folder-prop>i{animation:file-in 650ms 1200ms both}.entered .folder-prop>i:nth-child(2){animation-delay:1380ms}.flying-sheet{position:absolute;left:0;top:125px;width:21px;height:28px;background:#fffbec;border:1px solid #c99d4a;opacity:0}.entered .flying-sheet{animation:deliver-paper 1500ms 450ms both}.organize footer{left:360px;bottom:47px;font-family:"KaiTi",serif;font-size:26px}
@keyframes stamp-down{0%{transform:translateY(-35px) rotate(-15deg)}55%{transform:translateY(24px) rotate(0)}70%{transform:translateY(24px) rotate(0)}100%{transform:translateY(-18px) rotate(12deg)}}@keyframes mark-in{to{opacity:1}}@keyframes answer-in{to{opacity:1;transform:scale(1)}}@keyframes file-in{to{transform:translateY(18px) rotate(0);opacity:1}}@keyframes deliver-paper{0%{opacity:0;transform:translateX(0) rotate(-15deg)}10%{opacity:1}85%{opacity:1}100%{opacity:0;transform:translateX(700px) rotate(15deg)}}
/* Life: an independent stretching figure and pinned photographs. */
.life .title-block{top:100px}.life .title-block h1{font-size:51px}.exercise-sun{position:absolute;left:112px;top:304px;width:320px;height:320px;border-radius:50%;background:#edcf88}.exercise{left:172px;top:271px;width:257px;height:377px;z-index:3}.exercise-ground{position:absolute;left:99px;top:629px;width:370px;height:21px;border-radius:50%;background:#d8b46b}.month-thread{position:absolute;left:78px;top:260px;display:flex;align-items:center;gap:16px;font-size:13px;color:#9d7b42}.month-thread i{width:160px;height:1px;background:#c4a264}.photo-album{position:absolute;left:608px;top:225px;width:586px;height:376px}.photo{position:absolute;left:112px;top:10px;width:332px;height:290px;padding:10px 10px 0;background:#fffdf5;border:1px solid #ded0b3;transform:translate3d(0,0,0) rotate(-3deg);transition:transform 750ms var(--ease)}.photo:before{content:"";position:absolute;left:46%;top:-9px;width:12px;height:12px;background:#ac5040;border:3px solid #d98c6b;border-radius:50%;z-index:2}.photo img{display:block;width:100%;height:240px;object-fit:cover}.photo figcaption{text-align:center;font-size:15px;color:var(--muted);padding-top:11px}.photo-a{transform:rotate(-7deg);z-index:1}.photo-b{transform:rotate(7deg);z-index:2}.photo-main{z-index:3}.life.revealed .photo-a{transform:translate3d(-95px,-86px,0) rotate(-10deg) scale(.76)}.life.revealed .photo-b{transform:translate3d(176px,155px,0) rotate(9deg) scale(.72);transition-delay:160ms}.life.revealed .photo-main{transform:translate3d(0,48px,0) rotate(-2deg) scale(1.02);transition-delay:80ms}.life-thought{position:absolute;left:730px;top:570px;font:25px/1.6 "KaiTi",serif;color:var(--muted)}.life-ending{position:absolute;left:575px;bottom:44px;font:30px "KaiTi",serif;color:var(--red)}
/* Final letter folds into the same material world, without a costly canvas-wide zoom. */
.closing-envelope{position:absolute;left:194px;top:185px;width:885px;height:489px;background:#c28c3e;transform:rotate(4deg)}.closing-letter{position:absolute;left:173px;top:46px;width:898px;height:619px;padding:29px 55px;transform:translateY(90px) rotate(-4deg)}.entered .closing-letter{transform:rotate(-1deg)}.closing-letter h1{font-size:57px;line-height:1.15;margin-top:26px}.reflection{font-size:18px;color:var(--muted);margin-top:20px}.next-plans{margin:22px 0 0;padding:0;list-style:none}.next-plans li{font-size:22px;border-bottom:1px solid #dbc69b;padding:15px 0;opacity:0;transform:translateX(-25px);transition:transform 500ms var(--ease),opacity 400ms}.entered .next-plans li{opacity:1;transform:none;transition-delay:calc(230ms + var(--order)*140ms)}.next-plans span{font:16px Georgia,serif;color:#bd995d;display:inline-block;width:45px}.closing{font-size:17px;margin-top:27px}.signature{text-align:right;font:34px "KaiTi",serif;color:var(--red);margin-top:11px}.closing-seal{position:absolute;right:104px;bottom:67px;width:97px;height:97px;border:6px double #a4742a;background:#edc36a;color:#91632e;border-radius:50%;text-align:center;padding-top:12px;font:25px/1.25 "KaiTi",serif;z-index:4}.closing-thread{position:absolute;left:0;bottom:12px;width:100%;height:3px;background:#d5a653;transform:scaleX(0);transform-origin:left;transition:transform 1200ms 300ms}.entered .closing-thread{transform:scaleX(1)}
/* Controls live at the top, away from the author and document captions. */
.playback-ui{position:fixed;right:12px;top:10px;z-index:100;display:flex;align-items:center;gap:10px;background:#592a26ed;color:#fff1d2;padding:5px 8px;border-radius:6px;font-size:11px;opacity:0;transition:opacity 180ms;pointer-events:none}.ui-visible .playback-ui,.playback-ui:hover,.playback-ui:focus-within{opacity:1;pointer-events:auto}.playback-ui nav{display:flex;gap:2px}.playback-ui button{background:transparent;color:inherit;border:0;padding:7px 9px;border-radius:3px;font-size:11px}.playback-ui button:hover,.playback-ui button[aria-pressed=true]{background:#ffffff20}.playback-ui button:disabled{opacity:.3;cursor:default}#page-count{font-family:Georgia,serif;color:#f2ce7d;white-space:nowrap}#phase-status{font-size:10px;color:#dbb894}#progress{position:fixed;bottom:0;left:0;right:0;height:3px;background:#762923;z-index:90}#progress span{display:block;height:100%;width:100%;transform:scaleX(0);transform-origin:left;background:#e8b548;transition:transform 300ms}#keyboard-tip{position:fixed;bottom:15px;left:50%;transform:translateX(-50%);padding:8px 15px;background:#592a26ed;color:#fff1d2;z-index:90;font-size:11px;border-radius:4px;transition:opacity 300ms}#keyboard-tip.hidden{opacity:0;pointer-events:none}dialog{border:0;border-top:5px solid var(--red);background:#fff3d9;max-width:540px;width:calc(100% - 40px);padding:28px;color:var(--ink)}dialog::backdrop{background:#40201dc9}dialog h2{font-size:29px;color:var(--red);margin-bottom:22px}.dialog-close{position:absolute;right:10px;top:7px;border:0;background:none;font-size:27px;color:var(--red)}#chapter-links{display:grid;grid-template-columns:1fr 1fr;gap:8px}#chapter-links button{border:1px solid #d8bd89;background:#fff9ec;color:var(--ink);padding:13px;text-align:left;font-size:13px}dialog a{display:block;color:var(--red);margin-top:24px;font-size:14px}#restart{margin-top:20px;border:0;background:var(--red);color:var(--paper);padding:10px 15px}#loading{position:fixed;inset:0;background:#8b302b;color:var(--paper);z-index:500;display:flex;align-items:center;justify-content:center;flex-direction:column}#loading h1{font-size:44px;font-weight:400}#loading p{font-size:14px;margin:25px 0;color:#edcd99}#loading small{font-size:12px;margin-top:14px}.load-track{width:240px;height:3px;background:#aa5742}.load-track i{display:block;height:100%;background:var(--gold);width:0}#load-retry{margin-top:15px;padding:10px 15px;border:0}.loaded #loading{display:none}.motion-reduced *,.motion-reduced *:before,.motion-reduced *:after{transition-duration:1ms!important;transition-delay:0ms!important;animation-duration:1ms!important;animation-delay:0ms!important}.in-console .playback-ui{display:none}@media(max-width:700px){#phase-status,#motion{display:none}.playback-ui{right:6px;top:6px;gap:5px}.playback-ui button{padding:7px 6px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

.listener img,.organizer img{transform:scaleX(-1)}

/* User-provided product home, shown in full inside the monitor. */
.system-screen{height:calc(100% - 31px);background:#f0f8fc;display:flex;align-items:center;justify-content:center}.system-screen img{display:block;width:100%;height:100%;object-fit:contain}