:root{color-scheme:light;--ink:#18243d;--muted:#657187;--blue:#153bd1;--blue-soft:#eaf0ff;--line:#dfe5ef;--surface:#fff;--page:#f3f6fb;--good:#186744;--bad:#ae3030;--radius:18px;font-family:Inter,"Segoe UI","Microsoft YaHei",system-ui,sans-serif;font-size:16px}
*{box-sizing:border-box}body{margin:0;background:var(--page);color:var(--ink);line-height:1.6}button,input,select{font:inherit}button,a,input,select{touch-action:manipulation}button{cursor:pointer}a{color:inherit}button:disabled{cursor:default;opacity:.45}[hidden]{display:none!important}:focus-visible{outline:3px solid #769cff;outline-offset:4px}h1,h2,h3,p{margin:0}h1{font-size:clamp(1.55rem,3vw,2rem);font-weight:650;letter-spacing:-.035em}h2{font-size:1.15rem}h3{font-size:1.08rem}small{font-size:.85rem}.skip-link{position:absolute;top:-100px;left:20px;background:white;padding:12px;z-index:100}.skip-link:focus{top:12px}.shell{display:grid;grid-template-columns:230px minmax(0,1fr);min-height:100vh}.sidebar{background:#101f43;color:#dae1f3;padding:36px 24px;display:flex;flex-direction:column;gap:44px}.brand{display:flex;align-items:center;gap:12px;text-decoration:none;font-size:1.5rem;font-weight:650;line-height:1.4}.brand small{display:block;font-size:.68rem;letter-spacing:.09em;font-weight:400;color:#a6b5d7}.brand-mark{display:grid;place-items:center;background:#3158e4;width:43px;height:43px;border-radius:12px;font-size:1.25rem;color:white}.nav{display:flex;flex-direction:column;gap:8px}.nav a{display:flex;gap:16px;align-items:center;text-decoration:none;padding:13px 14px;border-radius:10px;font-size:.95rem;color:#acbada}.nav a span{font-size:.75rem;font-variant-numeric:tabular-nums;opacity:.8}.nav a.active{background:#233963;color:white}.nav a:hover{background:#203354}.sidebar-bottom{margin-top:auto;padding-top:32px}.sidebar-bottom p{font-size:.78rem;color:#a6b5d7;margin-bottom:12px}.sidebar-button{background:transparent;border:1px solid #42577d;color:#e7edff;border-radius:8px;padding:9px 12px;width:100%;font-size:.86rem}.main{width:100%;max-width:1420px;margin:auto;padding:42px clamp(24px,4vw,64px) 24px}.page-header{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:32px}.eyebrow{color:var(--muted);font-size:.875rem;margin-bottom:7px}.edition{color:var(--muted);font-size:.85rem;white-space:nowrap;border-bottom:1px solid var(--line);padding-bottom:6px}.study-layout{display:grid;grid-template-columns:minmax(0,1fr) 270px;gap:24px;align-items:start}.word-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:0 8px 24px #15264205}.card-top{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:24px 30px;border-bottom:1px solid #edf0f6}.chapter-label{font-size:.8rem;color:var(--blue);letter-spacing:.025em;font-weight:600}.counter{font-size:.88rem;color:var(--muted);font-variant-numeric:tabular-nums}.word-face{text-align:center;padding:48px 24px 35px}.group-label{font-size:.875rem;color:var(--muted);margin-bottom:18px}.headword{font-family:Georgia,"Times New Roman",serif;font-weight:400;font-size:clamp(2.25rem,5vw,3.8rem);letter-spacing:-.025em;line-height:1.25;overflow-wrap:anywhere}.phonetic{font-family:"Segoe UI",sans-serif;color:var(--muted);margin-top:10px;font-size:1.08rem}.recall-prompt{color:var(--muted);font-size:.9rem;margin:32px 0 18px}.button{display:inline-flex;justify-content:center;align-items:center;gap:8px;border:1px solid transparent;border-radius:9px;padding:11px 20px;font-weight:550;text-decoration:none;line-height:1.4;min-height:44px}.primary{background:var(--blue);color:#fff}.primary:hover{background:#102ea7}.secondary{background:#fff;border-color:#cbd4e5;color:var(--ink)}.secondary:hover{background:#f2f5fb}.quiet{background:transparent;border-color:var(--line);color:var(--muted)}.full{width:100%}.word-detail{margin:0 30px 28px;padding:25px 0 0;border-top:1px solid var(--line);font-size:1rem}.word-detail h3{margin-bottom:16px}.example-en{font-family:Georgia,serif;font-size:1.1rem;color:#334461;margin-bottom:7px}.example-zh{color:var(--muted);font-size:.9rem}.word-detail dl{margin:20px 0 0;display:grid;grid-template-columns:55px 1fr;gap:8px 12px;font-size:.9rem}.word-detail dt{color:var(--muted)}.word-detail dd{margin:0;overflow-wrap:anywhere}.source-link{display:block;font-size:.75rem;color:var(--muted);margin-top:18px}.rating-row{display:flex;gap:10px;justify-content:center;padding:0 24px 28px;flex-wrap:wrap}.rating-row .button{flex:1;max-width:180px}.rating-unknown{color:var(--bad);background:#fff2f2;border-color:#f1d5d5}.rating-vague{background:#f6f4ec;color:#80652e;border-color:#e9e1cd}.rating-known{background:#edf7f0;color:var(--good);border-color:#cce5d5}.card-footer{padding:16px 24px;text-align:center;font-size:.82rem;background:#fafbfd;color:var(--muted);border-top:1px solid #edf0f6}.keycap{border:1px solid #cbd4e5;border-radius:4px;font-size:.75rem;padding:1px 5px;margin:0 3px}.today-panel{background:white;border:1px solid var(--line);border-radius:var(--radius);padding:24px}.section-title{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px;margin-bottom:25px}.section-title h2{font-size:1.05rem}.section-title span{font-size:.8rem;color:var(--muted)}.metric{display:flex;justify-content:space-between;align-items:center;margin:20px 0 8px;gap:8px}.metric>span{font-size:.9rem;color:var(--muted)}.metric strong{font-size:1.6rem;font-weight:600;font-variant-numeric:tabular-nums;line-height:1.2}.metric small{font-size:.8rem;color:var(--muted);font-weight:400}.progress-track{height:5px;background:#e9edf5;border-radius:10px;overflow:hidden}.progress-track>span{display:block;height:100%;background:var(--blue);border-radius:10px}.divider{border-top:1px solid var(--line);margin:24px 0}.panel-note{font-size:.9rem;color:var(--muted);margin-bottom:16px}.source-note{margin-top:28px;padding-top:20px;border-top:1px solid var(--line)}.mini-label{display:block;font-size:.76rem;color:var(--muted);letter-spacing:.025em;margin-bottom:8px}.source-note strong{font-size:.95rem;font-weight:550}.source-note p{color:var(--muted);font-size:.82rem;margin-top:8px}.page-footer{display:flex;justify-content:space-between;gap:12px;margin-top:38px;color:var(--muted);font-size:.78rem;flex-wrap:wrap}.notice{padding:12px 16px;border:1px solid #eccca1;background:#fff6e7;border-radius:8px;margin-bottom:20px;font-size:.9rem}.toolbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:24px}.input,.select{background:white;border:1px solid #cbd4e5;border-radius:8px;padding:11px 13px;color:var(--ink);min-width:0;min-height:44px;font-size:1rem}.input{width:100%}.toolbar .input{flex:1;min-width:150px}.field{display:flex;flex-direction:column;gap:8px;font-size:.9rem}.field .select{width:100%}.chapter-strip{display:flex;align-items:center;gap:18px;background:white;border:1px solid var(--line);border-radius:12px;padding:22px;margin-bottom:22px;flex-wrap:wrap}.chapter-number{font-family:Georgia,serif;color:var(--blue);font-size:2.7rem;line-height:1}.chapter-info{flex:1;min-width:180px}.chapter-info p{color:var(--muted);font-size:.88rem;margin-top:5px}.word-list{list-style:none;padding:0;margin:0;background:white;border:1px solid var(--line);border-radius:12px;overflow:hidden}.word-row{border-bottom:1px solid #edf0f6}.word-row:last-child{border-bottom:0}.word-row details{padding:16px 22px}.word-row summary{display:grid;grid-template-columns:minmax(145px,.85fr) minmax(100px,1fr) auto;gap:16px;cursor:pointer;align-items:center;list-style:none}.word-row summary::-webkit-details-marker{display:none}.word-row summary .word-name{font-family:Georgia,serif;font-size:1.3rem}.word-row summary .meaning-short{font-size:.9rem;color:var(--muted)}.status-pill{background:#eef2f8;color:var(--muted);padding:3px 10px;border-radius:20px;font-size:.76rem;white-space:nowrap}.status-pill.learned{background:#eaf0ff;color:var(--blue)}.status-pill.mastered{background:#edf7f0;color:var(--good)}.word-row .row-detail{padding-top:20px;margin-top:15px;border-top:1px dashed var(--line);font-size:.95rem}.empty-state{padding:50px 24px;text-align:center;background:white;border:1px solid var(--line);border-radius:16px}.empty-state h2{font-size:1.3rem;margin-bottom:12px}.empty-state p{color:var(--muted);margin-bottom:24px}.setup-card{background:white;border:1px solid var(--line);border-radius:var(--radius);padding:30px;max-width:820px}.setup-card h2{font-size:1.4rem;margin-bottom:10px}.setup-card>p{color:var(--muted);margin-bottom:28px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:25px}.setup-footer{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}.setup-footer p{font-size:.9rem;color:var(--muted)}.quiz-options{display:grid;gap:12px;padding:0 30px 26px}.quiz-option{background:#fff;border:1px solid #cbd4e5;border-radius:9px;text-align:left;padding:14px 16px;color:var(--ink);min-height:48px}.quiz-option:not(:disabled):hover{background:var(--blue-soft);border-color:var(--blue)}.quiz-option.correct{background:#edf7f0;color:var(--good);border-color:#8dbda2;opacity:1}.quiz-option.incorrect{background:#fff2f2;color:var(--bad);border-color:#d68b8b;opacity:1}.option-letter{display:inline-block;margin-right:15px;color:var(--muted);font-size:.88rem}.spelling-form{padding:0 30px 25px;display:flex;gap:12px}.spelling-form .input{flex:1}.quiz-feedback{margin:0 30px 26px;padding:18px;border-radius:9px;background:#f1f5ff;font-size:.95rem}.quiz-feedback.wrong{background:#fff2f2}.quiz-feedback p{margin-bottom:6px}.quiz-feedback .button{margin-top:12px}.result-card{padding:38px;background:white;border:1px solid var(--line);border-radius:var(--radius);max-width:760px}.result-title{color:var(--muted);font-size:.9rem;margin-bottom:12px}.result-score{font-family:Georgia,serif;font-size:3.5rem;line-height:1.2}.result-score small{font-family:inherit;font-size:1.5rem;color:var(--muted)}.result-card>p{margin:15px 0 25px;color:var(--muted)}.result-actions{display:flex;gap:12px;flex-wrap:wrap}.result-words{padding-left:20px;margin:24px 0}.result-words li{margin-bottom:8px}.session-actions{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:0 0 16px;flex-wrap:wrap}.session-actions p{font-size:.9rem;color:var(--muted)}.session-actions .button{font-size:.86rem;padding:8px 13px}.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);max-width:calc(100vw - 32px);z-index:90;background:#18243d;color:white;border-radius:10px;padding:12px 20px;box-shadow:0 8px 26px #0002;font-size:.9rem;overflow-wrap:anywhere}.subtitle{font-size:.94rem;color:var(--muted);margin-bottom:22px}.muted{color:var(--muted)}dialog{border:1px solid var(--line);padding:0;border-radius:16px;width:min(520px,calc(100vw - 32px));max-height:85vh;color:var(--ink)}dialog::backdrop{background:#101f4380}#settings-content{padding:28px}.dialog-heading{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:24px}.dialog-heading h2{font-size:1.25rem}.close-button{border:0;background:#edf0f6;border-radius:7px;width:40px;height:40px;color:var(--ink);font-size:1.4rem}.settings-note{font-size:.88rem;color:var(--muted);margin:18px 0}.backup-actions{display:flex;gap:12px;flex-wrap:wrap}.backup-actions .button{font-size:.9rem}#import-error{color:var(--bad);font-size:.9rem;margin-top:14px}.available-count{font-size:.86rem;color:var(--muted);margin-bottom:16px}.result-word-name{font-family:Georgia,serif;font-size:1.05rem}.quiz-word{font-size:clamp(1.8rem,4.5vw,3rem)}.spelling-prompt{font-size:1.6rem;line-height:1.5;font-family:inherit;font-weight:550}.section-subhead{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:28px 0 15px}.section-subhead h2{font-size:1rem}.chapter-coming{margin-top:28px;color:var(--muted);font-size:.85rem;padding:16px 0;border-top:1px solid var(--line)}
@media(min-width:1600px){.main{max-width:1350px}}@media(max-width:1100px){.shell{grid-template-columns:190px minmax(0,1fr)}.sidebar{padding:30px 18px}.study-layout{grid-template-columns:minmax(0,1fr) 235px}.main{padding:30px 24px}.today-panel{padding:20px}.card-top{padding:20px}.word-face{padding:38px 20px 30px}.page-header{align-items:start;flex-direction:column;gap:12px}}@media(max-width:850px){.shell{grid-template-columns:1fr}.sidebar{padding:18px 24px;gap:18px}.brand{font-size:1.25rem}.brand-mark{width:36px;height:36px}.nav{flex-direction:row;gap:6px;justify-content:space-between}.nav a{flex:1;justify-content:center;padding:10px 6px;font-size:.88rem}.nav a span{display:none}.sidebar-bottom{display:none}.main{margin:0;max-width:none;padding:26px 24px}.study-layout{grid-template-columns:minmax(0,1fr) 250px}.edition{display:none}.page-header{margin-bottom:22px}.page-footer{font-size:.75rem}}@media(max-width:650px){.study-layout{grid-template-columns:1fr}.today-panel{display:grid;grid-template-columns:1fr 1fr;gap:0 22px}.today-panel .section-title{grid-column:1/-1;margin-bottom:0}.today-panel .metric{align-self:start}.today-panel .progress-track{grid-column:1;grid-row:3}.today-panel .divider{grid-column:1/-1;margin:18px 0}.today-panel .panel-note,.today-panel>.button,.today-panel .source-note{grid-column:1/-1}.today-panel .source-note{margin-top:20px}.main{padding:22px 16px}.sidebar{padding:16px}.word-face{padding:35px 18px 26px}.card-top{padding:18px;gap:8px}.chapter-label{font-size:.75rem}.word-detail{margin:0 20px 22px}.rating-row{padding:0 16px 22px;gap:7px}.rating-row .button{padding:11px 8px;font-size:.9rem}.keycap,.desktop-hint{display:none}.form-grid{grid-template-columns:1fr}.setup-card{padding:24px}.word-row details{padding:16px}.word-row summary{grid-template-columns:minmax(0,1fr) auto;gap:8px}.word-row .meaning-short{grid-row:2;grid-column:1/-1}.word-row .status-pill{grid-column:2;grid-row:1}.spelling-form{padding:0 20px 24px;flex-wrap:wrap}.spelling-form .input{flex-basis:100%}.spelling-form .button{width:100%}.quiz-options{padding:0 20px 24px}.quiz-feedback{margin:0 20px 24px}.result-card{padding:28px 24px}.page-footer{flex-direction:column;gap:4px;margin-top:26px}.sidebar-button{display:none}.mobile-settings{display:block!important}.chapter-strip{padding:18px}.toolbar{gap:8px}.toolbar .select{width:100%}#settings-content{padding:22px}.headword{font-size:2.5rem}.quiz-word{font-size:2.2rem}.spelling-prompt{font-size:1.35rem}.result-actions .button{width:100%}}
.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}.header-tools{display:flex;gap:12px;align-items:center}.word-row .word-detail{margin-left:0;margin-right:0;border-top:0;padding-top:10px}.word-row summary:focus-visible{outline-offset:6px}.word-row summary::after{content:none}
@media(max-width:850px){.mobile-settings{display:block!important}.header-tools{width:100%;justify-content:space-between}.mobile-settings{font-size:.85rem;padding:8px 12px}}
@media(prefers-reduced-motion:no-preference){.button,.quiz-option{transition:background .15s,border-color .15s}.progress-track>span{transition:width .25s}}
.chapter-controls{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:24px;padding:15px 18px;background:#eaf0ff;border-radius:12px}.chapter-controls label{font-size:.88rem;color:#334461}.chapter-controls .select{flex:1;max-width:410px}.chapter-context{font-size:.85rem;color:var(--muted);margin-left:auto}.pagination{display:flex;align-items:center;justify-content:center;gap:20px;margin:24px 0}.pagination span{color:var(--muted);font-size:.88rem}.scope-description{padding:11px 13px;border:1px solid var(--line);border-radius:8px;background:#fafbfd;min-height:44px}.spelling-hint{font-size:.9rem;color:var(--muted);letter-spacing:.08em;overflow-wrap:anywhere}.example-en,.example-zh,.word-detail h3,.meaning-short{overflow-wrap:anywhere}
@media(max-width:650px){.chapter-controls{gap:8px;padding:13px;margin-bottom:18px}.chapter-controls label{width:100%}.chapter-controls .select{width:100%;flex-basis:100%;max-width:none}.chapter-context{margin-left:0}.pagination{gap:12px}.pagination .button{padding:10px 13px}}
.mistake-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start}.mistake-row-action{padding:16px 22px 16px 0}.mistake-remove{font-size:.9rem;color:var(--blue);white-space:nowrap}.mistake-remove:hover{background:var(--blue-soft);border-color:var(--blue)}
@media(max-width:650px){.mistake-row{grid-template-columns:minmax(0,1fr)}.mistake-row-action{padding:0 16px 16px;justify-self:end}}
.learned-link{display:block;width:fit-content;color:var(--blue);font-size:.9rem;margin-top:10px;text-underline-offset:3px}
@media(max-width:650px){.nav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}.nav a{min-width:0;white-space:nowrap}}
.welcome-mode{background:#101f43}.welcome{min-height:100vh;min-height:100svh;padding:30px clamp(24px,6vw,92px);display:grid;grid-template-rows:auto 1fr auto;gap:24px;color:#fff;background:linear-gradient(115deg,#101f43 10%,#153bd1 100%)}.welcome-header,.welcome-footer{display:flex;align-items:center;justify-content:space-between;gap:20px;width:100%;max-width:1240px;margin:0 auto}.welcome-header .brand small{font-size:.75rem;color:#b9c9f8}.welcome-edition{font-size:.875rem;color:#c1cff5}.welcome-stage{display:grid;grid-template-columns:1fr 1.05fr;align-items:center;gap:32px;width:100%;max-width:1240px;margin:0 auto;padding:24px 0}.welcome-copy{position:relative;z-index:1}.welcome-label{font-size:.9rem;color:#bdcdf9;letter-spacing:.08em;margin-bottom:22px}.welcome-copy h1{font-size:clamp(2rem,4.6vw,4rem);line-height:1.35;font-weight:650;letter-spacing:-.025em}.welcome-description{font-size:1.05rem;color:#d4dff9;margin:24px 0 32px}.welcome-enter{background:#fff;color:#153bd1;border-color:#fff;min-height:54px;padding:14px 34px;font-size:1.05rem;box-shadow:0 10px 30px #09153930}.welcome-enter:hover{background:#eaf0ff;border-color:#eaf0ff}.welcome-enter:focus-visible{outline-color:#fff;outline-offset:6px}.welcome-art{position:relative;min-width:0;display:grid;place-items:center}.welcome-art::before{content:"";position:absolute;inset:12% 5%;border-radius:50%;background:#7895ff20}.welcome-art img{display:block;position:relative;width:auto;max-width:100%;max-height:60svh;height:auto;filter:drop-shadow(0 28px 26px #09153940)}.welcome-footer{border-top:1px solid #b4c7ff2e;padding-top:20px;color:#bdcdf1;font-size:.875rem}
@media(max-width:820px){.welcome{padding:24px;gap:18px}.welcome-stage{display:flex;flex-direction:column-reverse;gap:4px;padding:0 0 20px}.welcome-art{width:min(65vw,320px)}.welcome-art img{width:100%;max-height:none}.welcome-copy{text-align:center}.welcome-label{margin-bottom:14px}.welcome-copy h1{font-size:clamp(2rem,5.2vw,2.8rem)}.welcome-description{margin:16px 0 24px;font-size:1rem}.welcome-footer{padding-top:16px;gap:8px;flex-direction:column;align-items:center}.welcome-header .brand{font-size:1.25rem}.welcome-header .brand-mark{width:36px;height:36px}.welcome-edition{font-size:.875rem}}
@media(max-width:380px){.welcome{padding:20px}.welcome-header{gap:10px}.welcome-header .brand small{font-size:.65rem}.welcome-edition{font-size:.8rem}.welcome-copy h1{font-size:1.9rem}.welcome-label{font-size:.875rem}.welcome-art{width:72vw}}
.brand>span:last-child{min-width:0}.brand small{font-size:.75rem;letter-spacing:.02em;line-height:1.5}.welcome-header .brand{min-width:0}.welcome-header .brand small{letter-spacing:.02em}.welcome-edition{flex-shrink:0}.welcome-label{letter-spacing:.025em}
@media(max-width:820px){.welcome-header .brand small{max-width:10rem}.welcome-header .brand{flex:1}.welcome-label{max-width:22rem;margin-left:auto;margin-right:auto}}
@media(max-width:380px){.welcome-header .brand small{font-size:.75rem}.welcome-header .brand-mark{flex-shrink:0}.welcome-header .brand{gap:10px}}
.picture-toolbar{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:20px}.picture-scenes{display:flex;gap:8px;flex-wrap:wrap}.picture-scenes .button{padding:10px 16px;font-size:.9rem}.picture-speed{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:.875rem}.picture-speed .select{font-size:.9rem;padding:8px 12px}.picture-layout{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(290px,1fr);gap:22px;align-items:start}.picture-visual,.picture-task{background:white;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;min-width:0}.picture-scene-heading{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:20px 22px}.picture-scene-heading h2{font-family:Georgia,serif;font-size:1.4rem;font-weight:400}.picture-scene-heading span{color:var(--muted);font-size:.875rem;white-space:nowrap}.picture-image{position:relative;aspect-ratio:3/2;background:#eef2f8}.picture-image img{display:block;width:100%;height:100%;object-fit:contain}.picture-target{position:absolute;border:3px solid #153bd1;border-radius:12px;box-shadow:0 0 0 2px #ffffffc9;pointer-events:none}.picture-caption{padding:18px 22px;font-size:.9rem;color:var(--muted)}.picture-image-error{display:grid;place-items:center;padding:20px;height:100%;text-align:center;color:var(--bad)}.picture-task{padding:26px}.picture-step{font-size:.875rem;font-weight:600;color:var(--blue);margin-bottom:8px}.picture-task>h2{font-family:Georgia,serif;font-weight:400;font-size:2rem;line-height:1.3;margin-bottom:22px}.picture-task form label{display:block;color:var(--muted);font-size:.9rem;margin-bottom:8px}.picture-answer-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}.picture-hint{font-size:.95rem;color:#6a561f;background:#fff8e8;border-radius:8px;padding:10px 12px;margin-top:12px;overflow-wrap:anywhere}.picture-before-answer{color:var(--muted);font-size:.9rem;border-top:1px solid var(--line);margin-top:24px;padding-top:20px}.picture-feedback{display:flex;gap:3px 12px;align-items:baseline;flex-wrap:wrap;padding:14px 16px;border-radius:10px;margin:20px 0;font-size:.95rem;background:#eef7f1;color:var(--good)}.picture-feedback strong{width:100%}.picture-feedback>span[lang=en]{font-family:Georgia,serif;font-size:1.5rem}.picture-feedback small{width:100%;font-size:.875rem}.picture-feedback.wrong{background:#fff2f2;color:var(--bad)}.picture-speaking{border-top:1px solid var(--line);padding-top:20px}.picture-audio-actions{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0}.picture-audio-actions .button{padding:9px 13px;font-size:.9rem}.picture-sentence{font-family:Georgia,serif;font-size:1.25rem;line-height:1.5;overflow-wrap:anywhere}.picture-translation-toggle{background:none;border:0;color:var(--blue);text-decoration:underline;text-underline-offset:3px;font-size:.875rem;padding:8px 0;min-height:44px}.picture-translation,.picture-audio-status{font-size:.875rem;color:var(--muted);line-height:1.6}.picture-audio-status{min-height:2.8em;margin:5px 0 16px}.picture-say{padding:18px;border-radius:10px;background:var(--blue-soft);margin-bottom:20px}.picture-say h3{font-size:1rem;line-height:1.5;margin-bottom:8px}.picture-say>p[lang=en]{font-family:Georgia,serif;font-size:1.1rem;line-height:1.6;overflow-wrap:anywhere}.picture-say-note{color:var(--muted);font-size:.875rem;margin-top:10px}.picture-note{font-size:.875rem;color:var(--muted);line-height:1.6;margin-top:22px}.picture-result-words{list-style:none;padding:0;margin:0 0 26px;display:grid;grid-template-columns:1fr 1fr;gap:8px 22px}.picture-result-words li{display:flex;justify-content:space-between;gap:10px;border-bottom:1px solid var(--line);padding:10px 0}.picture-result-words span[lang=en]{font-family:Georgia,serif;font-size:1.2rem}.picture-result-words span:last-child{font-size:.875rem;color:var(--muted)}
@media(max-width:1100px){.picture-layout{grid-template-columns:minmax(0,1fr)}.picture-image{max-height:none}.picture-task{padding:24px}.picture-visual{max-width:100%}}
@media(max-width:650px){.picture-toolbar{gap:14px}.picture-scenes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%;gap:6px}.picture-scenes .button{padding:10px 6px;font-size:.875rem}.picture-scene-heading{padding:16px;flex-wrap:wrap}.picture-scene-heading h2{font-size:1.3rem}.picture-caption{padding:14px 16px}.picture-task{padding:20px}.picture-layout{gap:16px}.picture-result-words{grid-template-columns:1fr}.picture-target{border-width:2px;border-radius:8px}}
.picture-image{overflow:hidden}.picture-cropped img{position:absolute;max-width:none;object-fit:fill}.picture-single-icon{aspect-ratio:1;display:grid;place-items:center;background:#fff}.picture-single-icon img{width:76%;height:76%;object-fit:contain}.picture-letter-heading{font-size:.9rem;color:var(--muted);margin-bottom:12px}.picture-letters{display:flex;gap:7px;flex-wrap:wrap;align-items:center;margin-bottom:22px;line-height:1.2}.picture-letter-separator{min-width:12px;font-size:1.4rem}.picture-letter-status{font-size:.875rem;color:var(--muted);margin-top:12px;min-height:2.8em}.picture-credit{font-size:.875rem;color:var(--muted);margin-top:10px}.picture-credit a{text-underline-offset:3px}
@media(max-width:650px){.picture-letters{gap:3px}.picture-scenes{grid-template-columns:repeat(2,minmax(0,1fr))}.picture-single-icon img{width:72%;height:72%}}

.picture-topic{display:flex;flex-direction:column;gap:8px;flex:1;max-width:360px;min-width:0;font-size:.875rem;color:var(--muted)}.picture-topic .select{width:100%;font-size:.95rem}.picture-toolbar{align-items:end}.picture-speed{flex-direction:column;align-items:stretch;gap:8px}.picture-single-icon{aspect-ratio:3/2}
@media(max-width:650px){.picture-toolbar{flex-wrap:nowrap;gap:12px}.picture-topic{max-width:none}.picture-speed .select{width:100px}.picture-topic .select{font-size:.9rem}}
.picture-entry-help{color:var(--muted);font-size:.875rem;margin:-5px 0 16px}.picture-letters{gap:7px;margin-bottom:8px;row-gap:10px}.picture-letter-input{flex:0 0 36px;width:36px;min-width:0;height:48px;padding:0;border:1px solid transparent;border-bottom:2px solid #8996ac;border-radius:6px 6px 0 0;background:#f7f9fd;color:var(--ink);text-align:center;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:1.5rem;font-weight:600;caret-color:var(--blue)}.picture-letter-input::placeholder{color:var(--muted);opacity:1}.picture-letter-input:focus{outline:2px solid #769cff;outline-offset:2px;border-bottom-color:var(--blue);background:#fff}.picture-letter-input.hinted{background:var(--blue-soft);color:var(--blue);border-bottom-color:#9bafe9}.picture-letter-input:disabled{opacity:1;color:var(--ink);-webkit-text-fill-color:var(--ink);background:#f3f6fb}.picture-entry-status{color:var(--bad);font-size:.875rem;margin-top:12px}.picture-entry-status:empty{display:none}
@media(max-width:650px){.picture-letters{gap:4px;row-gap:10px}.picture-letter-input{flex-basis:30px;width:30px;height:44px;font-size:1.25rem}}
.picture-review-panel{display:flex;justify-content:space-between;align-items:center;gap:16px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:18px 22px;margin-bottom:20px}.picture-review-panel h2{font-size:1rem;margin-bottom:4px}.picture-review-panel p,.picture-review-feedback{color:var(--muted);font-size:.9rem}.picture-review-panel .button{flex-shrink:0}.picture-review-feedback{margin:-8px 0 20px;line-height:1.6}.picture-history{border:1px solid var(--line);background:#fff;border-radius:12px;margin-top:20px;padding:16px 20px}.picture-history>summary{cursor:pointer;font-size:.95rem;font-weight:550;min-height:30px}.picture-history>p{color:var(--muted);font-size:.9rem;margin-top:14px}.picture-history ul{list-style:none;margin:14px 0 0;padding:0}.picture-history li{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 0;border-top:1px solid var(--line)}.picture-history li>div{min-width:0}.picture-history li strong{display:block;font-family:Georgia,serif;font-size:1.3rem;font-weight:400;overflow-wrap:anywhere}.picture-history li span,.picture-history li p{display:block;color:var(--muted);font-size:.875rem;line-height:1.7}.picture-history li .button{flex-shrink:0;padding:8px 13px}.picture-result-words li{align-items:start;flex-wrap:wrap}.picture-result-words span:last-child{overflow-wrap:anywhere}
@media(max-width:650px){.picture-review-panel{align-items:stretch;flex-direction:column;padding:16px;gap:12px}.picture-review-panel .button{align-self:start}.picture-history{padding:14px 16px}.picture-history li{align-items:start;flex-direction:column;gap:10px}.picture-review-feedback{font-size:.875rem}}
.picture-today-progress{grid-column:1/-1;min-width:0}

/* Focused picture practice keeps one question and one main action together. */
.picture-focus .shell{display:block}.picture-focus .sidebar,.picture-focus .page-header,.picture-focus .page-footer{display:none}.picture-focus .main{max-width:1000px;padding:24px 24px 18px}.picture-focus-header{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:44px;margin-bottom:18px}.picture-brand{font-size:1.2rem;font-weight:600}.picture-exit{font-size:.9rem;color:var(--muted);text-decoration:none;min-height:44px;display:flex;align-items:center}.picture-exit:hover{color:var(--blue)}.picture-focus-header .button{font-size:.9rem;padding:8px 12px}.picture-options{background:#fff;border:1px solid var(--line);border-radius:14px;padding:20px;margin-bottom:20px}.picture-options .picture-history{margin:16px 0}.picture-options .picture-review-panel{padding:0;border:0;margin:0}.picture-exercise{background:var(--surface);border:1px solid var(--line);border-radius:20px;overflow:hidden}.picture-round-bar{display:flex;justify-content:space-between;align-items:start;gap:16px;padding:20px 26px 12px;font-size:.9rem;color:var(--muted)}.picture-round-bar>span:first-child{min-width:0}.picture-round-bar>span:last-child{white-space:nowrap;font-variant-numeric:tabular-nums}.picture-round-bar small{font-size:.875rem;display:block}.picture-session-track{height:4px;margin:0 26px;background:var(--blue-soft);border-radius:3px;overflow:hidden}.picture-session-track>span{display:block;height:100%;background:var(--blue)}.picture-focus .picture-layout{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:26px;padding:26px;align-items:center;--picture-image-height:320px}.picture-focus .picture-visual,.picture-focus .picture-task{border:0;border-radius:0;background:transparent;overflow:visible}.picture-focus .picture-task{padding:0}.picture-figure{height:var(--picture-image-height);display:flex;align-items:center;justify-content:center;border-radius:14px;background:#f5f7fb;overflow:hidden}.picture-focus .picture-single-icon{height:var(--picture-image-height);width:100%;aspect-ratio:auto;background:transparent;display:flex;align-items:center;justify-content:center}.picture-focus .picture-single-icon img{width:100%;height:calc(var(--picture-image-height) - 24px);object-fit:contain}.picture-focus .picture-cropped{width:min(100%,calc(var(--picture-image-height) * var(--picture-ratio)));flex-shrink:0}.picture-focus .picture-task>h2{text-align:center;font-size:1.8rem;margin:0 0 8px}.picture-focus .picture-letter-heading{text-align:center;margin-bottom:14px;font-size:.9rem}.picture-focus .picture-letters{justify-content:center;gap:6px;row-gap:10px;margin-bottom:0;min-height:48px;cursor:text;padding:4px 0}.picture-focus .picture-letter-input{flex-basis:38px;width:38px;height:48px;font-weight:500;background:transparent}.picture-focus .picture-letter-input.hinted{background:var(--blue-soft);color:var(--blue)}.picture-focus .picture-letter-input.wrong-letter{color:var(--bad);-webkit-text-fill-color:var(--bad);border-bottom-color:var(--bad);background:#fff4f2}.picture-focus .picture-letter-input:disabled{background:transparent}.picture-answer-tools{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:44px;margin-top:6px}.picture-answer-tools .button{font-size:.875rem;padding:6px 0;color:var(--blue);background:transparent;min-height:44px}.picture-answer-tools .button:hover{background:transparent;text-decoration:underline;text-underline-offset:3px}.picture-focus .picture-letter-status{min-height:0;margin:0;font-size:.875rem;white-space:nowrap}.picture-feedback-slot{min-height:84px;display:flex;align-items:center;justify-content:center;padding:6px 0}.picture-feedback-idle{font-size:.9rem;color:var(--muted);text-align:center}.picture-focus .picture-feedback{margin:0;padding:4px 8px;width:100%;justify-content:center;text-align:center;background:transparent;gap:0 8px;font-size:.95rem}.picture-focus .picture-feedback strong{font-size:.95rem;line-height:1.6}.picture-focus .picture-feedback>span[lang=en]{font-family:inherit;font-size:1.2rem}.picture-focus .picture-feedback small{font-size:.875rem;line-height:1.5}.picture-focus .picture-answer-actions{margin:0;display:block}.picture-focus .picture-answer-actions .button{min-height:48px;border-radius:11px}.picture-focus .picture-speaking{margin-top:16px;padding-top:0}.picture-speaking>summary{min-height:44px;padding:10px 0;font-size:.9rem;color:var(--muted);cursor:pointer}.picture-focus .picture-say{margin-bottom:0}.picture-focus .picture-credit{font-size:.875rem;margin-top:12px;text-align:center}
@media(max-width:700px){.picture-focus .main{padding:12px 16px 16px}.picture-focus-header{margin-bottom:12px;gap:8px}.picture-focus .picture-layout{grid-template-columns:minmax(0,1fr);padding:18px;gap:14px;--picture-image-height:clamp(96px,calc(var(--picture-view-height,800px) * .24),220px)}.picture-round-bar{padding:16px 18px 10px;font-size:.875rem}.picture-round-bar small{display:none}.picture-session-track{margin:0 18px}.picture-focus .picture-task>h2{font-size:1.55rem}.picture-focus .picture-letter-heading{margin-bottom:8px}.picture-focus .picture-letter-input{flex-basis:32px;width:32px;height:44px;font-size:1.35rem}.picture-focus .picture-letters{gap:4px;min-height:44px}.picture-focus .picture-feedback-slot{min-height:76px}.picture-options{padding:16px}.picture-options .picture-toolbar{flex-wrap:wrap}.picture-options .picture-speed{min-width:100px}.picture-focus .picture-exercise{border-radius:16px}}
@media(max-height:520px) and (max-width:700px){.picture-focus .picture-layout{gap:10px;padding:14px}.picture-focus .picture-credit{display:none}.picture-focus .picture-feedback-slot{min-height:64px}.picture-focus .main{padding-top:8px}.picture-focus-header{margin-bottom:8px}.picture-round-bar{padding-top:12px}}
@media(max-width:360px){.picture-focus .main{padding:8px 12px 12px}.picture-focus .picture-layout{padding:14px;gap:10px;--picture-image-height:clamp(88px,calc(var(--picture-view-height,568px) * .16),190px)}.picture-focus .picture-feedback-slot{min-height:76px}.picture-focus-header{margin-bottom:6px}.picture-round-bar{padding-top:12px}.picture-focus .picture-letter-input{flex-basis:28px;width:28px;font-size:1.2rem}.picture-focus .picture-feedback>span[lang=en]{font-size:1.05rem}.picture-focus .picture-feedback strong{font-size:.9rem}.picture-focus .picture-task>h2{font-size:1.4rem}}

.picture-bank-summary{font-size:.9rem;color:var(--muted);margin-bottom:16px;line-height:1.6}.picture-book-source{border-top:1px solid var(--line);margin-top:16px;font-size:.9rem;line-height:1.65;color:var(--muted)}.picture-book-source summary{min-height:44px;padding:10px 0;cursor:pointer}.picture-book-source p{margin:8px 0;overflow-wrap:anywhere}

@media(max-width:700px){.picture-focus .picture-letter-input{flex-basis:min(32px,calc((100% - (var(--picture-slot-count,3) - 1)*4px)/var(--picture-slot-count,3)));width:min(32px,calc((100% - (var(--picture-slot-count,3) - 1)*4px)/var(--picture-slot-count,3)))}}

.picture-focus .picture-rich-scene img{width:100%;height:var(--picture-image-height);object-fit:contain;border-radius:12px}

/* Original-book picture index and browsable chapter cards. */
.picture-library-summary{display:flex;align-items:center;gap:28px;flex-wrap:wrap;padding:24px;background:var(--surface);border:1px solid var(--line);border-radius:16px;margin-bottom:24px}.picture-library-summary>div{min-width:100px}.picture-library-summary strong{display:block;font-size:2.2rem;color:var(--blue);font-weight:600;line-height:1.2;font-variant-numeric:tabular-nums}.picture-library-summary small{font-size:1rem;font-weight:400;color:var(--muted)}.picture-library-summary span{font-size:.9rem;color:var(--muted)}.picture-library-summary>p{flex:1;min-width:180px;font-size:1rem;line-height:1.7;color:var(--muted)}.picture-chapter-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.picture-chapter-card{display:block;text-align:left;min-width:0;padding:20px;background:var(--surface);border:1px solid var(--line);border-radius:14px;cursor:pointer;font:inherit;color:var(--ink);transition:border-color .15s,background .15s}.picture-chapter-card:hover{border-color:var(--blue);background:#f5f8ff}.picture-chapter-card:focus-visible{outline:2px solid var(--blue);outline-offset:3px}.picture-chapter-number{font-size:.875rem;font-weight:600;color:var(--blue)}.picture-chapter-card h2{font-size:1.2rem;margin:12px 0 8px}.picture-chapter-card p{font-size:.9rem;color:var(--muted);line-height:1.6}.picture-library-note{font-size:.9rem;color:var(--muted);line-height:1.7;margin-top:22px}.picture-library-back{font:inherit;font-size:.9rem;border:0;background:transparent;color:var(--blue);cursor:pointer;padding:8px 0;min-height:44px;margin-bottom:8px;text-decoration:underline;text-underline-offset:3px}.picture-library-chapter{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:24px;padding:24px;background:var(--surface);border:1px solid var(--line);border-radius:16px}.picture-library-chapter p{font-size:.875rem;color:var(--blue);margin-bottom:8px}.picture-library-chapter h2{font-size:1.65rem;margin-bottom:8px}.picture-library-chapter span{font-size:.9rem;color:var(--muted);line-height:1.6}.picture-library-toolbar{display:flex;gap:16px;align-items:end;margin-bottom:20px}.picture-library-toolbar label{display:flex;flex:1;flex-direction:column;gap:8px;font-size:.9rem;color:var(--muted);min-width:0}.picture-library-toolbar .select,.picture-library-toolbar .input{width:100%;font-size:1rem}.picture-library-words{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.picture-library-word{min-width:0;background:var(--surface);border:1px solid var(--line);border-radius:14px;overflow:hidden}.picture-library-image{height:150px;display:flex;align-items:center;justify-content:center;background:#f5f7fb;padding:10px}.picture-library-image>img{display:block;width:100%;height:100%;object-fit:contain}.picture-library-crop{position:relative;max-width:100%;max-height:130px;height:130px;overflow:hidden}.picture-library-crop img{position:absolute;max-width:none;object-fit:fill}.picture-library-word-info{padding:16px}.picture-library-word h3{font-family:Georgia,serif;font-size:1.45rem;font-weight:400;overflow-wrap:anywhere;margin:0 0 8px}.picture-library-word p{font-size:1rem;line-height:1.6;margin:0 0 8px}.picture-library-word span{display:block;font-size:.875rem;color:var(--muted);margin-bottom:12px}.picture-library-word .button{font-size:.9rem;color:var(--blue);padding:8px 12px;min-height:44px}
@media(max-width:900px){.picture-chapter-grid,.picture-library-words{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:650px){.picture-library-summary{padding:18px;gap:18px}.picture-library-summary>p{flex-basis:100%;min-width:0}.picture-library-summary .button{width:100%}.picture-chapter-grid{gap:12px}.picture-chapter-card{padding:16px 12px}.picture-chapter-card h2{font-size:1.1rem;margin-top:10px}.picture-chapter-card p{font-size:.875rem}.picture-library-chapter{padding:18px;flex-direction:column;align-items:start;gap:16px}.picture-library-chapter .button{width:100%}.picture-library-toolbar{flex-direction:column;align-items:stretch;gap:12px}.picture-library-words{gap:12px}.picture-library-image{height:110px;padding:6px}.picture-library-crop{height:98px;max-height:98px}.picture-library-word-info{padding:12px}.picture-library-word h3{font-size:1.2rem}.picture-library-word p{font-size:.9rem}.picture-library-word span{line-height:1.6}.picture-library-word .button{padding:6px 0}.picture-library-note{font-size:.875rem}}
@media(max-width:360px){.picture-library-words{grid-template-columns:minmax(0,1fr)}.picture-library-image{height:150px}.picture-library-crop{height:138px;max-height:138px}}

.picture-photo-credit{font-size:.75rem;line-height:1.5;color:var(--muted);margin:8px 0;overflow-wrap:anywhere}.picture-photo-credit summary{cursor:pointer;min-height:32px;display:list-item;padding:6px 0}.picture-photo-credit p,.picture-library-word .picture-photo-credit p{font-size:.75rem;margin:4px 0;line-height:1.5}.picture-photo-credit a{text-underline-offset:3px}

.book-choices{border:0;padding:0;margin:0 0 24px;max-width:480px;min-width:0;text-align:left}.book-choices legend{padding:0;margin-bottom:10px;font-size:.9rem;color:#d4dff9}.book-choices>div{display:grid;gap:10px}.book-choice{display:flex;align-items:center;gap:12px;padding:14px 16px;border:1px solid #b6c8fb66;border-radius:12px;background:#142b6533;cursor:pointer;min-height:76px}.book-choice:hover{background:#2b4da780}.book-choice.selected{background:#fff;color:var(--ink);border-color:#fff}.book-choice input{accent-color:var(--blue);width:18px;height:18px;flex-shrink:0;margin:0}.book-choice>span:first-of-type{flex:1;min-width:0}.book-choice strong{font-size:1rem;font-weight:600;display:block;line-height:1.5}.book-choice small{display:block;font-size:.875rem;line-height:1.5;color:#d4dff9;margin-top:3px}.book-choice.selected small{color:var(--muted)}.book-choice-check{color:var(--blue);font-size:1.1rem}.book-switch{display:flex;align-items:center;gap:12px;margin:0 0 20px;font-size:.9rem;color:var(--muted)}.book-switch label{white-space:nowrap}.book-switch .select{max-width:340px;min-width:0;width:100%;font-size:1rem}.picture-focus .book-switch{display:none}.welcome-copy h1{font-size:clamp(2rem,4vw,3.4rem)}.welcome-description{margin:18px 0 22px}
@media(max-width:820px){.welcome-stage{flex-direction:column;gap:16px}.welcome-copy{width:100%;max-width:480px}.welcome-copy h1{font-size:2rem}.welcome-copy h1 br{display:none}.welcome-label{display:none}.welcome-description{margin:12px 0 18px}.book-choices{max-width:none;margin-bottom:20px}.welcome-art{width:min(36vw,180px)}.welcome-enter{width:100%}.welcome-edition{font-size:.875rem}.book-switch{margin-bottom:16px}.book-choice{padding:12px;min-height:76px}}