*{box-sizing:border-box}body{margin:0;color:#433421;font-family:'PingFang SC','Microsoft YaHei',sans-serif;background:linear-gradient(110deg,#e9efdd,#f7eedb 50%,#e2ebd3);min-height:100vh}button,a,input{font:inherit}button,a{touch-action:manipulation}button{cursor:pointer;min-height:48px;border:1px solid #dccca7;border-radius:16px;background:#fffaf0;color:#453825;padding:12px 20px}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #a27623;outline-offset:3px}header{display:flex;align-items:center;justify-content:space-between;gap:20px;max-width:1220px;margin:auto;padding:22px 30px}header a{color:#4a543c;text-decoration:none;font-weight:600}header>div{text-align:center}small,.muted{color:#817057}h1{font-family:serif;font-size:34px;margin:4px 0}nav{display:flex;justify-content:center;gap:12px;max-width:1220px;margin:0 auto 20px;padding:0 24px}nav button{flex:1;max-width:175px;font-weight:600}nav .active{background:#3d7c4b;color:white;border-color:#3d7c4b}nav .pending{color:#998e7c;background:#eee9df}nav small{display:block;font-size:11px;margin-top:4px}nav .active small{color:#e2eddc}main{max-width:1160px;margin:auto;padding:28px 34px;background:#fffcf2;border:2px solid #d8bd85;border-radius:26px;box-shadow:0 15px 45px #53654a18;min-height:480px}.topline{display:flex;justify-content:space-between;align-items:center;gap:16px}.tag{background:#efdfb4;color:#705527;border-radius:20px;padding:9px 18px;font-size:14px}h2{font-size:28px;margin:12px 0}p{line-height:1.7}.layout{display:grid;grid-template-columns:260px 1fr;gap:36px;margin-top:22px}.guide{padding:24px;background:#eef2e2;border-radius:20px}.guide .bee{font-size:75px;text-align:center;margin:18px 0}.guide h3{margin:0}.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:22px 0}.card{text-align:left;padding:18px;border:1px solid #e5d7b8;border-radius:16px;background:white}.card b{display:block;font-size:25px;color:#3d7145}.card span{display:block;color:#936b29;font-size:14px;margin:8px 0}.card p{font-size:14px;margin:0}.primary{background:linear-gradient(#579c5e,#337545);color:white;font-weight:600;border:1px solid #2c683a;box-shadow:0 3px 0 #23572c}.actions{display:flex;gap:14px;align-items:center;justify-content:flex-end;flex-wrap:wrap}.question{text-align:center;padding:18px 0}.question .word{font-family:serif;font-size:56px;margin:14px 0;color:#367142}.question .sound{color:#966c2b;font-size:22px}.options{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin:24px 0}.options button{min-height:76px;background:white;font-size:23px}.options .selected{border:3px solid #b58a36;background:#fff0c7}.options button:disabled{opacity:.8;cursor:default}button:disabled{cursor:default;opacity:.5}.feedback{border-radius:16px;background:#edf4e7;padding:16px 20px;line-height:1.7;margin-bottom:18px}.feedback.wrong{background:#fff0da}.progress{height:9px;background:#e9dfc9;border-radius:20px;margin:20px 0}.progress span{display:block;background:#6c9861;height:100%;border-radius:20px}.success{text-align:center;padding:35px}.success .medal{font-size:70px}.success .actions{justify-content:center}.notice{background:#f0ebdc;padding:14px 18px;border-radius:15px}footer{text-align:center;font-size:13px;color:#7a806e;padding:20px}dialog{border:2px solid #d8bd85;border-radius:24px;max-width:440px;padding:30px;background:#fffcf2}dialog::backdrop{background:#263e2b77}label,input{display:block}input{width:100%;padding:14px;border:1px solid #d8bd85;border-radius:12px;margin:10px 0 20px}dialog button{width:100%}.sources{font-size:12px;color:#82775e;margin-top:24px}.sources a{color:#617749}@media(max-width:800px){header{padding:18px;gap:10px}h1{font-size:27px}header a{font-size:13px}nav{gap:6px;padding:0 12px;overflow:auto;justify-content:flex-start}nav button{min-width:100px;padding:10px}.layout{grid-template-columns:200px 1fr;gap:18px}main{margin:0 12px;padding:22px}.cards{grid-template-columns:repeat(2,1fr)}.guide{padding:18px}.options button{font-size:19px}}@media(max-width:580px){.layout{grid-template-columns:1fr}.guide{display:none}.cards{grid-template-columns:1fr}.topline{align-items:flex-start}.tag{font-size:12px}.question .word{font-size:44px}header>div small{font-size:11px}header button{padding:10px;font-size:13px}.options{gap:10px}}
.extras{max-width:1160px;margin:0 auto 16px;display:flex;align-items:center;gap:16px;padding:0 8px}.extras button{min-height:42px;padding:8px 16px}.extras span{font-size:13px;color:#778263}#story,#writer{max-width:680px;width:calc(100% - 32px);max-height:90vh;overflow:auto}.story-symbol{font-size:64px;text-align:center;padding-top:15px}.story-choices{display:flex;gap:12px;margin:18px 0}.story-choices button{flex:1}.story-correct{background:#e4efdb;border:2px solid #4b8551}.story-note{font-size:12px;color:#8a7e68;margin-bottom:0}#storyReveal[hidden]{display:none}.writing-hint{background:#eef3e5;padding:16px;border-radius:14px;line-height:1.8;margin-bottom:22px}textarea{font:inherit;width:100%;padding:16px;line-height:1.8;border:1px solid #d8bd85;border-radius:14px;resize:vertical;background:#fffef9;margin-top:12px}.writing-meta{display:flex;justify-content:space-between;gap:12px;font-size:12px;color:#83775d;margin-top:8px}@media(max-width:580px){.extras{margin:0 12px 14px}.extras span{display:none}#story h2{font-size:24px}}
#story button,#writer button{width:auto}#story .topline .tag{white-space:nowrap}#story .actions{margin-top:18px}#story .voice{min-height:40px;padding:8px 14px;font-size:14px}#story .story-choices{margin-top:18px}
.envelope-scene{text-align:center;padding:12px 4px}.envelope-scene>.tag{display:inline-block}.envelope{display:block;position:relative;width:min(440px,100%)!important;height:230px;margin:24px auto 16px;border:2px solid #bc9a54;border-radius:12px;background:linear-gradient(150deg,transparent 49%,#d9bb79 50%,transparent 51%) left/50% 100%,linear-gradient(210deg,transparent 49%,#d9bb79 50%,transparent 51%) right/50% 100%,#f3e1b4;background-repeat:no-repeat;box-shadow:0 10px 24px #9b79412a;transition:transform .2s}.envelope:hover{transform:translateY(-5px)}.envelope-address{position:absolute;left:22px;top:20px;color:#725630;font-size:20px}.seal{display:inline-flex;align-items:center;justify-content:center;width:68px;height:68px;border-radius:50%;background:#a94332;color:#fff1ce;font-family:serif;font-size:36px;box-shadow:0 0 0 4px #cc7553}.envelope-label{position:absolute;bottom:20px;left:0;width:100%;font-size:20px;font-weight:bold}#classroom{width:calc(100% - 32px);max-width:800px;max-height:90vh;overflow:auto}#classroom button{width:auto}#classReference[hidden]{display:none}.class-hint{padding:14px 0}.class-hint summary{cursor:pointer;color:#6e774e}.extras{flex-wrap:wrap}#classReference p{margin:10px 0}@media(max-width:580px){.envelope{height:200px}.envelope-scene h2{font-size:23px}#classroom h2{font-size:23px}}
.layout{grid-template-columns:260px minmax(0,1fr)}.layout>*{min-width:0}.cards{grid-template-columns:repeat(3,minmax(0,1fr))}.options{grid-template-columns:repeat(2,minmax(0,1fr))}.card,.options button,.feedback{overflow-wrap:anywhere}textarea:focus-visible{outline:3px solid #a27623;outline-offset:3px}dialog{width:calc(100% - 32px);max-height:calc(100vh - 32px);overflow:auto}@supports(height:100dvh){dialog,#story,#writer,#classroom{max-height:calc(100dvh - 32px)}}.extras button,#story .voice{min-height:44px}.class-hint summary{min-height:44px;line-height:44px}.class-hint summary:focus-visible{outline:3px solid #a27623;outline-offset:3px}@media(max-width:800px){.layout{grid-template-columns:200px minmax(0,1fr)}.cards{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:580px){.layout{grid-template-columns:minmax(0,1fr)}.cards{grid-template-columns:minmax(0,1fr)}header{flex-wrap:wrap}header>div{flex:1;min-width:160px}.story-choices{flex-wrap:wrap}.story-choices button{flex-basis:120px}.topline{flex-wrap:wrap}.writing-meta{flex-wrap:wrap}}@media(prefers-reduced-motion:reduce){.envelope{transition:none}.envelope:hover{transform:none}}
blockquote{margin:20px 0;padding:18px 24px;border-left:5px solid #739567;background:#edf2e3;line-height:2}.reading-select{display:flex;gap:20px;margin:18px 0}.reading-select label{flex:1}select{font:inherit;padding:12px;border:1px solid #d8bd85;border-radius:12px;background:#fffdf6;max-width:100%;min-height:44px}.reading-select select{width:100%;margin-top:8px}@media(max-width:580px){.reading-select{flex-direction:column;gap:12px}}
.run-entry{display:inline-block;background:#3d8450;color:white;text-decoration:none;padding:12px 18px;border-radius:14px;font-weight:bold;min-height:44px}