:root{--green:#13853e;--deep:#073e29;--ink:#243c33;--muted:#788b82;--mint:#eff9f0;--line:#dfebe2;--pink:#fff2f2;--blue:#eaf5ff;--radius:22px;font-family:ui-rounded,"PingFang SC","Microsoft YaHei",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink);background:#fff;font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,a,input,select{-webkit-tap-highlight-color:transparent}button,select,input{font:inherit}button,a,select{touch-action:manipulation}button{cursor:pointer}button:disabled{cursor:default;opacity:.42}button:focus-visible,a:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid #f0bb40;outline-offset:4px}a{color:inherit;text-decoration:none}[hidden]{display:none!important}.page{max-width:1456px;margin:auto;padding:30px 32px 0}.header{display:grid;grid-template-columns:270px 1fr 165px;align-items:center;margin-bottom:30px;gap:20px;min-height:104px}.brand{display:flex;align-items:center;gap:12px;color:var(--deep);font-size:26px;font-weight:850;white-space:nowrap}.brand small{display:block;font-size:14px;letter-spacing:1.4px;line-height:1.7;color:#398347}.melon-logo{font-size:57px;transform:rotate(-12deg);display:inline-block}.heading{text-align:center}.heading h1{font-size:clamp(24px,2.7vw,39px);font-weight:850;letter-spacing:1px;margin:0 0 10px;color:var(--deep)}.heading h1 span{font-size:34px;color:#ffc348;margin-left:8px;display:inline-block;transform:rotate(15deg)}.heading p{font-size:17px;color:#728078;margin:0}.home{font-size:14px;font-weight:650;justify-self:end;color:#557565}.home span{margin-left:7px}.layout{display:grid;grid-template-columns:262px minmax(0,1fr);gap:24px;align-items:start}.sidebar{position:sticky;top:22px}.lesson-menu{background:#f3faf4;border-radius:20px;padding:8px}.menu-heading{padding:20px 16px 18px}.menu-heading small{font-size:13px;font-weight:550;color:#53765f}.menu-heading h2{font-size:20px;font-weight:800;margin:9px 0 5px;color:var(--deep);letter-spacing:-.3px}.menu-heading p{font-size:12px;color:#86a08d;margin:0}.lesson-link{width:100%;display:flex;gap:10px;align-items:center;border:0;border-radius:13px;background:#fff;text-align:left;padding:17px 12px;min-height:68px;color:#52645d;margin-bottom:5px;transition:background .18s,transform .18s}.lesson-link:hover{background:#e7f5e5}.lesson-link.is-active{background:#ddf2dc;color:var(--deep);font-weight:750;box-shadow:inset 3px 0 var(--green)}.lesson-order{display:grid;place-items:center;width:27px;height:27px;border-radius:50%;background:#eaf0ed;font-size:14px;font-weight:750;flex-shrink:0}.lesson-link.is-active .lesson-order{background:var(--green);color:#fff}.lesson-icon{width:22px;height:24px;display:grid;place-items:center;flex-shrink:0;font-size:16px;font-weight:650;color:var(--deep)}.lesson-icon svg,.button svg{width:22px;height:22px;stroke-width:1.9;flex-shrink:0}.lesson-link .lesson-label{font-size:15px;flex:1;white-space:nowrap}.lesson-tick{font-size:15px;color:#92af9c}.lesson-link.is-complete .lesson-tick{color:var(--green)}.reward{margin-top:14px;background:var(--pink);border-radius:20px;padding:22px 15px;display:flex;align-items:center;gap:10px}.reward-melon{font-size:43px;transform:rotate(-16deg)}.reward strong{font-size:14px;color:#8b5555;line-height:1.6;display:block}.reward p{font-size:11px;color:#a07676;margin:5px 0 10px}.progress-track{height:7px;background:#fff;border-radius:9px;width:147px;overflow:hidden}.progress-track>div{width:0;height:100%;background:#73bf6a;border-radius:9px;transition:width .4s}.scope{font-size:11px;color:#90a296;line-height:1.9;padding:2px 12px}.reader{border:1.5px solid #bce5c5;border-radius:20px;padding:22px 24px 16px;box-shadow:0 7px 20px #144c2510;overflow:hidden}.reader-heading{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:18px}.reader-heading>div:first-child{display:flex;align-items:center;gap:12px}.number{width:33px;height:33px;border-radius:50%;display:grid;place-items:center;background:var(--green);color:white;font-size:18px;font-weight:750}.reader-heading h2{font-size:22px;margin:0;color:var(--deep);font-weight:800}.reader-options{display:flex;align-items:center;gap:18px;font-size:12px;white-space:nowrap}#position{font-size:14px;font-variant-numeric:tabular-nums;color:var(--green);font-weight:650;border-right:1px solid var(--line);padding-right:18px}.switch-label{display:flex;align-items:center;gap:9px;cursor:pointer}.switch-label input{position:absolute;opacity:0;width:1px;height:1px}.switch{height:22px;width:39px;border-radius:16px;background:#b8c3bc;position:relative;transition:background .2s}.switch:after{content:"";position:absolute;top:3px;left:3px;background:white;height:16px;width:16px;border-radius:50%;transition:transform .2s}.switch-label input:checked+.switch{background:var(--green)}.switch-label input:checked+.switch:after{transform:translateX(17px)}.switch-label input:focus-visible+.switch{outline:3px solid #f0bb40;outline-offset:3px}.scene{height:225px;background:#f0faef;border-radius:14px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}.sprite{width:225px;height:225px;background-image:url('./art.jpg');background-size:300% 300%;background-repeat:no-repeat;mix-blend-mode:multiply}.scene-emojis{font-size:86px;display:flex;align-items:center;justify-content:center;gap:12px;letter-spacing:8px}.scene-emojis.family-five{font-size:59px;letter-spacing:0}.scene-letter{position:absolute;top:22px;left:25px;color:#67a46c;font-size:30px;font-weight:700;letter-spacing:3px;opacity:.8}.scene-caption{position:absolute;bottom:16px;right:20px;font-size:12px;letter-spacing:1px;color:#75a17f}.sentence-area{text-align:center;min-height:151px;display:flex;flex-direction:column;justify-content:center;padding:22px 4px 10px}.sentence{font-family:ui-rounded,"Trebuchet MS",-apple-system,BlinkMacSystemFont,sans-serif;font-size:clamp(30px,3.4vw,49px);font-weight:750;line-height:1.5;color:var(--deep);letter-spacing:-.8px;overflow-wrap:break-word}.sentence.long{font-size:clamp(25px,2.7vw,36px);line-height:1.6}.word{font:inherit;color:inherit;background:none;border:0;border-bottom:3px solid transparent;padding:0 1px;margin:0 2px;line-height:1.35;border-radius:4px;transition:color .1s,background .1s,transform .1s;letter-spacing:inherit}.word:hover{background:#edf7e9}.word.focus-word{color:#329120}.word.is-speaking{color:#d95356;border-bottom-color:#e86868;background:#fff2f0;transform:translateY(-2px)}.translation{font-size:17px;color:#65746b;margin:9px 0 0;line-height:1.6;min-height:27px}.translation-hidden .translation{visibility:hidden}.speaker{display:inline-block;font-size:12px;color:#698d75;margin-bottom:10px}.sound-status{min-height:35px;display:flex;align-items:center;justify-content:center;gap:10px;margin:3px 0 13px;color:#82948a}.sound-status>span:first-child{font-size:19px;color:var(--green)}#audioStatus{font-size:12px;max-width:380px;line-height:1.5}.waveform{height:24px;display:flex;gap:3px;align-items:center;width:109px;flex-shrink:0}.waveform i{width:3px;border-radius:2px;background:#b8d8b8;height:var(--h)}.is-playing .waveform i{background:var(--green);animation:wave .65s ease-in-out infinite alternate;animation-delay:var(--d)}.is-recording .waveform i{background:#e36a78;animation:wave .65s ease-in-out infinite alternate;animation-delay:var(--d)}@keyframes wave{to{transform:scaleY(.35)}}.primary-controls{display:flex;justify-content:center;gap:14px}.button{display:inline-flex;align-items:center;justify-content:center;gap:10px;border:1px solid transparent;border-radius:13px;min-height:52px;padding:10px 22px;font-size:17px;font-weight:700;transition:background .15s,transform .15s,box-shadow .15s}.button:hover:not(:disabled){transform:translateY(-1px)}.primary-controls .button{flex:1;max-width:236px;min-height:59px}.primary{color:#fff;background:var(--green);box-shadow:0 4px 8px #159a2520}.primary:hover{background:#0c7434}.record{background:#fff;border-color:#62a874;color:#278449}.record.active{background:#fff1f1;color:#c84753;border-color:#e99ca2}.continuous{color:#2687b5;background:#edf7ff;border-color:#c4e3f8}.continuous.active{background:#d3ecfb;border-color:#86c3e8}.support-controls{display:flex;align-items:center;justify-content:center;gap:17px;flex-wrap:wrap;margin-top:14px;color:#98a69e;font-size:11px}.speed-label{display:flex;align-items:center;gap:7px;color:#788a7e}.speed-label select{border:0;background:#f3f7f3;color:#567461;border-radius:6px;padding:4px;font-size:11px;cursor:pointer}.reading-tip{display:flex;gap:7px;align-items:center;justify-content:center;color:#87958d;min-height:38px;margin-top:7px}.reading-tip>span{font-size:13px;color:#d3ab55}.reading-tip p{font-size:12px;line-height:1.6;margin:7px 0;text-align:center}.reader-footer{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:8px;padding-top:14px;border-top:1px solid #f0f4f0}.reader-footer .button{font-size:13px;min-height:40px;min-width:116px;padding:8px 15px;border-radius:10px}.subtle{color:#78887f;background:#f6f8f6;border-color:#e7ece8}.next{color:var(--deep);background:#e7f5e7;border-color:#d6edd7}.mastered{border:0;background:none;color:#6b8b74;font-size:13px;padding:10px 12px;line-height:1.5}.mastered[aria-pressed="true"]{color:var(--green);background:#e9f7e5;border-radius:9px}.recording-panel{display:flex;align-items:center;gap:12px;border-radius:12px;background:#fff4f5;padding:10px 14px;margin-top:16px;font-size:12px;color:#995e68}.recording-panel audio{height:32px;flex:1;min-width:50px}.recording-panel a{text-decoration:underline;text-underline-offset:3px;white-space:nowrap}.sentence-list{margin-top:23px}.list-heading{display:flex;justify-content:space-between;gap:15px;align-items:center;padding:0 4px 12px}.list-heading h2{margin:0;font-size:17px;color:var(--deep)}.list-heading p{font-size:12px;line-height:1.7;color:#91a096;margin:6px 0 0}.source{font-size:11px;color:#8da093;white-space:nowrap}.sentence-list ol{padding:0;margin:0;list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:8px}.line-button{display:flex;align-items:center;text-align:left;gap:12px;background:#fff;border:1px solid #e6ede6;border-radius:12px;padding:13px 15px;width:100%;height:100%;color:#627268}.line-button:hover{background:#f5faf3}.line-button.is-active{border-color:#bedfbc;background:#eff9ed}.line-number{font-size:12px;font-weight:700;color:#84a088;background:#f1f6f0;border-radius:50%;display:grid;place-items:center;flex-shrink:0;width:26px;height:26px}.line-button.is-active .line-number{background:#d4ecd0;color:var(--green)}.line-content{flex:1}.line-en{font-size:14px;line-height:1.55;display:block;color:#365541;font-weight:550}.line-zh{display:block;font-size:11px;color:#94a297;line-height:1.7;margin-top:3px}.translation-hidden .line-zh{display:none}.line-check{color:var(--green);font-size:14px}.parent-notes{margin-top:24px;border-top:1px dashed #dce8dc;padding:17px 4px 0;color:#8b9b8e;font-size:11px;line-height:1.9}.parent-notes summary{cursor:pointer;font-size:12px;width:fit-content;color:#7c9481}.parent-notes p{max-width:800px}.page-footer{padding:24px 0;text-align:center;font-size:11px;color:#a3b1a5}.page-footer span{margin-left:6px}.word-popover{position:fixed;z-index:20;width:220px;padding:20px;background:#fff;border:1px solid #d5e6d3;border-radius:16px;box-shadow:0 14px 42px #14382925}.word-popover strong{font-size:27px;color:var(--deep);overflow-wrap:anywhere}.word-popover p{font-size:13px;color:#77897a;line-height:1.6;margin:8px 0 14px}.word-play{padding:8px 15px;border:0;border-radius:8px;background:#e9f6e5;color:var(--green);font-size:13px;font-weight:600}.close-word{position:absolute;top:8px;right:10px;font-size:20px;color:#8a9d8f;border:0;background:none}.is-mastering .reward-melon{animation:pop .5s ease}.is-mastering .mastered{animation:pop .4s ease}@keyframes pop{50%{transform:rotate(-10deg) scale(1.2)}}
@media(min-width:1600px){.page{padding-top:42px}.scene{height:260px}.sprite{width:260px;height:260px}.sentence-area{min-height:166px}.reader{padding:25px 30px 18px}.header{margin-bottom:36px}}
@media(max-width:1120px){.page{padding:22px 23px 0}.header{grid-template-columns:230px 1fr 110px;gap:10px;margin-bottom:24px;min-height:83px}.brand{font-size:22px;gap:8px}.melon-logo{font-size:46px}.heading h1{font-size:27px}.heading h1 span{display:none}.heading p{font-size:14px}.home{font-size:12px}.layout{grid-template-columns:228px minmax(0,1fr);gap:18px}.lesson-link{padding:14px 10px;gap:8px;min-height:63px}.lesson-link .lesson-label{font-size:13px}.lesson-icon{width:18px}.lesson-icon svg{width:18px}.menu-heading{padding:17px 12px}.menu-heading h2{font-size:18px}.reward{padding:18px 12px}.reward strong{font-size:12px}.progress-track{width:128px}.reader{padding:18px 20px 14px}.scene{height:195px}.sprite{width:195px;height:195px}.reader-heading h2{font-size:19px}.reader-options{gap:12px;font-size:11px}#position{padding-right:12px;font-size:12px}.primary-controls{gap:10px}.primary-controls .button{padding:10px;font-size:15px;gap:6px;min-height:53px}.sentence-area{min-height:142px}.sentence{font-size:39px}.sentence.long{font-size:28px}.source{font-size:10px}.list-heading p{font-size:11px}.reward-melon{font-size:36px}.line-en{font-size:13px}.sound-status{flex-wrap:wrap;gap:6px}.sound-status #audioStatus{font-size:11px}}
@media(max-width:780px){.page{padding:16px 16px 0}.header{grid-template-columns:1fr auto;gap:16px;margin-bottom:22px}.brand{font-size:21px}.brand small{font-size:11px;letter-spacing:1px}.melon-logo{font-size:39px}.home{grid-column:2;grid-row:1}.heading{grid-column:1/-1;grid-row:2;padding-top:5px}.heading h1{font-size:27px;letter-spacing:0;margin-bottom:8px}.heading p{font-size:13px}.layout{display:block}.sidebar{position:static}.lesson-menu{background:none;padding:0;overflow:hidden;border-radius:0}.menu-heading{display:none}#lessons{display:flex;gap:7px;overflow:auto;padding:0 0 12px;scrollbar-width:thin;scrollbar-color:#cfe4d0 transparent}.lesson-link{width:auto;min-width:155px;min-height:46px;padding:9px 12px;border:1px solid #e1ede1;gap:7px;margin:0}.lesson-link .lesson-label{font-size:12px}.lesson-order{width:22px;height:22px;font-size:11px}.lesson-icon,.lesson-tick{display:none}.lesson-link.is-active{box-shadow:none;background:#e5f5df;border-color:#b8dcb1}.reward{padding:11px 14px;border-radius:12px;margin:1px 0 17px;gap:10px}.reward-melon{font-size:28px}.reward>div{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;flex-wrap:wrap}.reward strong{font-size:11px}.reward p{font-size:10px;margin:0}.progress-track{width:100%;height:4px}.scope{display:none}.reader{padding:15px 15px 13px;border-radius:17px}.reader-heading{margin-bottom:13px;gap:8px}.reader-heading>div:first-child{gap:8px}.reader-heading h2{font-size:17px}.number{width:26px;height:26px;font-size:14px}.reader-options{gap:9px;font-size:10px}#position{font-size:11px;padding-right:9px}.switch-label{gap:5px}.switch{width:32px;height:19px}.switch:after{width:13px;height:13px}.switch-label input:checked+.switch:after{transform:translateX(13px)}.scene{height:185px}.sprite{width:185px;height:185px}.scene-emojis{font-size:65px;gap:0;letter-spacing:4px}.scene-emojis.family-five{font-size:45px}.scene-caption{font-size:10px;bottom:12px;right:13px}.scene-letter{font-size:26px;top:15px;left:18px}.sentence-area{min-height:145px;padding:18px 1px 9px}.sentence{font-size:36px;letter-spacing:-.8px}.sentence.long{font-size:25px;line-height:1.6}.translation{font-size:14px;min-height:23px;line-height:1.7}.primary-controls{gap:7px}.primary-controls .button{font-size:13px;min-height:49px;border-radius:10px;padding:9px 5px;gap:5px}.primary-controls .button svg{width:17px;height:17px}.sound-status{margin:3px 0 13px;min-height:38px;gap:7px}.waveform{width:86px;gap:2px}.waveform i{width:2.5px}#audioStatus{font-size:10px!important;max-width:200px}.support-controls{gap:8px;margin-top:13px;font-size:9px}.support-controls>span{font-size:9px}.speed-label,.speed-label select{font-size:10px}.reading-tip p{font-size:10px;margin:6px 0}.reading-tip{min-height:33px;margin-top:6px}.reader-footer{gap:5px;margin-top:3px;padding-top:11px}.reader-footer .button{font-size:11px;min-width:86px;min-height:36px;padding:7px 10px}.mastered{font-size:11px;padding:8px}.sentence-list{margin-top:22px}.list-heading{align-items:flex-start;gap:10px}.list-heading h2{font-size:16px}.list-heading p{font-size:10px;max-width:220px}.source{font-size:9px;padding-top:4px}.sentence-list ol{grid-template-columns:1fr}.line-button{padding:12px}.line-en{font-size:14px}.line-zh{font-size:10px}.recording-panel{padding:9px;gap:7px;font-size:10px;flex-wrap:wrap}.recording-panel audio{min-width:180px;max-width:100%;height:32px}.recording-panel>span{display:none}.parent-notes{font-size:10px}.page-footer{font-size:10px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
.sprite{-webkit-mask-image:radial-gradient(ellipse 70% 70% at 50% 52%,#000 52%,transparent 80%);mask-image:radial-gradient(ellipse 70% 70% at 50% 52%,#000 52%,transparent 80%)}
@media(min-width:1121px){.page{max-width:1505px;padding:24px 27px 0}.header{grid-template-columns:325px 1fr 165px;min-height:88px;margin-bottom:22px;gap:18px}.heading h1{font-size:44px;letter-spacing:0}.layout{grid-template-columns:clamp(270px,22vw,325px) minmax(0,1fr);gap:18px}.brand{font-size:28px}.lesson-link .lesson-label{font-size:17px}.lesson-link{min-height:68px}.menu-heading h2{font-size:23px}.menu-heading small{font-size:14px}.sentence{font-size:58px}.sentence.long{font-size:37px}.scene{height:245px}.sprite{width:245px;height:245px}.sentence-area{min-height:166px}.primary-controls .button{max-width:280px;min-height:65px;font-size:20px}.reader-heading h2{font-size:25px}.translation{font-size:20px}.reader{padding-top:23px}.reward strong{font-size:15px}.reward p{font-size:12px}.progress-track{width:210px}.reward-melon{font-size:47px}}
@media(min-width:1121px) and (max-width:1350px){.header{grid-template-columns:270px 1fr 140px}.heading h1{font-size:35px}.brand{font-size:24px}.layout{grid-template-columns:270px minmax(0,1fr)}.scene{height:220px}.sprite{width:220px;height:220px}.sentence{font-size:49px}.sentence.long{font-size:31px}.primary-controls .button{font-size:17px}.lesson-link .lesson-label{font-size:15px}.menu-heading h2{font-size:20px}.progress-track{width:160px}.reward strong{font-size:13px}}

/* Translation challenge: the same reader card reveals its reverse side. */
.reader.card-flip{animation:translation-flip .5s ease both;transform-origin:center;backface-visibility:hidden}
@keyframes translation-flip{0%{transform:perspective(1300px) rotateY(-90deg);opacity:.35}100%{transform:perspective(1300px) rotateY(0);opacity:1}}
.translation-game{min-height:550px;display:flex;flex-direction:column;gap:20px;padding:4px 2px 20px}
.game-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:15px}.game-heading h2{margin:5px 0;font-size:30px;color:var(--deep)}.game-kicker{color:#168749;font-size:14px;font-weight:800}.game-exit{border:1px solid #a7cbb4;border-radius:12px;background:transparent;color:inherit;padding:11px 16px;font-weight:700}.game-instruction,.game-status{margin:0;color:var(--muted);font-size:16px}.game-status{min-height:25px;font-weight:700;color:#318956}.translation-game h3{font-size:18px;margin:10px 0 0}.translation-words{display:flex;flex-wrap:wrap;justify-content:center;gap:16px 12px;padding:28px 15px;background:var(--mint);border-radius:20px}.game-word{display:flex;flex-direction:column;align-items:center;gap:10px}.game-english{font-size:clamp(23px,3vw,38px);font-weight:800}.game-slot{display:grid;place-items:center;min-width:75px;min-height:48px;padding:8px;border:2px solid #b8cfc0;background:#fff;border-radius:12px;color:#769384;font-size:16px;font-weight:750}.game-slot.is-current{border-color:#4b98d8;color:#4288c3}.game-slot.is-correct{background:#d8f5df;border-color:#57bf72;color:#176d35}.game-slot.is-wrong{background:#ffe2e2;border-color:#e04a4a;color:#b62e2e;animation:game-shake .35s ease}@keyframes game-shake{25%,75%{transform:translateX(-7px)}50%{transform:translateX(7px)}}
.translation-choices{display:flex;flex-wrap:wrap;gap:10px}.translation-choice{min-height:46px;padding:9px 17px;border:1px solid #b7d4c0;background:#f2faf4;border-radius:12px;color:#245e3a;font-weight:700}.translation-choice:hover,.translation-choice:focus-visible{border-color:#3ba562;background:#d9f4df}.translation-choice:active{transform:scale(.96)}
[data-theme="dark"] .game-heading h2{color:#e6f5e9}[data-theme="dark"] .translation-words{background:#253d30}[data-theme="dark"] .game-slot{background:#253b30;color:#c5d8ca;border-color:#537563}[data-theme="dark"] .game-slot.is-current{border-color:#9ad4ff;color:#bfe5ff}[data-theme="dark"] .game-slot.is-correct{background:#235b39;border-color:#74d68b;color:#d4ffe0}[data-theme="dark"] .game-slot.is-wrong{background:#743438;border-color:#ff7373;color:#fff}[data-theme="dark"] .translation-choice{background:#294237;border-color:#56796a;color:#e1f5e6}[data-theme="dark"] .game-status{color:#92dfa5}
@media(max-width:700px){.translation-game{min-height:0;gap:15px}.game-heading h2{font-size:24px}.game-english{font-size:23px}.translation-words{gap:12px 8px;padding:18px 10px}.game-slot{min-width:59px;min-height:44px;font-size:14px}.translation-choice{font-size:14px;padding:8px 12px;min-height:44px}}
@media(prefers-reduced-motion:reduce){.reader.card-flip,.game-slot.is-wrong{animation:none}}

/* Hide answer translations only while a translation test is active. */
.translation-test-active .sentence-list .line-zh{display:none!important}

/* Completed translation remains clickable for another attempt. */
.primary-controls .continuous.translation-complete{background:#e5e8e6;color:#697771;border-color:#c8d0cb;box-shadow:none}
[data-theme="dark"] .primary-controls .continuous.translation-complete{background:#414b46;color:#e1e7e3;border-color:#67746d}
.restart-dialog{width:min(90vw,380px);padding:26px;border:1px solid #d5e7db;border-radius:22px;background:#fff;color:#193e2c;box-shadow:0 18px 60px #10291a55;text-align:center}
.restart-dialog::backdrop{background:#0b1a12a8}.restart-dialog h2{margin:0 0 12px;font-size:24px}.restart-dialog p{color:#6a8072;line-height:1.6}.restart-actions{display:flex;gap:12px;margin-top:22px}.restart-actions button{flex:1;min-height:48px;border:1px solid #bdd4c3;border-radius:12px;background:#f2f7f3;color:#335541;font-weight:800}.restart-actions #restartYes{background:#218b4b;color:#fff;border-color:#218b4b}
[data-theme="dark"] .restart-dialog{background:#1c3025;color:#edf9ef;border-color:#52725e}[data-theme="dark"] .restart-dialog p{color:#b4cbb9}[data-theme="dark"] .restart-actions #restartNo{background:#344d3e;color:#eff9f0;border-color:#668471}

/* Word collection: independent controls keep word playback and adding separate. */
.word-wrap{display:inline-flex;position:relative;vertical-align:top;padding:9px 13px 0 0;align-items:flex-start}
.word-add{position:absolute;z-index:2;top:0;right:0;display:grid;place-items:center;width:27px;height:27px;padding:0;border:1px solid #a9cdb4;border-radius:50%;background:#fff;color:#227843;font:700 20px/1 sans-serif;box-shadow:0 2px 7px #154b2b22}
.word-add:hover,.word-add:focus-visible{background:#dcf5e2;border-color:#45a45f}.word.word-saved .word-english{color:#a52236!important}
.wordbook-toggle{position:fixed;z-index:30;right:0;top:35%;border:0;border-radius:15px 0 0 15px;background:#a5273d;color:#fff;box-shadow:0 5px 20px #1a1a1a35;padding:13px 13px;font-weight:800;min-height:48px}
.wordbook-toggle span{display:inline-grid;place-items:center;border-radius:20px;min-width:23px;height:23px;margin-left:3px;background:#ffffff38;font-size:13px}
.wordbook{position:fixed;z-index:40;top:0;right:0;width:min(380px,92vw);height:100dvh;overflow-y:auto;overscroll-behavior:contain;background:#fff;color:#253e32;box-shadow:-12px 0 40px #102b1e40;padding:24px 20px calc(24px + env(safe-area-inset-bottom));border-left:1px solid #d6e9db}
.wordbook-header,.wordbook-item-head{display:flex;justify-content:space-between;align-items:center;gap:12px}.wordbook-header h2{margin:0;font-size:24px;color:#135f34}.wordbook-header p,.wordbook-storage{color:#738e7c;font-size:13px}.wordbook-header p{margin:7px 0}.wordbook-header>button{border:0;background:#eff6f1;color:#385946;border-radius:50%;width:42px;height:42px;font-size:28px}.wordbook-storage{margin:15px 0}.wordbook-list{display:grid;gap:12px}.wordbook-item{border:1px solid #dfebe1;background:#f6faf7;border-radius:16px;padding:16px}.wordbook-item-head strong{font-size:23px;color:#9b253b;overflow-wrap:anywhere}.wordbook-ipa{margin-top:4px;color:#718b79;font-size:15px}.wordbook-item p{line-height:1.6;margin:8px 0}.wordbook-sound,.wordbook-remove{min-height:38px;border-radius:10px;padding:7px 12px;font-weight:700}.wordbook-sound{background:#e3f5e8;border:1px solid #b8dec2;color:#256f3d}.wordbook-remove{background:transparent;border:1px solid #e2b6bc;color:#a13b49}.wordbook-empty{line-height:1.7;color:#839b89;background:#f6faf7;border-radius:14px;padding:20px}.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}
[data-theme="dark"] .word-add{background:#294636;border-color:#7ec394;color:#d7ffe0}[data-theme="dark"] .word.word-saved .word-english{color:#ef8992!important}[data-theme="dark"] .wordbook{background:#172a20;color:#e1f2e5;border-color:#3e604b}[data-theme="dark"] .wordbook-header h2{color:#b8edc5}[data-theme="dark"] .wordbook-header>button{background:#304b39;color:#e3f4e7}[data-theme="dark"] .wordbook-item,[data-theme="dark"] .wordbook-empty{background:#253e30;border-color:#456b50}[data-theme="dark"] .wordbook-item-head strong{color:#f397a0}[data-theme="dark"] .wordbook-sound{background:#31543b;color:#daf6e1;border-color:#668f70}[data-theme="dark"] .wordbook-remove{color:#ffb9bf;border-color:#a65b65}[data-theme="dark"] .wordbook-ipa,[data-theme="dark"] .wordbook-storage,[data-theme="dark"] .wordbook-header p{color:#b4cebc}
.translation-test-active .wordbook-toggle{display:none!important}
@media(max-width:700px){.word-wrap{padding:8px 10px 0 0}.word-add{width:25px;height:25px;font-size:18px}.wordbook-toggle{top:auto;bottom:calc(18px + env(safe-area-inset-bottom));padding:10px;font-size:13px}.wordbook{width:min(100vw,380px)}}

/* Wordbook entrance lives with the lesson cards in the left sidebar. */
.wordbook-toggle{position:static;top:auto;right:auto;bottom:auto;z-index:auto;display:flex;width:calc(100% - 8px);align-items:center;gap:12px;margin:12px 4px 4px;padding:14px 16px;border:1px solid #dcb04e;border-radius:14px;background:#f8d779;color:#59410b;box-shadow:0 4px 12px #a477242b;text-align:left;min-height:68px}
.wordbook-toggle:hover{background:#f4ca60}.wordbook-toggle .wordbook-card-icon{display:block;margin:0;min-width:0;height:auto;background:none;font-size:24px}.wordbook-toggle .wordbook-card-label{display:block;flex:1;margin:0;min-width:0;height:auto;background:none}.wordbook-card-label strong,.wordbook-card-label small{display:block}.wordbook-card-label strong{font-size:18px}.wordbook-card-label small{font-size:11px;font-weight:600;margin-top:4px}.wordbook-toggle #wordbookCount{display:inline;min-width:0;height:auto;background:none;margin:0;font-size:inherit}.wordbook-toggle .wordbook-card-arrow{display:block;margin:0;min-width:0;height:auto;background:none;font-size:24px}
[data-theme="dark"] .wordbook-toggle{background:#72531e;border-color:#bc9447;color:#ffe9ad}[data-theme="dark"] .wordbook-toggle:hover{background:#886525}
@media(max-width:780px){.wordbook-toggle{position:static;top:auto;right:auto;bottom:auto;width:100%;margin:0 0 12px;padding:10px 14px;min-height:58px}}

.unit-selector{position:absolute;top:24px;left:350px;display:flex;align-items:center;gap:6px;background:#e8f6e9;color:#145c31;border:1px solid #b6dfbf;border-radius:14px;padding:8px 10px;font-size:13px;font-weight:750;z-index:3}.unit-selector select{border:0;background:transparent;color:inherit;max-width:155px;font-weight:750}.page{position:relative}[data-theme="dark"] .unit-selector{background:#284335;color:#d9f4de;border-color:#628b70}@media(max-width:1100px){.unit-selector{position:static;grid-column:1/-1;justify-self:start;grid-row:2;padding:8px 10px}.header{position:relative}.heading{grid-column:1/-1}.header-actions{grid-column:2;grid-row:1}}

.brand-block{display:flex;align-items:flex-start;flex-direction:column;gap:8px;min-width:0}.unit-selector{position:static;grid-column:auto;grid-row:auto;align-self:flex-start;padding:6px 9px;margin-left:3px;max-width:100%}@media(max-width:1100px){.header{grid-template-columns:1fr auto}.brand-block{grid-column:1;grid-row:1}.header-actions{grid-column:2;grid-row:1}.heading{grid-column:1/-1;grid-row:2}.unit-selector{grid-column:auto;grid-row:auto}}

.sentence-level,.line-level { display:inline-flex; align-items:center; width:max-content; border-radius:999px; font-weight:700; color:#26744a; background:#e7f6e9; }
.sentence-level { margin:12px 0 4px; padding:6px 13px; font-size:14px; }
.line-level { margin-top:5px; padding:3px 9px; font-size:12px; }
.sentence-level[data-level="提高"],.line-level[data-level="提高"] { color:#a85d09; background:#fff0cc; }
[data-theme="dark"] .sentence-level,[data-theme="dark"] .line-level { background:#294d39; color:#b4ebc1; }
[data-theme="dark"] .sentence-level[data-level="提高"],[data-theme="dark"] .line-level[data-level="提高"] { background:#554421; color:#ffdc8b; }
.sentence-level[hidden] { display:none; }
.remote-dialog { border: 1px solid #d7eadb; border-radius: 22px; padding: 28px; width: min(420px, 90vw); max-width: 90vw; text-align: center; color: #174b30; background: #fff; box-shadow: 0 12px 60px #0003; }
.remote-dialog::backdrop { background: #102d20a8; }
.remote-dialog button { padding: 12px 18px; border: 0; border-radius: 12px; margin: 6px; cursor: pointer; background: #14783e; color: white; font-size: 16px; }
.remote-dialog p { line-height: 1.5; }
.remote-qr { min-height: 100px; display: grid; place-items: center; }
.remote-qr[hidden] { display: none; }
.remote-qr img { max-width: 100%; padding: 8px; background: #fff; image-rendering: pixelated; }
.remote-dialog input { width: 100%; border-radius: 8px; padding: 9px; border: 1px solid #afcab6; font: inherit; }
.remote-dialog button[hidden], .remote-dialog [hidden] { display: none; }
.remote-dialog button:focus-visible { outline: 3px solid #efa641; outline-offset: 2px; }
[data-theme="dark"] .remote-dialog { background: #1b2922; color: #e7f4e9; border-color: #496556; }
[data-theme="dark"] .remote-dialog h2, [data-theme="dark"] .remote-dialog p { color: #e7f4e9; }
[data-theme="dark"] .remote-dialog input { background: #101a17; color: #e7f4e9; border-color: #597765; }
.remote-connected { box-shadow: 0 0 0 2px #32a96866; }
.translation-hidden #wordMeaning, .translation-hidden .wordbook-item p { display: none; }