:root{--paper:#f6f2e8;--ink:#2c433a;--muted:#6f7c69;--green:#466653;--line:#d9ddcd}*{box-sizing:border-box}html{-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%}body{color:var(--ink);background:var(--paper);margin:0;font-family:Microsoft YaHei,PingFang SC,system-ui,sans-serif}button{color:inherit;font:inherit;cursor:pointer;border:1px solid var(--line);background:#fffdf8;border-radius:12px;min-height:48px;padding:10px 20px;transition:background .15s,border-color .15s}button:hover{border-color:var(--green);background:#edf1e5}button:disabled{cursor:default;opacity:.4}button:focus-visible,summary:focus-visible{outline-offset:3px;outline:3px solid #b86a36}button.primary{color:#fffdf5;background:var(--green);border-color:var(--green)}button.primary:hover{background:#34534b}.app-shell{height:100dvh;min-height:680px;position:relative;overflow:hidden}.stage-backdrop{pointer-events:none;background:linear-gradient(#f6f2e8 10%,#edf1df 68%,#dce4c8 83%,#f6f2e8 83%);position:absolute;inset:0;overflow:hidden}.sun-disc{opacity:.6;background:#edd6a1;border-radius:50%;width:180px;height:180px;position:absolute;top:20%;right:15%}.landscape{background:#c9d7b9;border-radius:50%;width:90%;height:45%;position:absolute;bottom:20%;right:-20%;transform:rotate(-8deg)}.ridge-two{opacity:.5;background:#b7c9a7;width:70%;height:30%;bottom:16%;right:8%;transform:rotate(10deg)}.stage-canvas{position:absolute;inset:175px 0 200px}.stage-canvas canvas{width:100%;height:100%;display:block}.lesson-layout{z-index:1;pointer-events:none;height:100%;padding:0 40px;position:relative}.lesson-layout button,.lesson-layout details{pointer-events:auto}.topbar{border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;height:84px;display:flex}.brand{letter-spacing:.08em;align-items:center;gap:12px;font-size:20px;font-weight:750;display:flex}.brand-mark{background:var(--green);color:#f3dc9f;border-radius:14px;place-items:center;width:47px;height:47px;font-size:32px;display:grid}.brand small{letter-spacing:.22em;color:var(--muted);margin-top:4px;font-size:12px;font-weight:400;display:block}.toolbar{gap:8px;font-size:15px;display:flex}.toolbar button{background:#fffdf777;padding:8px 17px}.chapters{align-items:center;gap:10px;height:76px;display:flex}.lesson-selector{min-height:48px;font:inherit;pointer-events:auto;z-index:3;background:#fffcf2;border:1px solid #c3cfb8;border-radius:10px;max-width:300px;padding:8px;position:absolute;top:164px;right:40px}.chapter{white-space:nowrap;background:0 0;border:0;flex:1;justify-content:center;align-items:center;gap:10px;padding:8px;font-size:17px;display:flex}.chapter-number{border:1px solid #b9c5b4;border-radius:50%;place-items:center;width:29px;height:29px;font-size:14px;display:inline-grid}.chapter.active{color:var(--green);background:#e5eadc}.chapter.active .chapter-number{background:var(--green);color:#fff}.shot-heading{z-index:1;max-width:900px;margin-top:14px;position:relative}.eyebrow{color:#6f7e68;letter-spacing:.13em;font-size:13px;font-weight:600}.eyebrow span{color:#88927d}h1{letter-spacing:-.035em;margin:14px 0 10px;font-size:42px;font-weight:750;line-height:1.28}.prompt{margin:0;font-size:28px;line-height:1.5}.story-panel{pointer-events:none;align-content:center;width:40%;display:grid;position:absolute;top:310px;bottom:218px;left:50px}.lesson-layout:has(.has-outcome) .story-panel{transform:translateY(-20px)}.work-card{background:#fffdf6;border-radius:10px;width:min(90%,420px);padding:12px 12px 14px;transform:rotate(-3deg);box-shadow:0 10px 24px #354b3820}.paper-art{background:#dbe8dc;border-radius:5px;height:140px;position:relative;overflow:hidden}.art-sun{background:#efc86f;border-radius:50%;width:44px;height:44px;position:absolute;top:15px;right:25px}.art-mountain{background:#81ab92;border-radius:15px;width:160px;height:150px;position:absolute;bottom:-95px;left:0;transform:rotate(45deg)}.art-mountain.two{background:#afbf87;width:200px;height:200px;bottom:-110px;left:130px}.art-tree{background:#4f8271;border-radius:50% 50% 40% 40%;width:55px;height:75px;position:absolute;bottom:5px;left:100px}.paper-caption{text-align:center;color:#617361;margin-top:10px;font-size:16px;display:block}.scene-message{gap:8px;margin-top:15px;display:grid}.scene-message span{background:#e9efdf;border-radius:10px;padding:9px 12px;font-size:28px}.photo-clues{color:#926a46;justify-content:space-around;margin-top:8px;font-size:28px;display:flex}.story-note{color:#45614e;text-align:right;font-size:20px;position:absolute;bottom:212px;right:5%}.story-note p{margin:8px 0;font-size:15px}.decision-area{min-height:106px;position:absolute;bottom:90px;left:40px;right:40px}.choice-grid{grid-template-columns:1fr 1fr;gap:22px;display:grid}.choice-card{text-align:left;background:#fffdf5f5;border:1px solid #cdd3bd;align-items:center;gap:18px;min-height:112px;padding:18px 22px;font-size:28px;line-height:1.4;display:flex;box-shadow:0 5px #d6ddca}.choice-letter{width:48px;height:48px;color:var(--green);background:#e9eddf;border-radius:50%;flex-shrink:0;place-items:center;font-family:Georgia,serif;font-size:25px;display:grid}.choice-arrow{color:#78927a;margin-left:auto;font-size:20px}.consequence-view{width:100%;max-width:480px;height:180px;position:relative}.scene-art{width:100%;height:100%;display:block}.crop-mask{height:100%}.crop-frame{pointer-events:none;border:3px solid #789a69;border-radius:5px;position:absolute;inset:7% 28%}.visual-labels{justify-content:space-between;gap:12px;width:100%;display:flex;position:absolute;bottom:0}.visual-labels strong{text-align:center;width:33.33%;font-size:28px;font-weight:500;line-height:1.35}.message-source{opacity:.3;width:72px;position:absolute;top:0;left:calc(50% - 36px)}.message-copy{opacity:0;width:33.3333%;position:absolute;top:0;left:33.3333%}.message-copy svg{width:72px;max-width:100%;margin:0 auto;display:block}.halt-hand{color:#9c6941;place-items:center;padding:5px;font-size:28px;display:grid}.halt-hand span{font-size:70px;line-height:1.2}.simulated-popup{transform-origin:92% 8%;background:#fff9ef;border:2px solid #c2b694;border-radius:15px;grid-template-columns:1fr 1fr;align-content:center;gap:10px;padding:15px 26px;display:grid;position:absolute;inset:0}.simulated-popup>div{grid-column:1/-1;font-size:28px}.simulated-popup strong{font-size:28px;font-weight:400}.popup-close{font-size:30px;position:absolute;top:0;right:10px}.buddy{width:65px;position:absolute;top:2px}.buddy-left{left:12%}.buddy-center{left:43%}.buddy-right{left:74%}.inspection-pages{justify-content:space-around;display:flex}.inspection-pages>div{width:64px}.inspection-lens{width:68px;position:absolute;top:15px;left:calc(50% - 34px)}.inspection-prop{background:#fffaf0;border:2px solid #c6ceb8;border-radius:16px;justify-content:space-between;align-items:center;gap:10px;height:100%;padding:15px;display:flex}.inspection-prop>div{text-align:center;width:33.33%;font-size:28px;position:relative}.inspection-prop svg{width:calc(100% + 10px);height:calc(100% + 16px);position:absolute;inset:-8px -5px}.stage-dialogue{background:#fffaf0e8;border:1px solid #c7d3bc;border-radius:14px;max-width:48%;padding:12px 20px;font-size:28px;line-height:1.4;position:absolute;bottom:216px;right:40px}.has-outcome{background:#fffdf6ed;border:1px solid #d6ddc5;border-radius:16px;min-height:126px;padding:14px 22px}.outcome-copy{align-items:flex-start;gap:16px;display:flex}.outcome-icon{color:#94794b;font-size:36px}h2{margin:0 0 5px;font-size:28px;line-height:1.35}.outcome-copy p{margin:0;font-size:28px;line-height:1.5;display:inline}.outcome-copy p.remedy{color:#4c6c53;margin-left:15px}.result-actions{align-items:center;gap:14px;margin-left:48px;display:flex}.small-link{color:#526d53;background:0 0;border:0;min-height:48px;padding:6px 0;font-size:15px}.chapter-transition{color:#6f7e68;margin-left:auto;font-size:14px}.footer-controls{border-top:1px solid #bdcbb7;align-items:center;gap:12px;height:75px;display:flex;position:absolute;bottom:0;left:40px;right:40px}.footer-controls p{color:#6e7d69;flex:1;font-size:15px}.footer-controls button{min-width:112px;font-size:17px}.ending-rule{text-align:center;background:#f8f7ecdf;border-radius:14px;padding:32px 15px;font-size:28px}.narration{background:#f8f8eddb;border-radius:10px;max-width:44%;font-size:13px;position:absolute;top:258px;right:40px}.narration summary{cursor:pointer;color:#61705f;padding:8px 12px}.narration[open]{z-index:4;border:1px solid #b9c8af}.narration p{max-height:330px;padding:0 20px 12px;font-size:28px;line-height:1.6;overflow-y:auto}.welcome-shade{z-index:5;background:linear-gradient(90deg,#f6f2e8 18%,#f6f2e8e8 42%,#f6f2e800 80%);align-items:center;padding-left:7%;display:flex;position:absolute;inset:0}.welcome-card{width:52%}.welcome-card h1{color:#304e44;margin:25px 0;font-size:clamp(48px,5.3vw,86px);line-height:1.16}.welcome-card h1,.welcome-card p{white-space:pre-line}.welcome-card p{color:#60765f;margin:20px 0 30px;font-size:28px;line-height:1.6}.welcome-actions{gap:14px;display:flex}.welcome-actions button{padding:14px 30px;font-size:22px}.preview-label{color:#8c775b;margin-top:20px;font-size:13px;display:block}.pause-badge{color:#fff;background:#3f5b4de6;border-radius:10px;padding:12px 22px;font-size:17px;position:absolute;top:312px;right:60px}.system-message,.audio-message{z-index:8;background:#ffefc8;border-radius:12px;padding:14px 20px;font-size:17px;position:absolute;bottom:76px;left:20%;right:20%;box-shadow:0 3px 16px #0001}.system-message button,.audio-message button{float:right;min-height:30px;margin-left:15px;padding:2px 10px;font-size:13px}.fatal-error{z-index:10;background:var(--paper);place-content:center;padding:60px;display:grid;position:absolute;inset:0}.fatal-error p,.fatal-error pre{white-space:pre-wrap;font-size:22px}.modal-shade{z-index:9;pointer-events:auto;background:#233a2b66;place-items:center;display:grid;position:absolute;inset:0}.share-cards{background:var(--paper);border-radius:24px;width:min(1000px,90%);max-height:88vh;padding:32px;overflow:auto}.modal-title{justify-content:space-between;align-items:center;margin-bottom:20px;display:flex}.card-tabs{gap:12px;margin-bottom:20px;display:flex}.card-tabs button{font-size:22px}.card-tabs [aria-pressed=true]{background:var(--green);color:#fff}.privacy-grid{grid-template-columns:repeat(3,1fr);gap:12px;display:grid}.privacy-grid div{background:#fffef8;border:1px solid #c9d4bd;border-radius:12px;padding:18px 12px;font-size:28px}.share-cards p{font-size:28px;line-height:1.5}@media (width>=1024px) and (height>=850px){.lesson-layout{padding:0 70px}.topbar{height:104px}.chapters{gap:20px;height:98px}.chapter{font-size:22px}.shot-heading{margin-top:30px}h1{font-size:56px}.stage-canvas{top:230px;bottom:240px}.story-panel{top:410px;bottom:280px;left:80px}.work-card{width:95%;max-width:540px;padding:22px}.paper-art{height:220px}.paper-caption{font-size:22px}.decision-area{bottom:110px;left:70px;right:70px}.choice-card{min-height:140px;padding:30px}.footer-controls{height:90px;left:70px;right:70px}.outcome-copy p{font-size:28px}.has-outcome{min-height:155px;padding:24px 30px}.consequence-view{max-width:600px;height:230px}.story-note{font-size:28px;bottom:300px}.narration{top:330px;right:70px}}@media (width<=1023px){.app-shell{height:auto;min-height:100dvh;padding:16px max(16px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));flex-direction:column;gap:16px;display:flex;overflow:visible}.lesson-layout{display:contents}.lesson-layout>*{z-index:1}.topbar{flex-direction:column;order:0;align-items:stretch;gap:14px;height:auto;padding-bottom:16px;display:flex}.brand{letter-spacing:.04em;min-width:0;font-size:18px}.brand-mark{flex-shrink:0;width:40px;height:40px;font-size:28px}.brand small{letter-spacing:.12em;font-size:11px}.toolbar{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;font-size:13px;display:grid}.toolbar button{white-space:nowrap;min-width:0;min-height:44px;padding:10px 6px}.chapters{pointer-events:auto;order:1;gap:6px;height:auto;min-height:48px;padding:2px 0 8px;overflow-x:auto}.chapter{flex:none;gap:8px;padding:8px 10px;font-size:15px}.chapter-number{flex-shrink:0}.lesson-selector{order:2;width:100%;max-width:100%;position:static}.shot-heading{order:3;min-width:0;margin:0}h1{margin:10px 0 8px;font-size:30px}.prompt{font-size:20px}.eyebrow{letter-spacing:.06em;font-size:12px}.stage-canvas{aspect-ratio:2.6;flex:none;order:4;width:100%;min-width:0;height:auto;max-height:260px;position:relative;inset:auto}.stage-canvas canvas{position:absolute;inset:0}.story-panel{order:5;justify-items:center;width:100%;min-width:0;display:grid;position:static}.lesson-layout:has(.has-outcome) .story-panel{transform:none}.work-card{width:100%;max-width:480px;transform:none}.paper-art{height:140px}.paper-caption{font-size:16px}.photo-clues,.scene-message span{font-size:20px}.consequence-view{max-width:480px;height:190px;overflow:hidden}.visual-labels strong{font-size:18px}.simulated-popup{padding:16px}.simulated-popup>div,.simulated-popup strong,.inspection-prop>div{font-size:20px}.stage-dialogue{order:6;max-width:none;padding:12px 14px;font-size:20px;position:static}.story-note{text-align:left;order:7;font-size:20px;position:static}.story-note p{font-size:16px}.narration{pointer-events:auto;order:8;max-width:none;position:static}.narration p{max-height:none;padding:0 14px 12px;font-size:20px}.decision-area{order:9;min-width:0;min-height:0;position:static}.choice-grid{grid-template-columns:minmax(0,1fr);gap:12px}.choice-card{gap:12px;min-width:0;min-height:76px;padding:14px;font-size:20px}.choice-card>span:nth-child(2),.outcome-copy>div{overflow-wrap:anywhere;min-width:0}.choice-letter{width:38px;height:38px;font-size:22px}.choice-arrow{flex-shrink:0}.has-outcome{padding:16px}.outcome-copy{gap:10px}.outcome-icon{font-size:26px}h2{font-size:22px}.outcome-copy p{font-size:20px;display:block}.outcome-copy p.remedy{margin:8px 0 0}.result-actions{flex-wrap:wrap;gap:8px 16px;margin:8px 0 0}.chapter-transition{width:100%;margin:0}.ending-rule{padding:20px 14px;font-size:20px}.footer-controls{order:10;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;height:auto;padding-top:12px;display:grid;position:static}.footer-controls p{grid-area:1/1/auto/-1;margin:0 0 4px;font-size:14px}.footer-controls button{white-space:nowrap;min-width:0;padding:10px 6px;font-size:15px}.pause-badge{order:9;padding:10px 12px;font-size:15px;position:static}.welcome-shade{background:0 0;order:0;padding:20px 0 8px;display:block;position:static}.welcome-card{width:100%}.welcome-card h1{margin:20px 0;font-size:clamp(36px,7vw,52px);line-height:1.2}.welcome-card p{margin:16px 0 24px;font-size:20px;line-height:1.6}.welcome-actions{flex-wrap:wrap;gap:12px}.welcome-actions button{white-space:nowrap;padding:12px 20px;font-size:18px}.app-shell:has(.welcome-shade) .lesson-layout{display:none}.modal-shade{z-index:9;padding:16px;position:fixed}.share-cards{border-radius:16px;width:100%;max-width:600px;max-height:calc(100dvh - 32px);padding:20px}.modal-title{align-items:flex-start;gap:12px}.modal-title button{flex-shrink:0;padding:10px 14px}.card-tabs{flex-wrap:wrap;gap:8px}.card-tabs button{padding:10px 14px;font-size:16px}.privacy-grid{grid-template-columns:minmax(0,1fr)}.privacy-grid div,.share-cards p{font-size:18px}.system-message,.audio-message{bottom:calc(12px + env(safe-area-inset-bottom));z-index:8;font-size:16px;position:fixed;left:16px;right:16px}.fatal-error{padding:24px;position:fixed}.fatal-error p,.fatal-error pre{overflow-wrap:anywhere;font-size:18px}}
