:root{--ink:#173e35;--cream:#f3f0e5;--muted:#6c786e;--lime:#e5ec99;--line:#d8ddd1;--serif:Georgia,'Noto Serif SC','Songti SC','SimSun',serif}*{box-sizing:border-box}body{margin:0;background:#b3c4ac;color:var(--ink);font-family:'Segoe UI','Microsoft YaHei',sans-serif;font-size:15px}button,input,textarea,select{font:inherit}button,a,input,textarea,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer;border:0;color:inherit;background:none}button:focus-visible,a:focus-visible{outline:3px solid #b6c751;outline-offset:5px}button:disabled{opacity:.5;cursor:wait}a{color:inherit}button{transition:background .2s,transform .2s}button:hover{transform:translateY(-1px)}[hidden]{display:none!important}#world,#water{position:fixed;inset:0;width:100%;height:100%;z-index:0}#water{display:none;pointer-events:none}body.river-mode #water{display:block;z-index:0}body.river-mode #world{z-index:1}.grain{position:fixed;inset:0;pointer-events:none;opacity:.1;z-index:3;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23999' filter='url(%23n)' opacity='.4' d='M0 0h180v180H0z'/%3E%3C/svg%3E")}header{height:100px;position:relative;z-index:5;display:flex;align-items:center;justify-content:space-between;padding:0 5vw;border-bottom:1px solid #173e3526}.brand{display:flex;align-items:center;gap:12px;text-align:left;font-weight:650;letter-spacing:2px;font-size:18px}.brand small{display:block;font-size:8px;font-weight:500;letter-spacing:2.3px;margin-top:5px}.brand-icon{display:grid;place-items:center;border:1px solid currentColor;border-radius:50%;height:43px;width:43px;font-size:30px;font-weight:300}nav{display:flex;align-items:center;gap:25px}nav button{font-size:12px;letter-spacing:1px}nav button span{margin-left:12px}.eyebrow{font-size:10px;letter-spacing:2.6px;font-weight:600;line-height:1.8}#game{position:relative;z-index:2;min-height:calc(100svh - 100px);padding:28px 5vw 90px}.game-top{display:flex;justify-content:space-between;align-items:center}.game-top #progress{font-size:12px}#intro{padding-top:7vh;width:48%;max-width:620px}h1,h2,h3,p{margin-top:0}#intro h1{font-family:var(--serif);font-size:clamp(60px,6.4vw,112px);line-height:1.17;font-weight:400;letter-spacing:-5px;margin:24px 0}em{font-style:normal;color:#426849}#intro .intro-copy{font-size:14px;line-height:2;color:#365549;margin:26px 0}.intro-actions{display:flex;gap:20px;align-items:center;margin-top:30px}.primary,.secondary{padding:17px 24px;display:inline-flex;justify-content:center;align-items:center;gap:25px;border-radius:2px;font-size:13px}.primary{background:var(--ink);color:var(--cream)}.primary:hover{background:#255d4e}.primary span{font-size:20px}.secondary{border:1px solid #173e3545;background:#f3f0e5b8}.text-button{font-size:12px;padding:12px 0}.chapters{display:flex;flex-wrap:wrap;gap:18px;font-size:10px;margin-top:45px;color:#476054}.game-footer{position:absolute;bottom:27px;left:5vw;right:5vw;display:flex;justify-content:space-between;font-size:10px;letter-spacing:1px}.game-footer i{font-family:var(--serif);font-size:16px;letter-spacing:0;margin-left:15px}.status-dot{display:inline-block;width:6px;height:6px;background:#306543;border-radius:50%;margin-right:6px!important}.game-footer>span{display:flex;align-items:center}#rally{position:absolute;left:7vw;top:20vh;width:30%;text-align:center}#countdown{font:120px/1 var(--serif);min-height:120px;margin:18px 0;color:#244d37}#rally h2{font:30px var(--serif)}#rally-help{line-height:1.8;font-size:13px}#rally .primary{min-width:190px}#skip-rally{display:block;margin:12px auto}kbd{font:9px 'Segoe UI';border:1px solid #ffffff55;border-radius:3px;padding:4px}body.lesson-mode{background:var(--cream)}body.lesson-mode #world,body.lesson-mode .grain{display:none}body.lesson-mode header{background:var(--cream)}#lesson{position:relative;z-index:2;background:var(--cream);padding:0 5vw 70px}.lesson-bar{display:flex;justify-content:space-between;align-items:center;min-height:68px;border-bottom:1px solid var(--line);font-size:11px}.lesson-grid{display:grid;grid-template-columns:minmax(280px,.9fr) minmax(400px,1.1fr);gap:6vw;max-width:1450px;margin:auto;padding-top:44px}.source-paper{align-self:start;position:sticky;top:25px}.paper-label{display:flex;justify-content:space-between;font-size:9px;letter-spacing:1.4px;padding-bottom:15px}#source-images{background:white;border:1px solid #dfdfd4;padding:15px;box-shadow:0 8px 28px #283e3010}#source-images img{width:100%;display:block;cursor:zoom-in;margin:6px 0}.image-hint{font-size:10px;color:var(--muted);text-align:center;margin:12px 0 20px}details{border-top:1px solid var(--line);padding:16px 0}summary{cursor:pointer;font-size:12px}details p,details div{font-size:13px;line-height:1.9;margin:14px 0;white-space:pre-line}#english{font-family:Georgia,serif;font-size:15px;line-height:1.7}.note-label{display:block;font-size:11px;margin:25px 0 10px}textarea{resize:vertical;min-height:110px;width:100%;padding:14px;background:#ebeadd;border:1px solid #d6dbcf;border-radius:2px;font-size:12px;line-height:1.8}.saved-note{display:block;font-size:9px;color:var(--muted);margin-top:8px}article h1{font:36px/1.45 var(--serif);margin:13px 0 28px;letter-spacing:-1px}article h3{font-size:16px;font-weight:600;margin-bottom:12px}article p{font-size:14px;line-height:1.95;white-space:pre-line}.translation{border-bottom:1px solid var(--line);padding-bottom:18px;margin-bottom:28px}.translation h3{font-size:11px;color:var(--muted);letter-spacing:1px}.known{display:flex;gap:18px;line-height:1.9;font-size:13px;white-space:pre-line}.section-number{font:italic 24px var(--serif);color:#879380}.analogy{margin:28px 0;padding:23px 25px;background:#e5e9d7;border-left:2px solid #8d9d63}.analogy span{font-size:10px;letter-spacing:1px}.analogy p{margin:8px 0 0;font-size:13px}.steps-header{display:flex;gap:18px;align-items:center;margin:35px 0 12px}.steps-header h3{margin:0;flex:1}.step{padding:18px 0;border-bottom:1px solid var(--line)}.step summary{display:flex;align-items:center;gap:12px;font-size:13px;line-height:1.7;list-style:none}.step summary:before{content:'+';display:grid;place-items:center;width:23px;height:23px;flex:none;background:#e3e8d8}.step[open] summary:before{content:'−'}.step p{font-size:14px;padding-left:35px;margin:13px 0 0}.result{background:var(--ink);color:#f3f0e5;padding:22px;margin:24px 0;line-height:1.85;white-space:pre-line;font-size:14px}.result strong{display:block;color:#dfe8a5;font-size:11px;letter-spacing:1px;margin-bottom:10px}.pitfall{border-left:2px solid #bd8553;padding:0 18px;margin:28px 0;line-height:1.9;font-size:13px;white-space:pre-line}#checkpoint{margin-top:38px;padding:28px;background:#eaece1}#checkpoint h3{font-size:16px;line-height:1.7;margin-top:12px}#check-options{display:grid;gap:9px}#check-options button{text-align:left;padding:13px 16px;border:1px solid #bec8b6;background:#f5f5eb;font-size:13px;line-height:1.8}#check-options button.correct{background:#d3e1b3;border-color:#6e8850}#check-options button.wrong{background:#f0d9c7;border-color:#bd8553}#check-feedback{margin:14px 0 0;font-size:12px}.lesson-actions{display:flex;justify-content:space-between;gap:12px;margin-top:28px}.lesson-actions button{padding:15px;font-size:12px;flex:1}.no-rush{text-align:center;font-size:10px;color:var(--muted);margin-top:17px}dialog{border:0;background:var(--cream);color:var(--ink);border-radius:4px;max-width:1000px;width:90vw;padding:34px;max-height:86svh;box-shadow:0 40px 100px #001b2680}dialog::backdrop{background:#092a3270;backdrop-filter:blur(7px)}.modal-heading{display:flex;justify-content:space-between;align-items:start;gap:20px}.modal-heading h2{font:30px/1.4 var(--serif);margin:12px 0 20px}.close{font:30px/1 sans-serif;padding:5px 10px}.library-stats{display:flex;gap:26px;padding:15px 0 22px;font-size:12px}.library-controls{display:flex;gap:10px;margin-bottom:20px}input[type=search],select{padding:12px;border:1px solid #cbd3c3;background:#f8f7ef;color:var(--ink);font-size:12px}input[type=search]{flex:1;min-width:0}.library-row{display:grid;grid-template-columns:75px 1fr 80px;gap:15px;text-align:left;width:100%;padding:17px 3px;border-top:1px solid var(--line);align-items:center}.library-row .qid{font-size:10px;color:var(--muted)}.library-row .qtitle{font-size:13px;line-height:1.7}.badge{font-size:10px;text-align:right;color:#71806b}.badge.review{color:#a06635}.badge.done{color:#3a704f}.library-bottom{display:flex;gap:24px;align-items:center;padding-top:20px;border-top:1px solid var(--line);margin-top:20px}.import-label{cursor:pointer}#preferences{max-width:560px}#preferences label{display:flex;justify-content:space-between;align-items:center;gap:16px;font-size:13px;padding:16px 0;border-bottom:1px solid var(--line)}#preferences p{font-size:12px;line-height:1.9;margin-top:20px}.credits{color:var(--muted)}#image-view{width:94vw;max-width:1400px;padding:18px;background:white}#image-view img{width:100%;height:auto;display:block}#image-view .close{position:sticky;top:0;float:right;background:white}#toast{position:fixed;z-index:50;bottom:30px;left:50%;transform:translate(-50%,20px);opacity:0;background:var(--ink);color:white;padding:14px 24px;pointer-events:none;transition:.2s;font-size:12px;max-width:90vw}#toast.show{opacity:1;transform:translate(-50%,0)}body.river-mode{background:#24848b;color:#f0ecd9}body.river-mode header{border-color:#ffffff30}#river{position:fixed;inset:100px 0 0;z-index:2;pointer-events:none}.river-title{position:absolute;left:5vw;top:35px}.river-title h1{font:46px/1.3 var(--serif);letter-spacing:-2px;margin:10px 0}.river-title h1 em{color:#e6edc3}.river-title p{font-size:12px;color:#e1eadc}.river-tools{position:absolute;right:5vw;top:42px;display:flex;gap:8px;pointer-events:auto}.river-tools button{padding:11px 16px;color:var(--ink);font-size:11px}.river-instructions{position:absolute;bottom:28px;left:0;width:100%;text-align:center;font-size:11px;letter-spacing:1px}.shore-label{position:absolute;pointer-events:auto;transform:translate(-50%,-50%);background:#f5f0dfed;color:#234d47;padding:13px 18px;border:1px solid #e3e7cc;border-radius:2px;width:190px;text-align:left;box-shadow:0 5px 18px #143f4420}.shore-label small{display:block;font-size:8px;letter-spacing:1px;color:#7a866c;margin-bottom:5px}.shore-label span{display:block;font:15px/1.5 var(--serif)}.shore-label.review{border-left:4px solid #d89f68}.shore-label.done{border-left:4px solid #a5b76c}#dock{position:absolute;left:50%;bottom:75px;transform:translateX(-50%);text-align:center;pointer-events:auto;background:#f5f0e5f5;color:var(--ink);padding:20px 35px;min-width:300px;box-shadow:0 20px 50px #143f4430}#dock>span{font-size:10px;letter-spacing:2px}#dock h3{font:20px var(--serif);margin:10px 0 15px}#dock .primary{padding:12px 25px}@media(min-width:1500px){#intro{padding-top:11vh}}@media(max-width:760px){header{height:76px;padding:0 6vw}.brand{font-size:15px;gap:8px}.brand-icon{width:34px;height:34px;font-size:24px}.brand small{font-size:6px}nav{gap:12px}nav button{font-size:10px}#game{min-height:calc(100svh - 76px);padding:20px 6vw 70px}.game-top .eyebrow{font-size:7px;letter-spacing:1px}.game-top #progress{font-size:10px}#intro{width:100%;padding-top:4vh;max-width:100%}#intro h1{font-size:52px;letter-spacing:-3px;margin:16px 0}#intro>.eyebrow{font-size:9px;letter-spacing:1px}.intro-copy{max-width:220px;font-size:11px!important;margin:16px 0!important}.intro-actions{gap:15px;margin-top:24px}.primary,.secondary{padding:14px 18px}.chapters{gap:10px;font-size:8px;margin-top:22px;max-width:210px}.game-footer{bottom:18px;left:6vw;right:6vw;font-size:8px}.game-footer>span:last-child{display:none}#rally{left:5vw;top:7vh;width:90%;text-align:center}#rally #countdown{font-size:80px;min-height:80px}#rally h2{font-size:24px;margin-bottom:10px}#rally-help{font-size:11px}#rally .primary{position:fixed;bottom:100px;left:50%;transform:translateX(-50%)}#skip-rally{position:fixed;bottom:58px;left:50%;transform:translateX(-50%);white-space:nowrap}.lesson-grid{display:flex;flex-direction:column;gap:35px;padding-top:24px}.source-paper{position:static}.lesson-bar{font-size:9px;gap:6px}.lesson-bar .text-button{font-size:10px}.source-paper textarea,.source-paper .note-label,.source-paper .saved-note{display:none}article h1{font-size:29px}#lesson{padding:0 6vw 30px}#checkpoint{padding:20px}.steps-header{gap:10px}.steps-header h3{font-size:14px}.steps-header .text-button{font-size:10px}.lesson-actions{flex-wrap:wrap}dialog{padding:23px;width:94vw;max-height:90svh}.modal-heading h2{font-size:24px}.library-controls{flex-wrap:wrap}.library-controls input{flex-basis:100%}.library-controls select{flex:1}.library-row{grid-template-columns:58px 1fr 48px;gap:8px}.library-row .qtitle{font-size:12px}.library-bottom{flex-wrap:wrap;gap:15px}.library-stats{gap:15px;font-size:10px}#river{top:76px}.river-title{top:22px;left:6vw}.river-title h1{font-size:29px}.river-title p{max-width:220px;font-size:10px}.river-tools{top:auto;bottom:62px;right:6vw}.river-tools button{font-size:10px}.river-instructions{font-size:8px;padding:0 20px;bottom:22px}.shore-label{width:150px;padding:10px 12px}.shore-label span{font-size:12px}#dock{bottom:120px;min-width:270px;padding:15px}.river-title .eyebrow{font-size:8px}}@media(prefers-reduced-motion:reduce){button{transition:none}.grain{display:none}}
#lesson-diagrams{margin:28px 0}#lesson-diagrams p{font-size:12px;margin:18px 0 6px}#lesson-diagrams svg{width:100%;height:auto;background:#e9ecdf;padding:8px;display:block}
