@font-face{font-family:Manrope;src:url('assets/manrope-regular.ttf') format('truetype');font-weight:400 500;font-display:swap}@font-face{font-family:Manrope;src:url('assets/manrope-bold.ttf') format('truetype');font-weight:600 800;font-display:swap} :root{--green:#538d51;--dark:#1e3529;--pale:#eff5ec;--muted:#738077}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Manrope,Arial,sans-serif;color:#203129;background:#fff}button,input{font:inherit}button,a,label.import{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #bd8436;outline-offset:4px}header{min-height:100px;display:flex;align-items:center;justify-content:space-between;gap:28px;padding:22px 5%;border-bottom:1px solid #e6ebe5}.brand{color:var(--dark);font-size:24px;font-weight:800;text-decoration:none;line-height:1}.brand span{font-weight:400;margin-left:6px}.brand i{display:block;font-size:10px;letter-spacing:2px;text-transform:uppercase;font-style:normal;color:var(--muted);margin-top:10px}nav{display:flex;gap:8px}nav button{background:none;border:0;padding:12px 16px;color:#5e6b62;border-radius:25px;font-size:13px;font-weight:700}nav button.active{background:var(--pale);color:var(--green)}#due{display:inline-block;background:#dbe9d5;padding:1px 6px;border-radius:10px;margin-left:4px}.header-end{font-size:11px;color:var(--muted)}.wrap{max-width:1120px;margin:auto;padding:48px 30px}.eyebrow{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--green);font-weight:800}.welcome{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-bottom:34px}h1{font-size:44px;letter-spacing:-1.8px;line-height:1.15;margin:15px 0}p{line-height:1.8}.welcome p{color:var(--muted);font-size:14px;margin:12px 0 0}.small-note{font-size:12px;color:var(--muted);max-width:220px}.hero{background:#edf2e8;display:grid;grid-template-columns:1.2fr 1fr;min-height:340px;border-radius:5px;overflow:hidden;position:relative}.hero-copy{padding:42px 45px;z-index:1}.hero h2{font-size:38px;letter-spacing:-1.3px;line-height:1.2;margin:18px 0}.hero p{font-size:14px;color:#62715d;max-width:330px}.pill{font-size:10px;padding:6px 10px;border:1px solid #bfcdb7;border-radius:4px;display:inline-block;letter-spacing:1px}.primary{background:var(--green);color:white;border:0;border-radius:4px;padding:14px 23px;font-size:13px;font-weight:700}.primary:hover{background:#3f753d}.primary:disabled{opacity:.5;cursor:default}.secondary{background:white;border:1px solid #d3ded0;border-radius:4px;padding:12px 20px;color:var(--dark);font-size:13px}.scene{background:#dce7d6;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center}.scene svg{width:100%;height:100%;position:absolute;inset:0}.scene-label{position:absolute;bottom:22px;right:24px;font-size:10px;letter-spacing:3px;color:#45654e}.stats{display:flex;gap:32px;border-bottom:1px solid #e1e7dd;padding:25px 0;margin-bottom:43px}.stats strong{font-size:20px;font-weight:600}.stats span{font-size:11px;color:var(--muted);margin-left:8px}.section-title{display:flex;align-items:center;justify-content:space-between;margin:20px 0}.section-title h2{font-size:23px;letter-spacing:-.6px}.section-title span{font-size:12px;color:var(--muted)}.lessons{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.lesson-card{border:1px solid #dfe6dc;background:white;border-radius:5px;padding:25px;text-align:left;color:inherit;transition:transform .2s}.lesson-card:hover{transform:translateY(-3px);border-color:var(--green)}.lesson-card .number{color:#90a38b;font-size:12px}.lesson-card h3{font-size:18px;margin:27px 0 8px}.lesson-card p{font-size:12px;color:var(--muted);min-height:44px}.card-bottom{font-size:11px;border-top:1px solid #e7ece4;padding-top:18px;display:flex;justify-content:space-between}.check{color:var(--green)}.bottom-note{padding:25px;background:#fafaf6;margin-top:28px;display:flex;gap:20px;align-items:center;font-size:12px;color:#61705f}.bottom-note strong{color:var(--dark)}footer{border-top:1px solid #e4e9df;padding:25px 5%;display:flex;gap:18px;flex-wrap:wrap;justify-content:space-between;font-size:10px;color:var(--muted)}footer button,.import{border:0;background:none;color:var(--green);font-size:10px;cursor:pointer;padding:0}#toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);padding:14px 22px;background:var(--dark);color:white;border-radius:5px;font-size:12px;display:none;z-index:10;max-width:90%;width:max-content}.lesson-top{max-width:1040px;margin:24px auto;display:flex;align-items:center;justify-content:space-between;padding:0 25px;font-size:12px;color:var(--muted)}.back{border:0;background:none;color:var(--green);padding:10px 0}.lesson-hero{text-align:center;background:#eaf1e6;padding:65px 25px}.lesson-hero h1{font-size:56px;max-width:800px;margin:18px auto}.lesson-hero p{font-size:17px;color:#62715d}.lesson-nav{position:sticky;top:0;z-index:3;background:#fffefc;border-bottom:1px solid #e4e9e1;display:flex;justify-content:center;gap:25px;padding:17px 10px}.lesson-nav a{font-size:12px;color:#63715e;text-decoration:none}.reading{max-width:810px;margin:auto;padding:65px 30px;text-align:center;scroll-margin-top:60px}.reading h2{font-size:30px;letter-spacing:-.8px;margin:15px 0 25px}.reading>p{font-size:21px;line-height:1.85}.reading .sub{font-size:13px;color:var(--muted)}.example{margin:40px -20px;padding:38px 20px;background:#f6f7f4}.example .tr{font-size:37px;font-weight:800;line-height:1.5}.example em{font-style:normal;color:var(--green)}.example .ru{font-size:18px;color:var(--green);margin-top:12px}.rule{border-left:3px solid var(--green);text-align:left;background:var(--pale);padding:20px 25px;font-size:15px;line-height:1.8;margin:30px 0}.word-table{width:100%;border-collapse:collapse;text-align:left;font-size:16px}.word-table td{padding:18px 10px;border-bottom:1px solid #e4e9df}.word-table td:first-child{font-weight:700}.sound{border:1px solid #d6e1d0;border-radius:50%;background:white;color:var(--green);width:34px;height:34px;font-size:14px}.sound-note{font-size:11px;color:var(--muted);text-align:left;line-height:1.8}.exercise-area{background:#f6f7f3;padding:55px 20px;scroll-margin-top:50px}.exercise-head{text-align:center;max-width:700px;margin:auto}.exercise-head h2{font-size:32px}.exercise-head p{font-size:14px;color:var(--muted)}.exercise{max-width:680px;margin:28px auto;background:white;border:1px solid #dce4d7;border-radius:5px;padding:30px}.exercise small{color:var(--muted);font-size:11px}.exercise h3{font-size:21px;line-height:1.6;margin:18px 0}.exercise input{width:100%;padding:15px;border:1px solid #ccd8c6;border-radius:3px;font-size:18px;color:var(--dark)}.letters{display:flex;gap:6px;margin:10px 0 22px}.letters button{border:1px solid #e0e5dc;border-radius:3px;background:#fafbf8;padding:6px 11px;font-size:13px}.feedback{font-size:14px;padding:16px;margin:15px 0;background:#eff5ec;line-height:1.7}.feedback.wrong{background:#fff3e7;color:#7b5128}.exercise-actions{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.hint{font-size:12px;color:#7b6e45;margin:12px 0}.progress-line{height:4px;background:#e2e9dd;border-radius:4px;overflow:hidden;margin:20px 0}.progress-line div{height:100%;background:var(--green);transition:width .3s}.completion{text-align:center;padding:30px}.completion strong{font-size:40px;color:var(--green);display:block}.empty{text-align:center;padding:50px;background:var(--pale);line-height:1.9}.review-item{padding:25px;border-bottom:1px solid #e2e8dd}.review-item h3{margin:0 0 15px}.review-answer{font-size:23px;color:var(--green);padding:15px 0}.word-tabs{display:flex;gap:12px;margin:25px 0}.word-tabs button{padding:10px 18px}.finish-note{text-align:center;padding:40px 20px}.finish-note p{color:var(--muted);font-size:13px}@media(max-width:850px){.header-end{display:none}header{padding:20px 25px}.brand{font-size:19px}nav button{padding:10px;font-size:11px}.hero-copy{padding:30px}.hero h2{font-size:32px}.lessons{gap:10px}.lesson-card{padding:20px}.welcome h1{font-size:35px}.small-note{display:none}}@media(max-width:590px){header{flex-direction:column;gap:18px;padding:20px 15px}.brand i{text-align:center}nav{width:100%;justify-content:center}.wrap{padding:30px 20px}.welcome h1{font-size:34px}.hero{grid-template-columns:1fr}.hero-copy{padding:28px}.scene{height:185px}.stats{gap:18px;flex-wrap:wrap}.stats span{display:block;margin:6px 0}.lessons{grid-template-columns:1fr}.lesson-card h3{margin-top:15px}.lesson-card p{min-height:0}.lesson-hero{padding:45px 20px}.lesson-hero h1{font-size:37px}.lesson-hero p{font-size:14px}.reading{padding:45px 24px}.reading>p{font-size:18px}.reading h2{font-size:26px}.example .tr{font-size:29px}.example .ru{font-size:15px}.word-table{font-size:13px}.word-table td{padding:16px 5px}.exercise{padding:22px}.lesson-nav{gap:20px}.lesson-nav a{font-size:11px}.bottom-note{align-items:start}.section-title span{display:none}} .course-structure{background:#f7f8f4;padding:30px;margin-bottom:45px}.course-structure h2{font-size:24px;letter-spacing:-.6px}.course-structure ol{display:grid;grid-template-columns:repeat(4,1fr);list-style:none;padding:0;gap:22px;counter-reset:steps}.course-structure li{counter-increment:steps;border-top:1px solid #d4dfcf;padding-top:14px}.course-structure li:before{content:'0' counter(steps);color:#93a389;font-size:11px;display:block;margin-bottom:8px}.course-structure strong{font-size:15px;display:block}.course-structure li span{display:block;color:var(--muted);font-size:11px;line-height:1.7;margin-top:7px}.course-structure>p{font-size:12px;color:var(--muted);margin-bottom:0}.chapter{margin-bottom:38px}.chapter-heading{display:flex;gap:18px;align-items:center;margin:25px 0 18px}.chapter-heading h2{font-size:21px;margin:0 0 5px}.chapter-heading p{font-size:12px;color:var(--muted);margin:0}.chapter-index{font-size:26px;color:#a7b69f}.chapter-status{margin-left:auto;font-size:10px;white-space:nowrap;color:var(--green)}.planned{background:#fafbf8;color:#6e796b}.planned:hover{transform:none;border-color:#dfe6dc}.lesson-goal{max-width:960px;margin:38px auto;padding:28px;display:flex;gap:40px;border-bottom:1px solid #e3e9dd;scroll-margin-top:65px}.lesson-goal h2{font-size:24px}.lesson-goal p{font-size:16px;line-height:1.8}.lesson-steps{min-width:240px;display:flex;flex-direction:column;gap:15px;font-size:12px;color:var(--muted);justify-content:center}@media(max-width:650px){.course-structure{padding:22px}.course-structure ol{grid-template-columns:repeat(2,1fr)}.chapter-heading{align-items:start;gap:12px}.chapter-heading h2{font-size:18px}.chapter-status{font-size:9px}.lesson-goal{display:block;margin:18px 20px;padding:20px 5px}.lesson-steps{margin-top:25px;min-width:0}.lesson-nav{gap:14px}.lesson-nav a{font-size:10px}} /* Reading-first lesson layout, inspired by the supplied course reference. */ .lesson-top{margin:22px auto;max-width:1100px}.lesson-hero{min-height:410px;display:flex;flex-direction:column;justify-content:center;position:relative;overflow:hidden;background:#284b3c;color:#fff;padding:72px 30px}.lesson-hero:before{content:'';position:absolute;width:620px;height:620px;border:1px solid #ffffff12;border-radius:50%;right:-160px;top:-250px;box-shadow:0 0 0 65px #ffffff04,0 0 0 130px #ffffff03}.lesson-hero:after{content:'↓';font-size:25px;color:#cddbc5;position:absolute;bottom:24px;left:calc(50% - 8px)}.lesson-hero .eyebrow{color:#c3d9ae;letter-spacing:3px;position:relative}.lesson-hero h1{font-size:64px;font-weight:800;line-height:1.18;letter-spacing:-2px;max-width:850px;position:relative;margin:22px auto}.lesson-hero p{color:#d7e2d2;font-size:17px;max-width:640px;margin:0 auto 22px;position:relative}.lesson-nav{padding:20px;gap:36px;background:#fff}.lesson-nav a{font-size:12px;letter-spacing:.2px}.lesson-nav a:hover{color:var(--green);text-decoration:underline;text-underline-offset:6px}.lesson-goal{margin:48px auto 0;max-width:1000px;padding:32px 35px 45px;gap:60px}.lesson-goal h2{font-size:25px;letter-spacing:-.6px;margin:16px 0}.lesson-goal p{color:#697362;font-size:16px;max-width:430px}.lesson-steps{border-left:1px solid #dce6d6;padding-left:32px;gap:17px;font-size:11px;letter-spacing:.3px}.reading{max-width:900px;padding:80px 45px}.reading .eyebrow{font-size:10px;letter-spacing:3px}.reading h2{font-size:38px;line-height:1.35;margin:24px 0 36px;font-weight:700;letter-spacing:-1.2px}.reading>p{font-size:25px;line-height:1.85;font-weight:400;letter-spacing:-.5px}.reading>p b{font-weight:700}.example{margin:55px -45px;padding:58px 25px;background:#f5f6f3;border-radius:0}.example .tr{font-size:49px;line-height:1.4;letter-spacing:-1.4px;color:#172c21}.example em{color:#5da657}.example .ru{font-size:21px;margin-top:23px;color:#639c59;letter-spacing:.1px}.rule{margin:45px 0;background:#f0f5eb;border:0;border-top:2px solid #8bb37c;padding:29px 33px;font-size:18px;line-height:1.9}.reading .sub{font-size:14px;line-height:1.9;color:#7c8775;letter-spacing:0;margin-top:35px}.word-table td{padding:24px 15px;font-size:18px;border-color:#e6eadf}.word-table td:first-child{font-size:21px;letter-spacing:-.4px}.word-table td:nth-child(2){color:#6c7865}.sound{width:40px;height:40px;background:#f4f8ef;border:0;font-size:12px}.sound:hover{background:#e5efda}.sound-note{margin:28px 15px 0;color:#7d8776;font-size:12px;line-height:2}.exercise-area{padding:72px 25px 85px;background:#f2f5ed}.exercise-head h2{font-size:39px;letter-spacing:-1px;margin:22px 0}.exercise-head p{font-size:15px;line-height:1.9;max-width:540px;margin:0 auto}.exercise{margin-top:35px;border-color:#e1e8da;box-shadow:0 8px 30px #263e2510;padding:38px;max-width:720px}.exercise h3{font-size:24px;letter-spacing:-.5px;margin:25px 0}.exercise input{background:#fcfdf9;border:1px solid #ccd9c0;padding:18px;font-size:20px}.exercise small{font-size:10px;letter-spacing:1.5px}.letters{gap:8px;margin:13px 0 28px}.letters button{min-width:36px;background:white;border-color:#e3e9dc}.letters button:hover{background:var(--pale)}.feedback{padding:22px;font-size:15px;line-height:1.85;border-radius:3px}.finish-note{padding:35px 20px}.completion h2{font-size:30px}.completion p{font-size:14px}.chapter-heading{margin-top:35px}.lesson-card{padding:27px}.planned{opacity:.82}.primary{transition:background .15s}.reading#vocabulary{border-top:1px solid #e5eadf}.lesson-card h3{line-height:1.5}.completion strong{margin:25px 0;font-size:54px}.review-item{padding:32px 0}.review-item h3{font-size:22px;font-weight:500}.review-answer{font-size:29px}.lesson-hero h1,.reading h2,.example .tr{text-wrap:balance} @media(max-width:850px){.lesson-hero h1{font-size:52px}.lesson-hero{min-height:370px}.reading{padding:65px 35px}.example{margin-left:-35px;margin-right:-35px}.reading>p{font-size:23px}.lesson-goal{gap:25px;padding-left:30px;padding-right:30px}.lesson-steps{min-width:220px;padding-left:24px}.example .tr{font-size:43px}} @media(max-width:590px){.lesson-hero{min-height:320px;padding:55px 24px}.lesson-hero h1{font-size:40px;letter-spacing:-1.4px}.lesson-hero p{font-size:14px;line-height:1.8;margin-bottom:24px}.lesson-hero .eyebrow{font-size:9px;letter-spacing:2px}.lesson-nav{gap:18px;padding:17px 10px;overflow-x:auto}.lesson-nav a{font-size:10px;white-space:nowrap}.lesson-goal{display:block;margin:10px 20px 0;padding:28px 4px}.lesson-goal h2{font-size:23px}.lesson-goal p{font-size:15px}.lesson-steps{border-left:0;border-top:1px solid #dce6d6;padding:22px 0 0;gap:13px;font-size:11px}.reading{padding:52px 25px}.reading h2{font-size:29px;letter-spacing:-.7px;margin:20px 0 28px}.reading>p{font-size:21px;line-height:1.9;letter-spacing:-.4px}.example{margin:37px -25px;padding:38px 23px}.example .tr{font-size:35px;letter-spacing:-.8px;overflow-wrap:anywhere}.example .ru{font-size:17px;line-height:1.7;margin-top:19px}.rule{margin:32px 0;padding:23px;font-size:16px}.word-table td{padding:20px 5px;font-size:13px}.word-table td:first-child{font-size:16px}.sound{width:33px;height:33px}.sound-note{margin-left:0;margin-right:0;font-size:11px}.exercise-area{padding:48px 16px}.exercise-head h2{font-size:30px}.exercise-head p{font-size:13px}.exercise{padding:25px 21px}.exercise h3{font-size:21px}.exercise input{font-size:18px;padding:15px}.letters{gap:5px}.letters button{min-width:30px;padding:7px 9px}.feedback{padding:17px;font-size:13px}.lesson-card{padding:23px}.review-answer{font-size:25px}} @media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}} .task-guide{font-size:12px;color:#76806c;line-height:1.8;margin-bottom:24px}.sentence-slot{min-height:78px;background:#f8faf4;border:1px dashed #b7c9a9;border-radius:4px;padding:15px;display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:18px}.slot-placeholder{font-size:14px;color:#8c9684}.word-bank{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:28px}.word-chip{font-size:17px;background:white;border:1px solid #cddbc2;padding:10px 16px;border-radius:4px;color:#2b442d}.word-chip:hover{background:#edf4e6}.word-chip.selected{background:#e7f0df;border-color:#acc49a}.word-chip:disabled{opacity:.35;cursor:default}.sentence-slot .word-chip:disabled{opacity:1}.text-button{padding:12px 5px;background:none;border:0;color:#78826d;font-size:12px;text-decoration:underline;text-underline-offset:3px}.text-button:disabled{opacity:.45;cursor:default}.result-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:30px 0}.result-grid>div{background:#f4f7ee;padding:18px}.result-grid strong{font-size:34px;margin:0 0 10px}.result-grid span{font-size:12px;line-height:1.6;display:block;color:#6d7c62}.completion .result-note{font-size:13px;line-height:1.9;color:#74816a;margin-bottom:25px}@media(max-width:590px){.word-chip{font-size:15px;padding:10px 12px}.result-grid{gap:10px}.result-grid>div{padding:14px}.result-grid strong{font-size:29px}.result-grid span{font-size:11px}} .situation{border-top:1px solid #e5eadf}.dialogue{text-align:left;margin-top:30px}.dialogue-row{border-left:2px solid #b8ceaa;padding:16px 24px;margin:20px 0;background:#f7f9f3}.dialogue-row>span{display:block;font-size:10px;letter-spacing:1px;text-transform:uppercase;color:#829075;margin-bottom:13px}.dialogue-row strong{display:block;font-size:25px;line-height:1.6;font-weight:600}.dialogue-row p{color:#6f8c60;font-size:15px;margin:9px 0 0}.lesson-nav{flex-wrap:wrap}@media(max-width:590px){.dialogue-row{padding:15px 18px}.dialogue-row strong{font-size:20px}.dialogue-row p{font-size:13px}.lesson-nav{gap:13px}} .listening{border-top:1px solid #e5eadf}.audio-exercise{background:#f4f7ef;border:1px solid #dce6d4;padding:35px;text-align:left;margin-top:35px}.audio-exercise small{font-size:10px;letter-spacing:1.6px;color:#7c8e6f}.audio-controls{display:flex;gap:12px;flex-wrap:wrap;margin:23px 0}.audio-status{font-size:12px;line-height:1.8;color:#748268}.audio-options{display:grid;gap:10px;margin:20px 0}.audio-option{text-align:left;background:white;line-height:1.7}.audio-option:disabled{opacity:.55;cursor:default}.audio-option:hover:enabled{border-color:#538d51;background:#edf4e6}.audio-transcript{font-size:25px;font-weight:600;line-height:1.7;color:#477740;padding:20px 0}.audio-exercise h3{font-size:25px;line-height:1.5}.audio-exercise .sub{font-size:13px;line-height:1.9;color:#6d7e60}.audio-exercise [hidden]{display:none!important}@media(max-width:590px){.audio-exercise{padding:24px 18px}.audio-controls{gap:8px}.audio-controls button{font-size:12px;padding:13px 16px}.audio-transcript{font-size:21px}.lesson-nav{column-gap:18px;row-gap:12px}} .review-intro{font-size:14px;color:#74816d;max-width:700px}.review-summary{display:flex;gap:50px;margin:35px 0 30px;padding-bottom:25px;border-bottom:1px solid #e1e8db}.review-summary strong{display:block;font-size:28px;font-weight:600}.review-summary span{display:block;font-size:11px;line-height:1.7;color:#819075;margin-top:7px}.review-focus{max-width:800px;padding:35px;border:1px solid #d9e3d1;background:#f8faf5}.review-focus>small{font-size:10px;letter-spacing:1px;color:#7a8d6a}.review-focus h2{font-size:27px;line-height:1.6;font-weight:500}.review-focus p{font-size:13px;color:#74816a}.review-focus [hidden]{display:none!important}.review-method{max-width:760px;margin:35px 0;color:#72816a;font-size:12px;line-height:1.9}.review-method strong{color:#3d5636}.review-method p{margin:10px 0}.review-later{max-width:800px;border-top:1px solid #e1e8db;padding-top:22px;font-size:12px;color:#627757}.review-later summary{cursor:pointer;font-weight:600;padding:10px 0}.review-later>div{padding:17px 0;border-bottom:1px solid #e6ecdf;display:flex;justify-content:space-between;gap:25px;line-height:1.8}.review-later time{white-space:nowrap;color:#819075}@media(max-width:590px){.review-summary{gap:22px;flex-wrap:wrap}.review-summary strong{font-size:23px}.review-summary span{font-size:10px}.review-focus{padding:25px 20px}.review-focus h2{font-size:22px}.review-later>div{display:block}.review-later time{display:block;margin-top:7px}} .guided-field{position:relative;--entry-pad:18px;background:#fcfdf9;border-radius:3px}.guided-field input{position:relative;z-index:2;background:transparent;padding:var(--entry-pad);font-size:20px;line-height:1.5;letter-spacing:normal}.ghost-layer{position:absolute;inset:1px;z-index:1;pointer-events:none;padding:var(--entry-pad);padding-top:calc(var(--entry-pad) - 1px);color:#b5bdb0;font:inherit;font-size:20px;line-height:1.5;white-space:pre;overflow:hidden;letter-spacing:normal}.ghost-prefix{visibility:hidden}.ghost-layer[hidden]{display:none!important}.input-support{font-size:11px;color:#7e8a74;line-height:1.8;margin:9px 0 2px}.input-support .text-button{font-size:11px;padding:3px 8px}.input-support[data-fallback]:not([data-fallback=""]):after{content:attr(data-fallback);display:block;color:#899880;font-size:14px;margin-top:7px}@media(max-width:590px){.guided-field{--entry-pad:15px}.guided-field input,.ghost-layer{font-size:18px}} .cafe-dialogue{border-top:1px solid #e3eadc}.branch-reference{text-align:left;margin-top:30px}.branch-reference details{padding:18px 20px;border:1px solid #dce5d5;margin:12px 0;background:#f9fbf6}.branch-reference summary{font-size:15px;font-weight:600;cursor:pointer}.branch-reference details p{font-size:13px;line-height:1.9;color:#6c805e}.branch-phrase{padding:15px 0;border-bottom:1px solid #e4ebde}.branch-phrase strong{display:block;font-size:21px}.branch-phrase span{display:block;font-size:13px;color:#7b8c6d;margin-top:7px}.dialogue-mode{text-align:left;font-size:13px;line-height:1.8;margin:30px 0}.dialogue-mode label{display:flex;gap:10px;align-items:center;cursor:pointer}.dialogue-mode input{accent-color:#538d51;width:18px;height:18px}.dialogue-mode p{font-size:11px;color:#7d8d6f}.cafe-trainer{text-align:left;background:#f3f6ed;padding:30px;border:1px solid #d9e4d0}.cafe-trainer>small{font-size:10px;letter-spacing:1px;color:#809170}.chat-line{padding:20px;margin:20px 0;background:white;border:1px solid #e0e8d9;border-radius:5px;line-height:1.8}.chat-line.mine{margin-left:35px;background:#e8f0df;border-color:#cfdfbf}.chat-line.theirs{margin-right:35px}.chat-line>span{font-size:10px;letter-spacing:1px;color:#7b8b6c;display:block;margin-bottom:12px}.chat-line strong{font-size:23px;font-weight:600}.chat-line p{font-size:13px;color:#70845f;margin:10px 0}.chat-line .secondary{font-size:11px;padding:10px 14px;margin-top:12px}.repair-row{display:flex;flex-wrap:wrap;gap:12px;margin:25px 0}.repair-row .secondary{font-size:12px}.cafe-trainer h3{font-size:21px;line-height:1.6}.cafe-options{display:grid;gap:10px}.cafe-options>.secondary{text-align:left;background:white;line-height:1.8}.cafe-options>.secondary:disabled{opacity:.5;cursor:default}.cafe-options strong{display:block;font-size:17px;font-weight:600}.cafe-options span{display:block;font-size:12px;color:#7d8d70}.cafe-trainer>p{font-size:13px;line-height:1.9;color:#6c7f5f}.cafe-trainer [hidden]{display:none!important}@media(max-width:590px){.cafe-trainer{padding:23px 16px}.chat-line{padding:16px}.chat-line.mine{margin-left:15px}.chat-line.theirs{margin-right:15px}.chat-line strong{font-size:20px}.repair-row .secondary{font-size:11px}.branch-reference summary{font-size:13px}} .result-audio{margin:18px 0 5px;padding-top:17px;border-top:1px solid #d6e1cf}.result-audio>span{display:block;color:#3d6a36;font-size:23px;font-weight:600;line-height:1.7;margin-bottom:12px}.result-audio>div{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.result-audio .secondary{font-size:12px;background:white;padding:11px 15px}.review-focus .result-audio{margin-bottom:20px}@media(max-width:590px){.result-audio>span{font-size:20px}.result-audio .secondary{font-size:11px;padding:10px 12px}} /* Editorial travel course: large photography, generous reading rhythm. */ :root{--green:#59aa52;--dark:#202720;--pale:#f0f7eb;--muted:#7d8578}body{color:#242824;background:#fff;font-weight:400}header{min-height:90px;padding:20px 5.5%;border-bottom:1px solid #eee}.brand{font-weight:700;letter-spacing:-1.1px}.brand span{font-weight:400}.brand i{font-size:9px;font-weight:400;letter-spacing:2.5px;color:#8a9181}nav button{font-weight:400;font-size:12px}.header-end{letter-spacing:.8px;font-size:10px}.wrap{max-width:1180px;padding-top:58px}.welcome{margin-bottom:40px}.welcome h1{font-size:52px;font-weight:400;line-height:1.18;letter-spacing:-2.2px}.welcome p{font-size:15px}.hero{grid-template-columns:1fr 1.15fr;border-radius:0;min-height:390px;background:#f3f5ee}.hero-copy{padding:48px}.hero h2{font-weight:400;font-size:40px;letter-spacing:-1.5px}.hero .pill{border:0;padding:0;color:#728b60;font-size:9px;letter-spacing:2px}.hero p{font-size:13px;line-height:1.9}.scene{background:#7c9a94 url('assets/lesson-street.jpg') center/cover}.scene svg{display:none}.scene:after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,#071a2580,transparent 60%)}.scene-label{z-index:1;color:#fff;font-size:9px;letter-spacing:3px;bottom:28px;right:28px}.primary{background:#59aa52;border-radius:2px;padding:15px 25px;font-weight:600;font-size:12px}.primary:hover{background:#478e41}.secondary{border-radius:2px;font-weight:400}.stats{padding:28px 0;gap:45px;margin-bottom:50px}.stats strong{font-size:23px;font-weight:400}.stats span{font-size:10px}.course-structure{background:#fafbf8;padding:34px}.course-structure h2{font-weight:400;font-size:26px}.course-structure strong{font-weight:600}.chapter-heading{margin:34px 0 22px}.chapter-heading h2{font-size:23px;font-weight:400}.chapter-heading p{font-size:11px}.chapter-index{font-weight:400;font-size:34px;color:#b7c4ab}.chapter-status{font-size:9px;letter-spacing:.7px}.lessons{gap:18px}.lesson-card{border:0;border-top:2px solid #80b16e;border-radius:0;background:#f6f8f1;padding:26px;box-shadow:none;min-height:210px}.lesson-card:hover{background:#edf4e5;border-color:#59aa52;transform:translateY(-3px)}.lesson-card .number{font-size:9px;letter-spacing:1px}.lesson-card h3{font-size:21px;font-weight:400;letter-spacing:-.5px;line-height:1.5}.lesson-card p{font-size:11px}.card-bottom{border-top:1px solid #dde5d5;font-size:10px}.planned{border-top-color:#dce1d5;background:#fafbf8;opacity:.7}.section-title h2{font-size:30px;font-weight:400;letter-spacing:-1px}.bottom-note{background:#f9faf7}.lesson-top{margin:18px auto;padding:0 30px;font-size:10px;max-width:1160px}.back{font-size:11px}.lesson-hero{min-height:570px;padding:100px 30px 85px;background-size:cover;background-position:center;isolation:isolate}.theme-city{background-image:linear-gradient(#091b254d,#07151c8c),url('assets/lesson-street.jpg')}.theme-tea{background-image:linear-gradient(#100d0b40,#100d0b9c),url('assets/card-tea-v2.jpg');background-position:center 46%}.lesson-hero:before{content:none}.lesson-hero:after{content:'⌄';font-size:34px;bottom:22px;color:#fff}.lesson-hero .eyebrow{color:#fff;font-size:10px;letter-spacing:3.4px}.lesson-hero h1{font-weight:600;font-size:76px;max-width:940px;line-height:1.15;letter-spacing:-2.8px;text-shadow:0 2px 20px #0002;margin:28px auto}.lesson-hero p{color:#fff;font-size:17px;max-width:610px;line-height:1.9}.lesson-nav{padding:23px 15px;gap:34px;border-bottom:1px solid #eee;background:#fffffff5;backdrop-filter:blur(10px)}.lesson-nav a{font-size:11px;color:#7c8772;letter-spacing:.3px}.lesson-nav a:hover{color:#59aa52}.lesson-goal{padding:48px 25px;max-width:920px;gap:70px;margin:12px auto 0;border-bottom:1px solid #edf0e7}.lesson-goal h2{font-weight:400;font-size:25px;letter-spacing:-.7px}.lesson-goal p{font-size:15px;color:#737f68}.lesson-steps{font-size:10px;line-height:1.8;padding-left:28px;gap:12px;border-left:1px solid #e5eadf}.reading{max-width:960px;padding:90px 45px}.reading .eyebrow{font-size:9px;letter-spacing:3px;color:#6b9f54}.reading h2{font-size:42px;font-weight:400;letter-spacing:-1.3px;line-height:1.4;margin:28px 0 40px}.reading>p{font-size:27px;font-weight:400;color:#30362c;line-height:1.85;letter-spacing:-.7px}.reading>p b{font-weight:600}.reading .sub{font-size:14px;color:#8a937f;line-height:1.95;letter-spacing:0}.example{background:#f7f8f5;margin:60px -45px;padding:62px 30px}.example .tr{font-size:54px;font-weight:600;line-height:1.5;letter-spacing:-1.5px;color:#171d15}.example em{color:#59aa52}.example .ru{font-size:22px;font-weight:400;letter-spacing:.3px;color:#69a057;margin-top:24px}.rule{border:0;border-left:2px solid #83b36c;background:#f8fbf4;padding:28px 32px;margin:45px 0;text-align:left;font-size:17px;line-height:2;color:#626f56}.rule b{color:#374b2b;font-weight:600}.lesson-photo{margin:0;position:relative;height:340px;background-size:cover;background-position:center;isolation:isolate}.photo-tea{background-image:linear-gradient(90deg,#180d0a70,transparent),url('assets/card-tea-v2.jpg');background-position:center 60%}.photo-city{background-image:linear-gradient(90deg,#071c2666,transparent),url('assets/lesson-street.jpg');background-position:center 65%}.lesson-photo figcaption{position:absolute;left:max(40px,calc((100vw - 870px)/2));top:50%;transform:translateY(-50%);color:#fff;text-shadow:0 1px 12px #0005}.lesson-photo figcaption span{font-size:38px;font-weight:400;letter-spacing:-1px}.lesson-photo figcaption small{display:block;font-size:14px;letter-spacing:1px;margin-top:13px}.visual-quantity{padding:45px 10px;background:white;margin:20px 0 45px}.quantity-line{display:grid;grid-template-columns:repeat(3,1fr);margin-top:32px}.quantity-line>div{padding:20px 15px;border-right:1px solid #e5eadf}.quantity-line>div:last-child{border:0}.quantity-digit{display:block;color:#dbe8d1;font-size:76px;line-height:1.2;font-weight:400}.quantity-line strong{display:block;font-size:28px;font-weight:600;line-height:1.8;color:#20291a;margin-top:15px;white-space:nowrap}.quantity-line em{color:#59aa52;font-style:normal}.quantity-line small{color:#8a987e;font-size:12px;display:block;margin-top:9px}.visual-quantity p{font-size:14px;color:#8a987e;margin-top:30px}.visual-formula{padding:42px 20px;margin:25px 0;background:#fafbf7}.visual-formula>div{display:flex;justify-content:center;align-items:center;gap:25px;flex-wrap:wrap;font-size:36px;margin:30px 0 15px}.visual-formula em{font-style:normal;color:#59aa52}.visual-formula b{font-size:20px;font-weight:400;color:#adba9f}.visual-formula p{font-size:14px;color:#8a987e}.word-table{max-width:760px;margin:0 auto}.word-table td{border-color:#edf0e7;padding:22px 14px}.word-table td:first-child{font-weight:400;font-size:24px}.word-table td:nth-child(2){font-size:16px;color:#89947d}.sound{width:36px;height:36px;color:#59aa52;background:#f0f6e9;font-size:10px}.sound-note{max-width:735px;margin:30px auto 0;font-size:11px;color:#929b86}.dialogue-row{border:0;border-left:2px solid #a8c88f;background:#fafcf7;padding:22px 28px;margin:22px 0}.dialogue-row strong{font-weight:400;font-size:29px}.dialogue-row>span{font-size:9px;letter-spacing:1.5px}.dialogue-row p{font-size:15px;color:#79a261}.audio-exercise{background:#fafcf7;border:1px solid #e1ead7;padding:35px}.audio-options .secondary{border:0;border-left:2px solid #deead1;background:white;padding:17px 20px}.audio-options .secondary:hover:enabled{border-left-color:#59aa52}.exercise-area{background:#f5f8ef;padding:80px 25px 90px}.exercise-head h2{font-size:43px;font-weight:400;letter-spacing:-1.4px}.exercise-head .eyebrow{font-size:9px;letter-spacing:3px}.exercise-head>p{font-size:12px;color:#909b82;max-width:590px;line-height:2}.exercise{max-width:760px;padding:42px;background:white;border:0;border-radius:0;box-shadow:0 12px 40px #374c2110}.exercise h3{font-size:27px;font-weight:400;line-height:1.6;letter-spacing:-.6px}.exercise small{font-size:9px;letter-spacing:1.3px}.task-guide{font-size:11px;color:#8d987f}.progress-line{height:2px;background:#edf1e5}.progress-line div{background:#77b15e}.exercise input{border-color:#dce6d0;border-radius:0}.feedback{border-radius:0;background:#f1f7e9;font-size:14px}.feedback.wrong{background:#fbf4e8}.result-audio>span{font-weight:400;color:#5c9143}.branch-reference details{border:0;border-bottom:1px solid #e5ebdc;background:#fafcf7;padding:22px}.branch-reference summary{font-weight:400;font-size:18px}.cafe-trainer{background:#f5f8ef;border:0;padding:36px}.chat-line{border:0;border-radius:0}.chat-line.mine{background:#eaf3df}.chat-line strong{font-weight:400}.cafe-options>.secondary{border:0;background:white;padding:18px}.review-focus{background:#fafcf7;border:0;padding:38px}.review-focus h2{font-weight:400}.review-summary strong{font-weight:400}footer{font-size:9px;color:#98a08d;border-color:#eff2e9}footer a{color:#8b9a7c;text-decoration:none}.finish-note p{font-size:11px;color:#9ba48f}.ghost-layer{color:#b4bcae} @media(max-width:850px){.welcome h1{font-size:43px}.hero-copy{padding:34px}.hero h2{font-size:34px}.lesson-hero{min-height:490px}.lesson-hero h1{font-size:60px}.reading>p{font-size:25px}.reading h2{font-size:36px}.example .tr{font-size:45px}.lesson-goal{gap:35px;padding-left:35px;padding-right:35px}.word-table td:first-child{font-size:21px}.word-table td:nth-child(2){font-size:14px}} @media(max-width:590px){header{gap:16px;padding:20px 15px}.wrap{padding:35px 20px}.welcome h1{font-size:36px;letter-spacing:-1.3px}.welcome p{font-size:12px}.hero{display:flex;flex-direction:column-reverse;min-height:0}.scene{height:220px;min-height:220px}.hero-copy{padding:30px}.hero h2{font-size:34px}.hero p{font-size:12px}.stats{gap:22px}.stats strong{font-size:20px}.stats span{font-size:9px}.section-title h2{font-size:25px}.chapter-heading h2{font-size:20px}.chapter-heading p{font-size:10px}.chapter-status{font-size:8px}.chapter-index{font-size:29px}.lesson-card{min-height:0;padding:24px}.lesson-card h3{font-size:22px}.course-structure{padding:24px}.course-structure h2{font-size:23px}.lesson-top{padding:0 20px}.lesson-hero{min-height:430px;padding:70px 23px;background-position:center}.lesson-hero h1{font-size:44px;letter-spacing:-1.6px;line-height:1.22;max-width:450px}.lesson-hero p{font-size:14px;line-height:1.9}.lesson-hero .eyebrow{font-size:8px;letter-spacing:2.4px}.lesson-nav{padding:17px 12px;gap:13px 19px}.lesson-nav a{font-size:9px}.lesson-goal{display:block;margin:0 23px;padding:30px 0}.lesson-goal h2{font-size:23px}.lesson-goal p{font-size:14px}.lesson-steps{border-left:0;padding:20px 0 0;margin-top:22px;gap:10px}.reading{padding:58px 25px}.reading h2{font-size:30px;line-height:1.45;letter-spacing:-.7px;margin:24px 0 30px}.reading>p{font-size:22px;line-height:1.9;letter-spacing:-.4px}.reading .eyebrow{font-size:8px;letter-spacing:2.5px}.reading .sub{font-size:12px}.example{margin:42px -25px;padding:40px 22px}.example .tr{font-size:36px;line-height:1.5;letter-spacing:-1px}.example .ru{font-size:17px;line-height:1.7;margin-top:20px}.rule{padding:22px;font-size:15px;line-height:2}.lesson-photo{height:260px}.lesson-photo figcaption{left:25px;max-width:calc(100% - 50px)}.lesson-photo figcaption span{font-size:31px;line-height:1.3}.lesson-photo figcaption small{font-size:11px}.visual-quantity{padding:25px 0}.quantity-line>div{padding:15px 5px}.quantity-digit{font-size:54px}.quantity-line strong{font-size:21px;letter-spacing:-.6px}.quantity-line small{font-size:10px}.visual-quantity p{font-size:12px}.visual-formula>div{font-size:28px;gap:17px}.word-table td{padding:19px 4px}.word-table td:first-child{font-size:17px}.word-table td:nth-child(2){font-size:12px}.sound{width:30px;height:30px}.sound-note{font-size:10px}.dialogue-row{padding:20px}.dialogue-row strong{font-size:24px}.dialogue-row p{font-size:13px}.exercise-area{padding:55px 16px}.exercise-head h2{font-size:32px}.exercise-head>p{font-size:11px}.exercise{padding:27px 22px}.exercise h3{font-size:23px}.exercise small{font-size:8px;line-height:1.8}.task-guide{font-size:11px}.audio-exercise{padding:24px 18px}.cafe-trainer{padding:24px 17px}.branch-reference summary{font-size:16px}.review-focus{padding:26px 22px}} .ghost-layer.support-clear{color:#6e7f62}.ghost-layer.support-light{color:#9aa78d}.ghost-layer.support-partial{color:#abb69f}.independent-result{background:#edf5e5;padding:25px;margin:25px 0;text-align:center}.independent-result strong{font-size:36px;color:#4c7b38;margin:0 0 12px}.independent-result span{font-size:14px;display:block;line-height:1.8;color:#536c42}.independent-result p{font-size:12px;line-height:1.8;color:#7b8c6d}.result-caption{color:#8d9980;font-size:12px;margin-top:25px} .vocab-intro{font-size:14px;line-height:1.9;max-width:760px;color:#7c8b6c}.vocab-tabs,.vocab-mode-tabs{display:flex;gap:10px;flex-wrap:wrap;margin:28px 0}.vocab-tabs button,.vocab-mode-tabs button{font-size:12px}.vocab-filter{display:flex;align-items:center;gap:15px;margin:25px 0;font-size:12px;color:#819373}.vocab-filter select{font:inherit;max-width:100%;padding:10px;border:1px solid #d9e5cf;background:#fff;color:#4b633c}.vocab-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:23px}.vocab-tile{border:1px solid #e2eada;background:white;padding:0 0 25px;text-align:left;color:inherit;overflow:hidden}.vocab-tile:hover{border-color:#80ab65}.vocab-tile-art svg{width:100%;display:block}.vocab-tile-tag{font-size:9px;letter-spacing:.7px;display:block;color:#8a9b7b;padding:22px 23px 10px}.vocab-tile>strong{font-size:25px;font-weight:400;display:block;padding:0 23px;line-height:1.6}.vocab-tile-meaning{display:block;padding:10px 23px 0;font-size:12px;color:#7a9168;line-height:1.8}.vocab-disclaimer{font-size:11px;color:#8b9980;line-height:1.9;margin-top:28px;max-width:800px}.vocab-detail{max-width:1050px}.vocab-detail>.eyebrow{margin-top:25px}.vocab-learning-card{display:grid;grid-template-columns:1fr 1.2fr;border:1px solid #e1ead7;background:#fff;min-height:380px}.vocab-main-art{background:#f2f6eb;display:flex;align-items:center;justify-content:center}.vocab-main-art svg{width:100%;max-width:420px}.vocab-card-body{padding:38px}.vocab-card-body h2{font-size:34px;font-weight:400;line-height:1.5;margin:20px 0}.vocab-translation{font-size:19px;color:#789c60;line-height:1.8}.vocab-example{padding:20px 0;border-top:1px solid #e4ebdd;margin-top:25px}.vocab-example strong{display:block;font-size:21px;font-weight:400;line-height:1.8}.vocab-example span{display:block;font-size:13px;color:#819373;margin:9px 0}.vocab-card-body .eyebrow{font-size:9px;letter-spacing:2px}.vocab-memory{margin-top:30px;background:#f8faf4;padding:25px}.vocab-memory summary{cursor:pointer;font-size:14px;color:#597944}.vocab-memory p{font-size:14px;color:#7a896e;line-height:1.9}.vocab-memory label{display:block;font-size:12px;color:#8a9b7b;margin-bottom:12px}.vocab-memory textarea{font:inherit;width:100%;min-height:90px;padding:14px;border:1px solid #d7e4ca;margin-bottom:15px;resize:vertical;background:white;font-size:14px}.vocab-memory #vocab-note-status{font-size:11px;margin-left:12px;color:#6b8c54}.vocab-skill-row{display:flex;flex-wrap:wrap;gap:20px;font-size:11px;line-height:1.8;color:#809570;margin-top:25px}.vocab-card-body input{width:100%;font:inherit;padding:16px;border:1px solid #d8e4cb;font-size:20px}.vocab-feedback:empty{display:none}.vocab-feedback{font-size:13px;line-height:1.9;margin-top:20px}.vocab-feedback .review-answer{font-size:22px}.vocab-choices{display:grid;gap:12px}.vocab-choice{display:flex;gap:15px;align-items:center;border:1px solid #dfe9d5;background:#fff;text-align:left;padding:8px;font:inherit;font-size:12px;line-height:1.7;color:#6d855a}.vocab-choice>span:first-child{width:80px;flex-shrink:0}.vocab-choice svg{display:block;width:80px}.vocab-choice:disabled{opacity:.5;cursor:default}.vocab-listen-symbol{font-size:100px;color:#9db583}.vocab-card-body #vocab-listen-status{font-size:12px;color:#8b9c7c;line-height:1.8}@media(max-width:800px){.vocab-grid{grid-template-columns:repeat(2,1fr)}.vocab-learning-card{grid-template-columns:1fr}.vocab-main-art{max-height:220px}.vocab-main-art svg{max-height:220px}.vocab-card-body{padding:28px}.vocab-card-body h2{font-size:28px}}@media(max-width:480px){.vocab-grid{grid-template-columns:1fr 1fr;gap:12px}.vocab-tile-tag{padding:15px 13px 8px;font-size:8px}.vocab-tile>strong{font-size:20px;padding:0 13px;overflow-wrap:anywhere}.vocab-tile-meaning{font-size:10px;padding:8px 13px 0}.vocab-tabs,.vocab-mode-tabs{gap:7px}.vocab-tabs button,.vocab-mode-tabs button{font-size:10px;padding:12px}.vocab-filter{display:block}.vocab-filter select{margin-top:10px;width:100%}.vocab-card-body{padding:24px 20px}.vocab-memory{padding:22px}.vocab-skill-row{gap:10px;font-size:10px}} /* Photographic vocabulary illustrations, generated for this course. */ .vocab-tile{border:1px solid #e8e7df;border-radius:8px;overflow:hidden;box-shadow:0 4px 18px #30392307;transition:transform .2s,box-shadow .2s}.vocab-tile:hover{transform:translateY(-3px);box-shadow:0 9px 26px #30392312;border-color:#c4d3b5}.vocab-grid{gap:24px}.vocab-photo{width:100%;aspect-ratio:3/2;background-size:cover;background-position:center;background-color:#f4f0e7}.asset-tea{background-image:url('assets/card-tea-v2.jpg')}.asset-coffee{background-image:url('assets/card-coffee-v2.jpg')}.asset-water{background-image:url('assets/card-water-v2.jpg')}.asset-hello{background-image:url('assets/card-hello-v2.jpg')}.asset-thanks{background-image:url('assets/card-thanks-v2.jpg')}.asset-please{background-image:url('assets/card-please-v2.jpg')}.asset-confused{background-image:url('assets/card-confused-v2.jpg')}.asset-repeat{background-image:url('assets/card-repeat-v2.jpg')}.asset-bill{background-image:url('assets/card-bill-v2.jpg')}.asset-city{background-image:url('assets/lesson-street.jpg')}.vocab-main-art{padding:0;background:#f4f0e7;overflow:hidden;max-height:none;min-height:360px;align-self:stretch}.vocab-main-art>.vocab-photo{height:100%;min-height:360px;aspect-ratio:auto}.vocab-learning-card{border-radius:8px;overflow:hidden;box-shadow:0 6px 30px #3543270a;border-color:#e3e8da}.vocab-count{width:100%;aspect-ratio:3/2;background:#f5f1e8;display:grid;grid-template-columns:repeat(var(--count-cols),minmax(0,1fr));gap:5px;align-content:center;padding:20px 15px}.count-fruit{display:block;width:100%;aspect-ratio:1;background:url('assets/card-count-v2.jpg') center/contain no-repeat;mix-blend-mode:multiply}.vocab-count:has(.count-fruit:only-child){padding:20% 30%}.vocab-tile-art{background:#f5f1e8}.vocab-main-art>.vocab-count{min-height:300px;height:100%;align-content:center;gap:10px;padding:35px 22px}.vocab-object-group{display:grid;grid-template-columns:repeat(var(--object-count),minmax(0,1fr));width:100%;aspect-ratio:3/2;gap:6px;padding:14px;background:#f6f2e9;align-items:center}.vocab-object-group>.vocab-photo{aspect-ratio:2/3;border-radius:4px;background-position:center}.vocab-main-art>.vocab-object-group{height:100%;min-height:360px}.vocab-choice{border-radius:5px;border-color:#e1e7d9;padding:8px;gap:15px}.vocab-choice>span:first-child{width:100px}.vocab-choice .vocab-photo,.vocab-choice .vocab-count,.vocab-choice .vocab-object-group{width:100px;min-height:0}.vocab-choice .vocab-count{padding:6px;gap:2px}.vocab-tile-tag{font-size:9px}.vocab-tile>strong{font-size:26px}.vocab-listen-symbol{background:linear-gradient(145deg,#eff4e8,#e0e9d5);border-radius:50%;width:145px;height:145px;text-align:center;line-height:145px;color:#749b57;font-size:66px}@media(max-width:800px){.vocab-main-art{height:300px;min-height:300px;max-height:300px}.vocab-main-art>.vocab-photo{min-height:300px}.vocab-main-art>.vocab-count,.vocab-main-art>.vocab-object-group{min-height:300px}.vocab-photo.asset-hello,.vocab-photo.asset-thanks,.vocab-photo.asset-confused,.vocab-photo.asset-repeat,.vocab-photo.asset-please{background-position:center 42%}}@media(max-width:480px){.vocab-grid{gap:14px}.vocab-tile>strong{font-size:21px}.vocab-main-art{height:250px;min-height:250px;max-height:250px}.vocab-main-art>.vocab-photo,.vocab-main-art>.vocab-count,.vocab-main-art>.vocab-object-group{min-height:250px}.vocab-count{padding:12px 8px;gap:2px}.vocab-object-group{padding:8px;gap:3px}.vocab-choice>span:first-child,.vocab-choice .vocab-photo,.vocab-choice .vocab-count{width:85px}} /* Contextual reading stories */ .lesson-story{background:#faf7ef;border-top:1px solid #e0dacc;margin-top:36px}.story-audio{display:block;font-size:15px;margin:24px 0;color:#596b59}.story-reference{padding:20px;background:#fff;border:1px solid #ddd8c9;margin-bottom:30px}.story-reference summary{cursor:pointer;font-weight:700}.story-paragraph{font-size:22px;line-height:2.2;margin:28px 0}.story-slot{display:inline-flex;align-items:center;gap:8px;max-width:100%;vertical-align:middle}.story-slot select{font:inherit;font-size:18px;max-width:100%;padding:10px 28px 10px 12px;border:0;border-bottom:2px solid #83966d;background:#eef0e3;color:#314530;border-radius:4px}.story-slot select.story-correct{opacity:1;color:#345d34;background:#e2eddc;-webkit-text-fill-color:#345d34}.story-feedback{display:block;font-size:14px;line-height:1.5;color:#61735a}.story-turn{border-top:1px solid #d8ddcf;padding-top:24px}.story-turn details{font-size:15px;cursor:pointer}.story-ending{border-top:1px solid #d8ddcf;padding-top:20px;margin-top:28px}.story-slot .sound[hidden]{display:none}@media(max-width:600px){.story-paragraph{font-size:19px}.story-slot{display:flex;margin-top:10px}.story-slot select{min-width:0;width:100%;font-size:16px}} .profile-panel{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:28px;background:#f2f0e6;border:1px solid #dedfce;border-radius:10px;margin:0 0 32px}.profile-panel h2{font-size:27px;margin:8px 0}.profile-panel p{margin:8px 0}.profile-panel button{flex-shrink:0}.profile-page{max-width:800px}.profile-page h1{font-size:42px}.profile-page form{background:#fff;padding:32px;border:1px solid #e0e4d8;border-radius:10px;margin:30px 0}.profile-page form>label,.profile-page #profile-family>label{display:block;font-weight:700;margin-bottom:24px}.profile-page label span,.profile-page legend span{font-weight:400;color:#71806f}.profile-page input:not([type=checkbox]),.profile-page select{display:block;width:100%;box-sizing:border-box;font:inherit;padding:13px;border:1px solid #c9d3c1;border-radius:5px;margin-top:9px;background:#fcfcf8}.profile-page fieldset{border:0;border-top:1px solid #e0e4d8;margin:26px 0;padding:20px 0 0}.profile-page legend{font-weight:700}.profile-check{display:block;padding:8px 0}.profile-page input[type=checkbox]{width:18px;height:18px;accent-color:#568b4d}.story-context{padding:18px;background:#eeebdf;border-radius:6px}@media(max-width:650px){.profile-panel{display:block}.profile-panel button{margin-top:12px}.profile-page form{padding:20px}.profile-page h1{font-size:32px}} .lesson-ending{background:#f0f3e8;margin:36px auto;border:1px solid #d8e1ce;border-radius:12px}.lesson-ending h2{font-size:36px}.lesson-ending h3{font-size:24px;margin:12px 0}.ending-words,.ending-next{padding:24px 0;border-top:1px solid #d3ddca;margin-top:26px}.lesson-ending .sub{font-size:15px}.lesson-ending progress{width:100%;height:7px;accent-color:#58864b;margin:20px 0}.word-session-prompt{font-size:28px!important}.lesson-ending input{box-sizing:border-box;width:100%;font:inherit;padding:16px;border:1px solid #bacbae;border-radius:5px;margin:18px 0}.lesson-ending #word-session-options{display:grid;gap:12px;margin:24px 0}.lesson-ending #word-session-model{font-size:25px;background:#fff;padding:18px;margin:16px 0}.lesson-ending #word-session-feedback{margin:24px 0}.lesson-ending #word-session-feedback strong{font-size:26px}.lesson-ending #word-session-exit,.lesson-ending #word-session-return{display:block;margin-top:20px}.lesson-ending [hidden]{display:none!important}@media(max-width:600px){.lesson-ending h2{font-size:29px}.lesson-ending h3{font-size:22px}} /* Separate consolidation from the next destination. */ .lesson-ending .ending-words{background:#fffdf7;border:1px solid #e1e4d7;border-radius:12px;padding:26px;margin-top:28px} .lesson-ending .ending-next{background:#d9e8d1;border:1px solid #adc69f;border-left:5px solid #628854;border-radius:12px;padding:26px;margin-top:32px;color:#253e2b} .lesson-ending .ending-next .eyebrow{color:#42613b} .lesson-ending .ending-next h3{color:#253e2b} .lesson-ending .ending-next p{color:#3b543d} .lesson-ending .ending-next .secondary{background:#f7fbf3;border-color:#7e9e70;color:#2c4b2b} @media(max-width:600px){.lesson-ending .ending-words,.lesson-ending .ending-next{padding:20px}} /* Original generated course imagery; stock photographs removed. */ .lesson-hero.lesson-theme-1{background-image:linear-gradient(90deg,#15291dcc,#15291d22),url('assets/lesson-street.jpg')} .lesson-photo.lesson-theme-1{background-image:url('assets/lesson-market.jpg')} .lesson-hero.lesson-theme-10{background-image:linear-gradient(90deg,#15291dcc,#15291d22),url('assets/card-count-v2.jpg')} .lesson-photo.lesson-theme-10{background-image:url('assets/card-count-v2.jpg')} .lesson-hero.lesson-theme-2{background-image:linear-gradient(90deg,#15291dcc,#15291d22),url('assets/card-tea-v2.jpg')} .lesson-photo.lesson-theme-2{background-image:url('assets/card-tea-v2.jpg')} .lesson-hero.lesson-theme-3{background-image:linear-gradient(90deg,#15291dcc,#15291d22),url('assets/lesson-market.jpg')} .lesson-photo.lesson-theme-3{background-image:url('assets/lesson-street.jpg')} .lesson-hero.lesson-theme-4{background-image:linear-gradient(90deg,#15291dcc,#15291d22),url('assets/lesson-meal.jpg')} .lesson-photo.lesson-theme-4{background-image:url('assets/lesson-meal.jpg')} .lesson-hero.lesson-theme-5{background-image:linear-gradient(90deg,#15291dcc,#15291d22),url('assets/card-coffee-v2.jpg')} .lesson-photo.lesson-theme-5{background-image:url('assets/card-coffee-v2.jpg')} .lesson-hero.lesson-theme-6{background-image:linear-gradient(90deg,#15291dcc,#15291d22),url('assets/card-bill-v2.jpg')} .lesson-photo.lesson-theme-6{background-image:url('assets/card-bill-v2.jpg')} .lesson-hero.lesson-theme-7{background-image:linear-gradient(90deg,#15291dcc,#15291d22),url('assets/direction-corner-v1.jpg')} .lesson-photo.lesson-theme-7{background-image:url('assets/lesson-market.jpg')} .lesson-hero.lesson-theme-8{background-image:linear-gradient(90deg,#15291dcc,#15291d22),url('assets/lesson-ferry.jpg')} .lesson-photo.lesson-theme-8{background-image:url('assets/lesson-ferry.jpg')} .lesson-hero.lesson-theme-9{background-image:linear-gradient(90deg,#15291dcc,#15291d22),url('assets/lesson-taxi.jpg')} .lesson-photo.lesson-theme-9{background-image:url('assets/lesson-taxi.jpg')} .scene{background-image:url('assets/lesson-market.jpg')} /* Lesson progress: explicit text and symbols alongside color. */ .lesson-card.lesson-unstarted{background:#faf8f0;border:1px solid #e4e2d6} .lesson-card.lesson-completed{background:#e5efdd;border:1px solid #b8cda9} .lesson-card.lesson-next{background:#fff;border:2px solid #56864b;box-shadow:0 0 0 4px #56864b0d} .lesson-card .lesson-status{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;width:fit-content;border-radius:20px;padding:6px 11px;font-size:11px;line-height:1.4;font-weight:700;margin-bottom:19px;letter-spacing:.1px;background:#efede4;color:#625f51} .lesson-completed .lesson-status{background:#c9dfbb;color:#2f5228} .lesson-next .lesson-status{background:#e6f0de;color:#355c2d} .lesson-card .lesson-status>span{font-size:16px;line-height:1} .lesson-card .number{display:block} .lesson-card .lesson-learning-evidence{display:block;font-size:11px;line-height:1.6;color:#506648;margin:0 0 16px} .lesson-card.lesson-completed:hover{background:#deebd4;border-color:#80a56b} .lesson-card.lesson-next:hover{border-color:#355f2c;background:#fafdf7} .lesson-card.lesson-unstarted:hover{border-color:#b2c39f;background:#f6f5ea} .lesson-completed .card-bottom .check,.lesson-next .card-bottom .check{color:#355c2d;font-weight:700} @media(max-width:590px){.lesson-card .lesson-status{margin-bottom:15px;font-size:11px}} .study-summary{display:flex;flex-wrap:wrap;align-items:center;gap:24px;background:#edf3e6;border:1px solid #d6e2cc;padding:22px 28px;border-radius:12px;margin:0 0 28px}.study-summary>div{flex:1;min-width:120px}.study-summary span,.progress-totals span{display:block;color:#61705c;font-size:12px;margin-bottom:9px}.study-summary strong{display:block;font-size:22px;color:#2c482c}.progress-totals{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:18px;margin:30px 0}.progress-totals>div{padding:24px;border:1px solid #dce5d3;background:#f5f7ef;border-radius:10px}.progress-totals strong{font-size:25px;color:#37522e}.activity-chart{padding:28px;background:#faf8f0;border:1px solid #e6e2d5;border-radius:12px;margin:35px 0}.activity-bars{display:grid;grid-template-columns:repeat(7,1fr);gap:12px;margin-top:30px}.activity-day{text-align:center;min-width:0}.activity-day>span{font-size:11px;display:block;min-height:34px}.activity-track{height:140px;display:flex;align-items:end;background:#eeeee4;border-radius:6px;overflow:hidden}.activity-track>div{width:100%;background:#6e965a;border-radius:6px 6px 0 0}.activity-day small{display:block;margin-top:12px;font-size:11px;color:#65715e}.progress-lesson{display:flex;justify-content:space-between;align-items:center;gap:20px;width:100%;text-align:left;padding:20px;border:1px solid #e2e7db;background:#fff;margin:12px 0;border-radius:8px;color:#30442f}.progress-lesson:hover{background:#f1f6ea}.progress-lesson small{display:block;margin-top:8px;color:#6b7764;font-size:12px}.progress-lesson>span:last-child{font-size:13px;white-space:nowrap}.progress-page .sub{font-size:13px;color:#69775f}@media(max-width:600px){.study-summary{padding:20px;gap:20px}.study-summary strong{font-size:19px}.activity-chart{padding:18px 12px}.activity-bars{gap:5px}.activity-day>span{font-size:9px}.activity-day small{font-size:9px}.progress-lesson{padding:15px;align-items:start}.progress-lesson>span:last-child{white-space:normal;min-width:65px}} /* Keep changing exercise cards independent of browser scroll anchors. */ .audio-exercise,.exercise,.cafe-trainer,#lesson-ending{overflow-anchor:none;scroll-margin-top:120px} .audio-exercise:focus,.exercise:focus,.cafe-trainer:focus,#lesson-ending:focus{outline:none} /* Listening is a bounded stage: actions stay visible, feedback replaces choices. */ #audio-exercise{display:grid;grid-template-rows:auto minmax(0,1fr) auto;height:min(520px,calc(100svh - var(--exercise-menu-height,80px) - 120px));min-height:260px;padding:0;margin-top:28px;border:1px solid #d5e1ca;border-radius:12px;overflow:hidden;background:#f7f9f2} #audio-exercise .audio-stage-header{padding:20px 24px 14px;border-bottom:1px solid #e0e8d7;background:#f1f5e9} #audio-exercise .audio-controls{margin:12px 0 0;gap:10px} #audio-exercise .audio-controls button{padding:11px 17px;font-size:14px;line-height:1.4} #audio-exercise .audio-stage-body{min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:16px 24px;scrollbar-gutter:stable} #audio-exercise .audio-status{font-size:14px;line-height:1.5;margin:0 0 12px} #audio-exercise .audio-options{gap:8px;margin:0 0 12px} #audio-exercise .audio-option{min-height:44px;padding:10px 14px;font-size:15px;line-height:1.4;border:1px solid #dce5d2;border-radius:6px} #audio-exercise #audio-reveal{font-size:13px;line-height:1.4;padding:7px 0} #audio-exercise .audio-transcript{font-size:24px;line-height:1.4;padding:10px 0 0} #audio-exercise .audio-stage-footer{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px 16px;padding:14px 24px;background:#e7efdd;border-top:1px solid #cedec0} #audio-exercise .audio-stage-footer .primary{padding:12px 18px;font-size:14px;line-height:1.4} #audio-exercise .audio-stage-footer small{font-size:11px;letter-spacing:0;color:#506144} #audio-exercise .audio-stage-footer .primary:disabled{opacity:.5;cursor:default} #audio-exercise .audio-result>span{display:block;color:#406a35;font-size:16px;font-weight:700} #audio-exercise .audio-result>strong{display:block;font-size:30px;line-height:1.4;color:#2d5027;margin:14px 0 8px} #audio-exercise .audio-result p{font-size:19px;line-height:1.5;margin:0 0 14px} #audio-exercise .audio-result small{display:block;font-size:12px;line-height:1.6;letter-spacing:0;margin:10px 0;color:#697360} #audio-exercise .audio-result-wrong>span{color:#916130} #audio-exercise .audio-stage-body>h3{font-size:25px;line-height:1.4;margin:12px 0} #audio-exercise .audio-stage-body>p{font-size:15px;line-height:1.7} @media(max-width:590px){#audio-exercise .audio-stage-header{padding:16px 16px 12px}#audio-exercise .audio-stage-body{padding:14px 16px}#audio-exercise .audio-stage-footer{padding:12px 16px}#audio-exercise .audio-stage-footer small{display:none}#audio-exercise .audio-stage-footer .primary{width:100%}#audio-exercise .audio-result>strong{font-size:25px}} #hint-text.letter-hint{font-size:22px;font-weight:600;line-height:1.6;color:#496c38;letter-spacing:.4px;margin:16px 0;overflow-wrap:anywhere}#hint-text.letter-hint:empty{display:none} .reading-hint{display:block;font:400 14px/1.6 Manrope,Arial,sans-serif;color:#718068;letter-spacing:.1px;text-transform:none;margin:4px 0 8px;overflow-wrap:anywhere}.word-table td>.reading-hint{font-size:14px;margin-top:7px}.example .reading-hint{font-size:18px;text-align:center;color:#738466}.lesson-hero .reading-hint{color:#e1ecd7}.story-paragraph .reading-hint,.story-turn p .reading-hint{display:inline;font-size:14px;margin:0 6px}.vocab-tile .reading-hint{padding:0 20px}.reading-guide{margin:25px 0;padding:20px;background:#f4f6ed;border:1px solid #dce4d2;border-radius:8px}.reading-guide summary{cursor:pointer;font-size:14px;font-weight:600;color:#4a673e}.reading-guide p{font-size:14px;line-height:1.8;color:#627157}.reading-guide a{color:#426b34}.audio-result .reading-hint{font-size:15px!important;margin:6px 0!important}.audio-stage-body .reading-hint{line-height:1.5}.story-slot>.reading-hint{font-size:13px} .reading-hint:empty{display:none} header nav{flex-wrap:wrap;column-gap:8px;row-gap:6px}header nav button{white-space:nowrap} .vocab-lesson-training{display:flex;align-items:center;justify-content:space-between;gap:24px;background:#edf3e5;border:1px solid #d4dfc9;border-radius:12px;padding:24px;margin:24px 0}.vocab-lesson-training h2{font-size:24px;margin:10px 0}.vocab-lesson-training p{font-size:13px;margin:8px 0;color:#63755a}.vocab-lesson-training button{flex-shrink:0}.vocab-scope{font-size:12px;color:#718068}.vocab-tabs{flex-wrap:wrap}@media(max-width:700px){.vocab-lesson-training{display:block;padding:20px}.vocab-lesson-training button{margin-top:16px;width:100%}} /* A word exercise occupies one bounded screen, including its actions. */ #lesson-ending.word-session-active{height:min(570px,calc(100svh - var(--exercise-menu-height,0px) - 110px));min-height:310px;max-width:900px;padding:20px 24px 0;margin:16px auto;display:grid;grid-template-rows:auto auto minmax(0,1fr) auto;gap:10px;text-align:left;overflow:hidden} #lesson-ending.word-session-active>.eyebrow{font-size:11px;line-height:1.5;letter-spacing:1px} #lesson-ending.word-session-active>progress{margin:0;height:5px;width:100%} #lesson-ending.word-session-active .word-session-stage{min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:0 0 10px} #lesson-ending.word-session-active h2{font-size:26px;line-height:1.3;margin:10px 0 14px;letter-spacing:-.5px} #lesson-ending.word-session-active .word-session-prompt{font-size:24px!important;line-height:1.4;margin:12px 0 18px} #lesson-ending.word-session-active input{padding:12px 14px;margin:0 0 12px;font-size:20px;line-height:1.4;min-height:48px} #lesson-ending.word-session-active .letters{display:flex;gap:7px;flex-wrap:wrap;margin:0 0 10px} #lesson-ending.word-session-active .letters button{min-width:34px;min-height:34px;padding:6px 10px;font-size:15px} #lesson-ending.word-session-active #word-session-options{margin:12px 0;gap:8px} #lesson-ending.word-session-active #word-session-options button{padding:11px 14px;font-size:15px;line-height:1.5;text-align:left} #lesson-ending.word-session-active #word-session-feedback{margin:0} #lesson-ending.word-session-active #word-session-feedback p{font-size:16px;line-height:1.5;margin:10px 0} #lesson-ending.word-session-active #word-session-feedback strong{font-size:28px;line-height:1.4} #lesson-ending.word-session-active #word-session-feedback .reading-hint{font-size:14px;line-height:1.5;margin:6px 0} #lesson-ending.word-session-active #word-session-model{font-size:21px;line-height:1.4;padding:10px 12px;margin:10px 0} #lesson-ending.word-session-active #word-session-model+.reading-hint{font-size:13px;margin:2px 0} #lesson-ending.word-session-active .word-session-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:64px;padding:12px 0;border-top:1px solid #ccd9bf;background:#f0f3e8} #lesson-ending.word-session-active .word-session-footer .primary{padding:12px 22px;font-size:14px;line-height:1.4} #lesson-ending.word-session-active #word-session-exit{display:inline-block;margin:0;padding:8px 0;font-size:12px;line-height:1.4} @media(max-width:600px){#lesson-ending.word-session-active{padding:16px 16px 0;margin:12px auto}#lesson-ending.word-session-active h2{font-size:22px}#lesson-ending.word-session-active .word-session-prompt{font-size:21px!important}#lesson-ending.word-session-active .word-session-footer{gap:8px}#lesson-ending.word-session-active .word-session-footer .primary{padding:11px 16px}} /* First-lesson conversation keeps the task and controls together. */ .first-dialogue-card{border:1px solid #dce5d4;background:#f6f8f1;padding:clamp(16px,3vw,28px);scroll-margin-top:100px} .first-dialogue-card h3{font-size:clamp(21px,2.5vw,28px);margin:16px 0} .first-dialogue-card p{margin:12px 0;font-size:16px;line-height:1.55} .first-dialogue-card input{width:100%;font-size:20px;padding:12px;border:1px solid #cddbc4;background:white;border-radius:4px;box-sizing:border-box} .first-dialogue-card .feedback{padding:16px;margin:14px 0} .first-dialogue-card .exercise-actions{gap:10px;margin:12px 0;flex-wrap:wrap} .first-dialogue-card .letters{margin:10px 0} .today-page{padding-top:44px;padding-bottom:50px}.today-page h1{font-size:clamp(30px,4vw,48px);max-width:900px}.today-options{display:grid;grid-template-columns:1.25fr 1fr;gap:24px;margin:28px 0}.today-options section{padding:clamp(20px,3vw,34px);border-radius:12px}.today-review{background:#f3f5e9;border:1px solid #dbe3cc}.today-new{background:#e1eee5;border:1px solid #bbd4c4}.today-options h2{font-size:clamp(24px,2.5vw,32px);line-height:1.25;margin:16px 0}.today-options p{font-size:16px;line-height:1.6}.today-topics{border-left:3px solid #8ba46e;padding-left:14px}.today-options details{margin:20px 0}.today-options details ul{max-height:240px;overflow:auto;padding-left:22px}.today-options li{margin:10px 0}.today-options .exercise-actions{display:flex;flex-wrap:wrap;gap:12px}.today-report{padding:18px 24px;background:#f7f8f4;border:1px solid #e1e7d9;border-radius:8px}.today-report p{margin-bottom:0}header nav{flex-wrap:wrap}@media(max-width:760px){.today-options{grid-template-columns:1fr}.today-page{padding-top:24px}} .review-focus .guided-field{width:100%;max-width:760px}.review-focus #srs-answer{width:100%;box-sizing:border-box;background:transparent;position:relative;font:inherit;font-size:22px;padding:14px 16px;border:1px solid #cddbc4;min-height:58px}.review-focus #srs-ghost{font:inherit;font-size:22px;padding:14px 16px;line-height:normal}.review-focus #srs-model-note{min-height:1.5em;font-size:14px;line-height:1.5}.review-focus #srs-correction-status{font-size:15px;line-height:1.5} .review-later{margin:28px 0;max-width:900px;padding:18px 24px;background:#e5efe8;border:1px solid #bfd4c5;border-radius:12px;font-size:16px;color:#294c38} .review-later summary{font-size:21px;font-weight:700;color:#244b35;padding:8px 0;line-height:1.5} .review-later-count{display:inline-block;margin-left:10px;padding:2px 12px;border-radius:20px;background:#326345;color:white;font-size:21px;font-weight:700} .review-later>div{border-color:#cbdcd0}.review-later time{color:#3e604a;font-size:16px} @media(max-width:590px){.review-later{padding:16px}.review-later summary,.review-later-count{font-size:19px}} .reading-page{padding-top:28px;padding-bottom:50px}.reading-page h1{font-size:clamp(32px,4vw,50px)} .reading-start-note,.reading-entry{background:#e7efe4;border:1px solid #cbdcc3;border-radius:12px;padding:20px 24px;margin:24px 0} .reading-entry{display:flex;align-items:center;justify-content:space-between;gap:20px}.reading-entry p{margin:8px 0 0;font-size:15px} .reading-letter-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin:24px 0} .reading-letter-card{padding:24px;background:#fafbf7;border:1px solid #dce5d4;border-radius:12px} .reading-letter-card h2{font-size:34px;color:#376444;margin:0 0 12px}.reading-letter-card p{font-size:16px;line-height:1.6}.reading-letter-card strong{font-size:24px} .reading-letter-card .exercise-actions{display:flex;gap:10px;flex-wrap:wrap;margin:16px 0} .reading-practice{margin:36px 0}#reading-trainer{padding:24px;background:#f0f4e8;border:1px solid #d4dfc8;border-radius:12px;max-width:800px} #reading-trainer h3{font-size:26px;margin:16px 0}#reading-trainer p{font-size:16px;line-height:1.6} .reading-choices{display:flex;gap:16px;margin:20px 0}.reading-choices button{font-size:26px;min-width:64px} #reading-word{font-size:28px;color:#315b3d;margin:14px 0} @media(max-width:650px){.reading-letter-grid{grid-template-columns:1fr}.reading-entry{align-items:flex-start;flex-direction:column}} /* Written practice: fixed action row, result replaces entry controls. */ #exercise.exercise{height:min(570px,calc(100svh - var(--exercise-menu-height,80px) - 90px));min-height:310px;padding:20px 24px;display:flex;flex-direction:column;gap:10px;overflow:hidden} #exercise>small{font-size:11px;line-height:1.4;flex:none} #exercise .progress-line{margin:0;height:3px;flex:none} #exercise>h3{font-size:clamp(22px,2.7vw,30px);line-height:1.3;margin:6px 0;flex:none} #exercise>.task-guide{font-size:14px;line-height:1.45;margin:0;flex:none} #exercise #answer-form{min-height:0;flex:1;display:flex;flex-direction:column;gap:8px;overflow:auto} #exercise #answer-form>.guided-field,#exercise #answer-form>.input-support,#exercise #answer-form>.letters,#exercise .sentence-slot,#exercise .word-bank{flex:none} #exercise #answer-form>.exercise-actions{position:sticky;bottom:0;flex:none;margin:0;margin-top:auto;padding:10px 0 0;background:white;display:flex;gap:10px;flex-wrap:wrap;z-index:2} #exercise .guided-field{margin:0} #exercise #answer,#exercise #ghost{font-size:23px;line-height:30px;padding:12px 16px} #exercise #answer{height:56px;min-height:56px;width:100%} #exercise #ghost{inset:0;border:1px solid transparent;white-space:pre;overflow:hidden;pointer-events:none} #exercise .input-support{font-size:13px;line-height:1.4;margin:0} #exercise .letters{margin:0;gap:7px} #exercise .letters button{padding:7px 10px;min-height:34px} #exercise #feedback:empty,#exercise #hint-text:empty{display:none} #exercise #feedback{font-size:15px;line-height:1.5;padding:12px 16px;margin:0} #exercise .result-audio{margin:10px 0 0;padding:10px 0 0} #exercise .result-audio>span{font-size:26px} #exercise .result-audio .reading-hint{font-size:14px;margin:4px 0} #exercise .result-audio button{padding:9px 12px} #exercise.is-result>.task-guide,#exercise.is-result #answer-form>.guided-field,#exercise.is-result #answer-form>.input-support,#exercise.is-result #answer-form>.letters,#exercise.is-result .sentence-slot,#exercise.is-result .word-bank,#exercise.is-result #hint-text,#exercise.is-result #hint,#exercise.is-result #show-answer{display:none!important} #exercise.is-result #feedback{flex:1;min-height:0;overflow:auto} #exercise:has(.completion){height:auto;min-height:0;overflow:visible;display:block} @media(max-height:650px){#exercise.exercise{padding:14px 18px;gap:7px}#exercise>h3{font-size:22px}#exercise .primary,#exercise .secondary{padding:10px 12px}} @media(max-width:520px){#exercise.exercise{padding:14px;min-height:280px}#exercise #answer-form>.exercise-actions{gap:7px}#exercise .primary,#exercise .secondary{font-size:12px;padding:10px}} .story-conditions{display:flex;flex-wrap:wrap;gap:14px;align-items:center;padding:18px;background:#e5efe7;border:1px solid #c8d9cc;border-radius:10px;margin:20px 0} .story-conditions label{font-size:16px;display:flex;align-items:center;gap:12px}.story-conditions select{font:inherit;padding:10px;border:1px solid #a9c4af;background:white;border-radius:4px} .story-conditions p{flex-basis:100%;font-size:14px!important;margin:0!important} .lesson-story .story-context{font-size:17px;line-height:1.5;padding:16px} .lesson-story .story-paragraph{font-size:19px;line-height:1.7;margin:20px 0;text-align:left} .lesson-story .trainer-note{font-size:14px;line-height:1.5} .guided-field:has(.ghost-layer:not([hidden])) input::placeholder{color:transparent!important;opacity:0} .cafe-story-stage{max-width:850px;padding:20px;background:#f1f5eb;border:1px solid #d2dfc8;border-radius:12px;margin:20px 0;scroll-margin-top:100px} .cafe-story-stage h3{font-size:23px;line-height:1.4;margin:14px 0} .waiter-turn{padding:14px;background:white;border-left:3px solid #8ba785;margin:12px 0}.waiter-turn>span{display:block;font-size:13px;color:#61745f}.waiter-turn strong{font-size:24px} .cafe-story-options{display:flex;flex-wrap:wrap;gap:10px}.cafe-story-options button{font-size:18px;text-align:left;padding:12px 16px}.cafe-story-options .reading-hint{display:none} .cafe-story-stage p{font-size:16px!important;line-height:1.5} .asset-accepted{background-image:url('assets/card-cafe-accepted.jpg')} .asset-no-tea{background-image:url('assets/card-cafe-no-tea.jpg')} .asset-no-coffee{background-image:url('assets/card-cafe-no-coffee.jpg')} .asset-clarify{background-image:url('assets/card-cafe-clarify.jpg')} .cafe-dialogue-illustration{margin:22px 0 28px;border-radius:12px;overflow:hidden;background:#f3eee4} .cafe-dialogue-illustration>.vocab-photo{width:100%;height:clamp(210px,30vw,340px);aspect-ratio:auto;background-position:center 48%;background-size:cover} .cafe-dialogue-illustration figcaption{padding:12px 18px;font-size:14px;line-height:1.5;color:#52644f} #story .cafe-story-intro{display:grid;grid-template-columns:minmax(0,1fr) 260px;align-items:center;gap:28px;text-align:left;margin:0 0 22px} #story .cafe-story-intro h2{font-size:clamp(25px,3vw,34px);line-height:1.18;letter-spacing:-.7px;margin:10px 0} #story .cafe-story-intro p{font-size:16px;line-height:1.6;margin:0;max-width:480px;color:#64715f} #story .cafe-dialogue-illustration{margin:0;border-radius:10px;background:transparent;width:100%;overflow:hidden} #story .cafe-dialogue-illustration>.vocab-photo{width:100%;height:auto;aspect-ratio:3/2;background-size:contain;background-repeat:no-repeat;background-position:center;min-height:0} @media(max-width:700px){#story .cafe-story-intro{grid-template-columns:minmax(0,1fr) 190px;gap:18px}} @media(max-width:480px){#story .cafe-story-intro{grid-template-columns:1fr}#story .cafe-dialogue-illustration{width:210px}#story .cafe-story-intro h2{font-size:27px}} .card-study-choice{display:flex;align-items:center;flex-wrap:wrap;gap:14px;margin:18px 0;padding:16px;background:#edf3e8;border-radius:8px} .selection-related{display:flex;gap:12px;align-items:center;padding:18px;background:#e4eee5;border-radius:8px;font-size:16px} .selection-list{display:grid;gap:8px;margin:20px 0}.selection-list>label{display:flex;align-items:center;gap:16px;padding:14px;background:#f7f9f3;border:1px solid #dce6d4;border-radius:6px;cursor:pointer}.selection-list input,.selection-related input{width:22px;height:22px;flex:none;accent-color:#538d51}.selection-list span{flex:1}.selection-list b{font-size:18px}.selection-list small{display:block;font-size:14px;margin-top:4px;color:#687863}.selection-list em{font-size:13px;font-style:normal;color:#4a6e46} #story .cafe-story-intro{grid-template-columns:1fr} .cafe-dialogue-workspace{display:grid;grid-template-columns:210px minmax(0,1fr);align-items:start;gap:22px;margin:22px 0;text-align:left} .cafe-dialogue-picture{margin:0;padding:0;border-radius:10px;overflow:hidden;background:#eee9df} .cafe-dialogue-picture>.vocab-photo{width:100%;height:auto;min-height:0;aspect-ratio:3/2;background-size:contain;background-position:center;background-repeat:no-repeat} .cafe-dialogue-picture>span{display:block;padding:10px 12px;font-size:13px;line-height:1.5;color:#5d6d58} .cafe-dialogue-workspace>.cafe-story-stage,.cafe-dialogue-workspace>.cafe-trainer{width:100%;min-width:0;margin:0} @media(max-width:700px){.cafe-dialogue-workspace{grid-template-columns:150px minmax(0,1fr);gap:14px}} @media(max-width:520px){.cafe-dialogue-workspace{grid-template-columns:1fr}.cafe-dialogue-picture{width:170px}.cafe-dialogue-picture>span{display:none}} /* A single dialogue column, with a substantial image inside the waiter message. */ .cafe-dialogue-workspace{display:block;margin:18px 0;text-align:left} #cafe-trainer,#cafe-story-stage{max-width:860px;margin:0 auto;padding:20px;border:1px solid #dce5d4;border-radius:12px;background:#f7f9f2} #cafe-trainer .chat-line{padding:14px 18px;margin:12px 0;border-radius:8px} #cafe-trainer .chat-line.mine{background:#eaf2e2;border:0} #cafe-trainer .chat-line>strong{font-size:25px;line-height:1.4} #cafe-trainer .chat-line p{font-size:15px;line-height:1.5;margin:6px 0} #cafe-trainer .reading-hint{font-size:14px;line-height:1.45;margin:4px 0} #cafe-trainer .waiter-message,#cafe-story-stage .waiter-message{display:grid;grid-template-columns:minmax(240px,42%) minmax(0,1fr);gap:24px;align-items:center;background:white;border:1px solid #e4e9de;border-radius:10px;padding:14px;margin:12px 0} .waiter-message>.waiter-portrait{width:100%;height:auto;min-height:0;aspect-ratio:3/2;background-size:contain;background-position:center;background-repeat:no-repeat;border-radius:8px} .waiter-message-body{min-width:0;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:6px} .waiter-message-body>span{display:block;font-size:13px;color:#708169;margin:0;letter-spacing:.4px} #cafe-trainer .waiter-message-body>strong,#cafe-story-stage .waiter-message-body>strong{display:block;font-size:clamp(24px,2.8vw,32px);line-height:1.3;margin:0} #cafe-trainer .waiter-message-body .reading-hint,#cafe-story-stage .waiter-message-body .reading-hint{font-size:15px;margin:0;line-height:1.45} #cafe-trainer .waiter-message-body>button{margin:2px 0;padding:9px 12px} .waiter-message-body>details{margin:0;font-size:15px;line-height:1.4} #cafe-trainer .repair-row{margin:12px 0;gap:12px;display:flex;align-items:center;flex-wrap:wrap} #cafe-trainer h3,#cafe-story-stage h3{font-size:22px;line-height:1.35;margin:12px 0} #cafe-trainer .cafe-options{display:flex;gap:10px;flex-wrap:wrap;margin:10px 0} #cafe-trainer .cafe-options>button{padding:11px 14px;font-size:15px} #cafe-trainer .cafe-options .chat-line{width:100%;margin:0} #cafe-trainer #cafe-feedback:empty,#cafe-story-stage #cafe-story-feedback:empty{display:none} #cafe-trainer #cafe-feedback{font-size:14px;line-height:1.5;margin:10px 0 0} #story:has(#cafe-story-stage){padding-top:32px;padding-bottom:28px} #story:has(#cafe-story-stage)>.trainer-note{margin:14px 0 0} @media(max-width:700px){#cafe-trainer .waiter-message,#cafe-story-stage .waiter-message{grid-template-columns:minmax(170px,42%) minmax(0,1fr);gap:18px}} @media(max-width:480px){#cafe-trainer,#cafe-story-stage{padding:14px}#cafe-trainer .waiter-message,#cafe-story-stage .waiter-message{grid-template-columns:1fr;gap:14px;padding:14px}.waiter-message>.waiter-portrait{width:100%;max-width:320px;justify-self:center}.waiter-message-body{width:100%}#cafe-trainer .waiter-message-body>strong,#cafe-story-stage .waiter-message-body>strong{font-size:24px}} /* Shared illustration layout for current and future practice scenes. */ .illustrated-practice{display:grid;grid-template-columns:minmax(240px,42%) minmax(0,1fr);gap:24px;align-items:center;background:white;border:1px solid #e4e9de;border-radius:10px;padding:14px;margin:14px 0;text-align:left} .illustrated-practice>.practice-scene-image{width:100%;height:auto;min-height:0;aspect-ratio:3/2;background-size:contain;background-position:center;background-repeat:no-repeat;border-radius:8px} .practice-scene-copy{min-width:0} #first-dialogue-card .practice-scene-copy h3{font-size:clamp(23px,2.7vw,30px);line-height:1.35;margin:0} #story .practice-scene-copy .story-paragraph{font-size:19px;line-height:1.6;margin:0} @media(max-width:700px){.illustrated-practice{grid-template-columns:minmax(170px,42%) minmax(0,1fr);gap:18px}} @media(max-width:480px){.illustrated-practice{grid-template-columns:1fr;gap:14px}.illustrated-practice>.practice-scene-image{max-width:320px;justify-self:center}} .dialogue-actions{display:flex;align-items:center;justify-content:flex-end;gap:12px;flex-wrap:wrap;position:sticky;bottom:0;padding:12px 0 0;margin-top:14px;background:#f7f9f2;z-index:2} .dialogue-actions>span{margin-right:auto;font-size:13px;line-height:1.45;color:#64735c;max-width:340px} .dialogue-help{margin:12px 0;font-size:14px}.dialogue-help summary{cursor:pointer;color:#426943;padding:8px 0}.dialogue-help .exercise-actions{display:flex;flex-wrap:wrap;gap:8px} .order-reminder{font-size:15px;line-height:1.5;padding:10px 14px;background:#eaf2e2;border-radius:6px;margin:10px 0} #cafe-story-answer{width:100%;min-height:50px;font-size:21px;padding:12px 14px;border:1px solid #c9d8c0;border-radius:5px;box-sizing:border-box;background:white} #cafe-story-stage .letters{margin:10px 0;gap:7px}#cafe-story-stage .letters button{padding:6px 10px} #cafe-story-stage [hidden],#cafe-trainer [hidden]{display:none!important} .dialogue-mode-choice{display:flex;gap:12px;align-items:center;font-size:15px;margin:14px 0;flex-wrap:wrap}.dialogue-mode-choice select{font:inherit;padding:9px;border:1px solid #bdd0b6;background:white;border-radius:4px} .dialogue-log{padding:10px 0;border-bottom:1px solid #dce4d4}.dialogue-log p{margin:4px 0} #cafe-story-stage #cafe-story-feedback>strong{font-size:25px} #cafe-trainer:has(>.dialogue-content),#cafe-story-stage:has(>.dialogue-content){height:min(600px,calc(100svh - var(--exercise-menu-height,80px) - 90px));min-height:340px;display:flex;flex-direction:column;overflow:hidden;gap:8px} .dialogue-content{min-height:0;flex:1;overflow:auto;overscroll-behavior:contain;padding-right:4px} #cafe-trainer>.dialogue-actions,#cafe-story-stage>.dialogue-actions{flex:none;margin:0;padding-top:10px;border-top:1px solid #dde5d5;position:static} #cafe-trainer>.dialogue-actions button,#cafe-story-stage>.dialogue-actions button{min-height:44px} #cafe-story-feedback p{margin:6px 0} .lesson-word-toolbar{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:22px 0} .lesson-word-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin:24px 0} .lesson-word-card{display:grid;grid-template-columns:42% minmax(0,1fr);gap:16px;align-items:center;padding:14px;background:#fafbf6;border:1px solid #dce5d4;border-radius:12px;text-align:left} .lesson-word-card[hidden],.lesson-word-card [hidden]{display:none!important} .lesson-word-art{min-width:0;border-radius:9px;overflow:hidden;background:#f2eee5} .lesson-word-art>.vocab-photo{aspect-ratio:3/2;background-size:contain;background-repeat:no-repeat;background-position:center} .lesson-word-art>.vocab-object-group,.lesson-word-art>.vocab-count{aspect-ratio:3/2;padding:8px;gap:3px} .lesson-word-copy{min-width:0}.lesson-word-label{display:block;font-size:10px;line-height:1.5;color:#7b896e;margin-bottom:8px} .lesson-word-target>strong{display:block;font-size:clamp(20px,2vw,26px);line-height:1.25;overflow-wrap:anywhere} .lesson-word-target .reading-hint{font-size:13px;margin:5px 0} .lesson-word-meaning{font-size:15px!important;line-height:1.5!important;margin:8px 0!important;color:#43583e} .lesson-word-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:12px} .lesson-word-actions .secondary{padding:9px 11px;font-size:12px}.lesson-word-actions .text-button{font-size:12px} .lesson-word-status,.lesson-word-prompt{font-size:12px!important;line-height:1.5!important;color:#718168;margin:8px 0 0!important}.lesson-word-status:empty{display:none} @media(max-width:1000px){.lesson-word-grid{grid-template-columns:1fr}.lesson-word-card{grid-template-columns:minmax(210px,42%) minmax(0,1fr)}} @media(max-width:520px){.lesson-word-card{grid-template-columns:1fr}.lesson-word-art{max-width:320px;width:100%;justify-self:center}.lesson-word-target>strong{font-size:25px}} /* Readable Russian translations across lesson and vocabulary cards. */ .lesson-word-meaning,.vocab-tile-meaning,.vocab-translation{font-size:clamp(20px,1.8vw,24px)!important;font-weight:700;line-height:1.45!important;color:#2e7036!important;overflow-wrap:break-word} /* Compact configuration shared by all variable stories. */ .story-settings{margin:8px 0 14px} .story-settings>summary{cursor:pointer;color:#37653d;font-size:15px;padding:8px 0} .story-settings .story-conditions{margin:8px 0;padding:14px;background:#f1f5ed;gap:12px;text-align:left} .story-settings .story-conditions p{color:#53634e;font-size:13px!important} .story-toolbar{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:8px 20px;margin:8px 0 16px} .story-toolbar>.story-settings{margin:0;max-width:100%} .dialogue-mode-toolbar{display:flex;flex-direction:column;gap:5px} .dialogue-mode-switch{display:inline-flex;gap:4px;padding:4px;background:#edf1e8;border:1px solid #d5dfcd;border-radius:10px} .dialogue-mode-switch button{font:inherit;font-size:15px;padding:10px 16px;border:0;border-radius:7px;color:#4c6047;background:transparent;min-height:44px;cursor:pointer} .dialogue-mode-switch button[aria-pressed="true"]{background:#fff;color:#285b30;font-weight:700;box-shadow:0 1px 4px #213b1920} .mode-restart-note{font-size:12px;color:#63715b} #story>.story-context{background:transparent;text-align:left;border:0;padding:0;margin:8px 0 12px;font-size:19px;line-height:1.5;color:#42523b} #story .cafe-story-intro h2{margin:8px 0 12px} #story>.story-reference{margin:14px 0;padding:12px 16px;font-size:15px;text-align:left} #story .cafe-dialogue-workspace{margin-top:8px} #cafe-story-mode[hidden]{display:none!important} @media(max-width:600px){.story-toolbar{display:block}.story-toolbar>.story-settings{margin-top:8px}.dialogue-mode-switch{display:flex}.dialogue-mode-switch button{flex:1;padding:10px 12px}.story-settings .story-conditions label{flex-wrap:wrap}.story-settings select{max-width:100%}} .word-variants{font-size:13px;line-height:1.5;color:#55704d;margin:8px 0}.word-variants summary{cursor:pointer;padding:5px 0}.word-variants p{font-size:15px!important;margin:5px 0!important} /* Content must never be clipped behind a trainer footer. Use document scrolling when text, reading aids or keyboard reduce the space. */ #cafe-trainer:has(>.dialogue-content),#cafe-story-stage:has(>.dialogue-content), #audio-exercise,#lesson-ending.word-session-active,#exercise.exercise{ height:auto;min-height:0;max-height:none;overflow:visible; } .dialogue-content,#audio-exercise .audio-stage-body, #lesson-ending.word-session-active .word-session-stage, #exercise #answer-form,#exercise.is-result #feedback{ flex:0 0 auto;min-height:0;max-height:none;overflow:visible;overscroll-behavior:auto; } #audio-exercise{grid-template-rows:auto auto auto} #lesson-ending.word-session-active{grid-template-rows:auto auto auto auto} .dialogue-actions,#cafe-trainer>.dialogue-actions,#cafe-story-stage>.dialogue-actions{ position:static;flex-shrink:0;clear:both;margin-top:14px; } .dialogue-content,#exercise #feedback,.word-session-stage,.audio-stage-body{overflow-wrap:anywhere} .dialogue-actions button,.exercise-actions button{white-space:normal;max-width:100%} #cafe-story-stage.is-answered .dialogue-help{display:none} #cafe-story-feedback:empty{display:none} #cafe-story-feedback{display:block;line-height:1.5} #cafe-story-stage.is-answered #cafe-story-feedback{padding:12px 0} /* Small supporting travel-priority marks; avoid competing with the word. */ .word-priority{display:flex;align-items:center;gap:6px;min-height:26px;margin:0 0 5px;font-size:11px;line-height:1.3;font-weight:400;color:#63705d;letter-spacing:0;text-transform:none} .priority-label{display:inline-flex;align-items:center;gap:5px} .priority-dot{width:6px;height:6px;border-radius:50%;display:inline-block;flex:none;background:#9a9e94} .priority-core .priority-dot{background:#568453} .priority-context .priority-dot{background:#b69647} .priority-extra .priority-dot{background:#92998b} .word-priority .priority-star{font:inherit;font-size:18px;line-height:1;display:inline-flex;align-items:center;justify-content:center;min-width:30px;min-height:30px;padding:0;border:0;background:transparent;color:#7e866f;cursor:pointer;border-radius:5px} .word-priority .priority-star[aria-pressed="true"],.priority-star-mark{color:#94752d} .priority-star:focus-visible{outline:2px solid #47743e;outline-offset:2px} .vocab-tile>.word-priority{margin:0;padding:0 23px 5px} .lesson-word-label:empty{display:none} .vocab-card-body>.word-priority{margin-bottom:10px} @media(pointer:coarse){.word-priority .priority-star{min-width:44px;min-height:44px;margin:-7px 0}} @media(max-width:480px){.vocab-tile>.word-priority{padding:0 13px 5px;font-size:10px}} .history-page{max-width:900px;padding-bottom:50px}.history-page h1{font-size:clamp(30px,4vw,44px)}.history-tabs{display:flex;gap:10px;flex-wrap:wrap;margin:24px 0}.history-intro,.history-note{font-size:15px;line-height:1.7;color:#62715a}.history-entry{border:1px solid #dce5d4;background:#fafbf7;border-radius:12px;padding:24px;margin:18px 0}.history-entry h2{font-size:22px;margin:12px 0}.history-entry p,.history-entry li{font-size:16px;line-height:1.6}.history-meta{display:flex;gap:20px;flex-wrap:wrap;font-size:13px;color:#57704b}.plan-status{font-size:12px;color:#46673e;background:#e8efdf;padding:4px 9px;border-radius:5px} /* Original illustrations for Tuvalet nerede? Full 3:2 scenes, no face cropping. */ .asset-location-ask{background-image:url('assets/lesson-location-ask-v1.jpg')} .asset-location-toilet{background-image:url('assets/lesson-location-toilet-v1.jpg')} .asset-location-doors{background-image:url('assets/lesson-location-doors-v1.jpg')} .vocab-photo.asset-location-ask,.vocab-photo.asset-location-toilet,.vocab-photo.asset-location-doors{background-size:contain;background-position:center;background-repeat:no-repeat} .lesson-hero.lesson-theme-3{background-image:linear-gradient(90deg,#15291dcc,#15291d22),url('assets/lesson-location-ask-v1.jpg')} .lesson-photo.lesson-theme-3{background-image:url('assets/lesson-location-doors-v1.jpg');background-size:contain;background-position:center;background-repeat:no-repeat;background-color:#f5f1e8} /* Individual vocabulary subjects for lesson four. */ .vocab-photo.asset-location-pharmacy{background-image:url('assets/card-location-pharmacy-v1.jpg');background-size:contain;background-position:center;background-repeat:no-repeat} .vocab-photo.asset-location-hotel{background-image:url('assets/card-location-hotel-v1.jpg');background-size:contain;background-position:center;background-repeat:no-repeat} .vocab-photo.asset-location-bus-stop{background-image:url('assets/card-location-bus-stop-v1.jpg');background-size:contain;background-position:center;background-repeat:no-repeat} .vocab-photo.asset-location-entrance{background-image:url('assets/card-location-entrance-v1.jpg');background-size:contain;background-position:center;background-repeat:no-repeat} .vocab-photo.asset-location-exit{background-image:url('assets/card-location-exit-v1.jpg');background-size:contain;background-position:center;background-repeat:no-repeat} #location-meaning-stage{margin-top:18px}#location-meaning-stage .practice-scene-copy>strong{display:block;font-size:28px;line-height:1.4;margin:8px 0}#location-meaning-stage [hidden]{display:none!important}#location-meaning-stage [role="status"]{margin:14px 0;font-size:16px} .pharmacy-options{display:grid;gap:10px;margin:16px 0}.pharmacy-options button{text-align:left;white-space:normal;line-height:1.5;min-height:48px}.pharmacy-narrative{padding:16px;background:#f1f5eb;border-radius:8px;line-height:1.8;margin-top:16px}#pharmacy-story-stage{margin-top:22px}#pharmacy-story-stage input{width:100%;font:inherit;font-size:21px;padding:12px;border:1px solid #c9d8c0}#pharmacy-feedback,#pharmacy-recall-feedback{line-height:1.7;margin:14px 0}#pharmacy-feedback>strong,#pharmacy-recall-feedback>strong{font-size:24px;color:#346d36}#pharmacy-story-stage [hidden]{display:none!important} .pharmacy-question{padding:18px 0;border-bottom:1px solid #dce5d4}.pharmacy-scene-heading{margin-top:30px!important;font-size:25px!important}.pharmacy-scene-intro{line-height:1.8}.pharmacy-question h3{font-size:20px}.pharmacy-story-progress{font-size:18px;font-weight:700;color:#386d38;margin:24px 0} .learning-core-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.learning-core-grid>div{border:1px solid #dce5d4;border-radius:10px;padding:18px;background:#f9fbf5}.learning-core-grid h3{font-size:20px}.learning-core-grid p{font-size:15px;line-height:1.6}.learning-example{display:block;font-size:16px;margin:7px 0;color:#3b6536}@media(max-width:760px){.learning-core-grid{grid-template-columns:1fr}} .pharmacy-scene-nav{display:flex;gap:10px 18px;flex-wrap:wrap;align-items:center;margin:22px 0;padding:12px 0;border-top:1px solid #dce5d4;border-bottom:1px solid #dce5d4}.pharmacy-scene-nav a{font-size:14px;color:#3f6b38}.pharmacy-question{scroll-margin-top:100px}.pharmacy-preparation{margin:22px 0}.pharmacy-preparation .rule{padding:16px;margin:14px 0}.pharmacy-preparation p{font-size:16px;line-height:1.6} /* Lesson 5 uses shared illustrated practice, natural document flow and full-size assets. */ .asset-menu-soup{background-image:url('assets/menu-soup-v1.jpg')} .asset-menu-salad{background-image:url('assets/menu-salad-v1.jpg')} .asset-menu-chicken{background-image:url('assets/menu-chicken-v1.jpg')} .asset-menu-rice{background-image:url('assets/menu-rice-v1.jpg')} .asset-menu-bread{background-image:url('assets/menu-bread-v1.jpg')} .asset-menu-menu{background-image:url('assets/menu-menu-v1.jpg')} .asset-menu-order{background-image:url('assets/menu-order-v1.jpg')} .asset-menu-alternative{background-image:url('assets/menu-alternative-v1.jpg')} .menu-cover img{display:block;width:100%;max-height:440px;object-fit:contain;aspect-ratio:3/2;border-radius:16px} .menu-cover figcaption{padding:12px;color:#446844} .travel-answer{box-sizing:border-box;width:100%;min-height:54px;font-size:22px;padding:12px 16px;margin:12px 0;border:1px solid #bacbb5;border-radius:8px;background:#fff;color:#203027} .travel-story-question{padding:24px 0;border-top:1px solid #dce5d6;scroll-margin-top:100px} .travel-story-nav{display:flex;flex-wrap:wrap;gap:16px;margin:18px 0} .travel-feedback:empty{display:none} .travel-feedback .feedback{margin:18px 0;padding:18px} #menu-conversation details{margin:16px 0;padding:14px;border:1px solid #dce5d6;border-radius:10px} #menu-conversation details label{display:inline-flex;flex-direction:column;gap:6px;margin:10px 14px 10px 0} #menu-conversation select{max-width:100%;min-height:44px} #menu-meaning-host form,#menu-talk-host form,#menu-recall-host form{height:auto;overflow:visible;position:static;margin-top:18px} #menu-meaning-host .exercise-actions,#menu-talk-host .exercise-actions,#menu-recall-host .exercise-actions{position:static;display:flex;flex-wrap:wrap;gap:12px;margin-top:16px} #menu-meaning-host button,#menu-talk-host button,#menu-recall-host button,.travel-story-question button{min-height:44px;white-space:normal;max-width:100%} #menu-meaning-host .practice-scene-copy [lang=tr],#menu-talk-host .practice-scene-copy [lang=tr]{font-size:clamp(22px,3vw,32px);line-height:1.4;overflow-wrap:anywhere} @media(max-width:650px){.travel-story-question{padding:18px 0}.travel-answer{font-size:20px}#menu-conversation details label{display:flex;margin-right:0}.travel-story-nav{gap:12px}} /* Preferences lesson follows the same responsive illustrated practice contract. */ .asset-preference-sugar{background-image:url('assets/preference-sugar-v1.jpg')} .asset-preference-milk{background-image:url('assets/preference-milk-v1.jpg')} .asset-preference-coffee{background-image:url('assets/preference-coffee-v1.jpg')} .asset-preference-clarify{background-image:url('assets/menu-alternative-v1.jpg')} #preference-conversation details{padding:14px;border:1px solid #dce5d6;border-radius:10px;margin:16px 0} #preference-conversation details label{display:inline-flex;flex-direction:column;gap:6px;margin:10px 14px 10px 0} #preference-conversation select{max-width:100%;min-height:44px} #preference-meaning-host form,#preference-talk-host form,#preference-recall-host form,#preference-warmup-host form{height:auto;overflow:visible;position:static;margin-top:18px} #preference-meaning-host .exercise-actions,#preference-talk-host .exercise-actions,#preference-recall-host .exercise-actions,#preference-warmup-host .exercise-actions{position:static;display:flex;flex-wrap:wrap;gap:12px;margin-top:16px} #preference-meaning-host button,#preference-talk-host button,#preference-recall-host button,#preference-warmup-host button{min-height:44px;white-space:normal;max-width:100%} @media(max-width:650px){#preference-conversation details label{display:flex;margin-right:0}} /* Ingredient pictures and compact semantic labels are shared by all vocabulary views. */ .asset-preference-milk-plain{background-image:url('assets/preference-milk-plain-v2.jpg')} .asset-preference-sugar-add{background-image:url('assets/preference-sugar-add-v2.jpg')} .asset-preference-clarify{background-image:url('assets/preference-ask-v2.jpg')} .asset-preference-confirm{background-image:url('assets/preference-confirm-v2.jpg')} .vocab-photo{position:relative} .ingredient-markers{position:absolute;left:10px;right:10px;bottom:10px;display:flex;flex-wrap:wrap;gap:6px;pointer-events:none} .ingredient-markers>span{font-size:12px;font-weight:700;line-height:1.35;padding:5px 8px;border-radius:6px;background:rgba(255,255,250,.96);color:#2e5336;box-shadow:0 1px 5px #0002} .preference-preparation{margin:22px 0;padding:18px;border:1px solid #dce5d6;border-radius:12px} .asset-payment-card{background-image:url('assets/payment-card-v1.jpg')} .asset-direction-ask{background-image:url('assets/direction-ask-v1.jpg')} .asset-direction-clarify{background-image:url('assets/direction-clarify-v1.jpg')} .asset-direction-corner{background-image:url('assets/direction-corner-v1.jpg')} .asset-direction-arrive{background-image:url('assets/direction-arrive-v1.jpg')} .direction-diagram{margin:0;min-width:0;width:100%} .direction-preparation{margin:22px 0;padding:18px;border:1px solid #dce5d6;border-radius:12px} .direction-diagram svg{display:block;width:100%;height:auto;aspect-ratio:3/2} .direction-diagram figcaption{padding:8px 10px;font-size:15px;font-weight:700;line-height:1.5;color:#35683d} .practice-direction-image{min-width:0} .direction-route-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:20px 0} #direction-conversation details{padding:14px;border:1px solid #dce5d6;border-radius:10px;margin:16px 0} #direction-conversation details label{display:inline-flex;flex-direction:column;gap:6px;margin:10px 14px 10px 0} #direction-conversation select{max-width:100%;min-height:44px} [id^="direction-"][id$="-host"] form{height:auto;overflow:visible;position:static;margin-top:18px} [id^="direction-"][id$="-host"] .exercise-actions{position:static;display:flex;flex-wrap:wrap;gap:12px;margin-top:16px} [id^="direction-"][id$="-host"] button{min-height:44px;white-space:normal;max-width:100%} @media(max-width:650px){.direction-route-options{grid-template-columns:1fr}#direction-conversation details label{display:flex;margin-right:0}} .asset-payment-cash{background-image:url('assets/payment-cash-v1.jpg')} .asset-payment-check{background-image:url('assets/payment-check-v1.jpg')} .asset-payment-correct{background-image:url('assets/payment-correct-v1.jpg')} .bill-comparison{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin:20px 0} .bill-document{min-width:0;padding:18px;border:1px solid #dce5d6;border-radius:12px;background:#fff;color:#26392c} .bill-document h4{margin:0 0 14px;font-size:20px} .bill-document table{width:100%;border-collapse:collapse;table-layout:fixed;font-size:14px;line-height:1.5} .bill-document th,.bill-document td{padding:8px 3px;text-align:right;border-bottom:1px solid #e2e8dd;overflow-wrap:anywhere} .bill-document th:first-child{width:36%;text-align:left} .bill-document small{display:block;font-size:12px;line-height:1.5;color:#58705b} .bill-document tfoot{font-weight:700;color:#31733d} .bill-document>small{margin-top:12px} #payment-conversation details{padding:14px;border:1px solid #dce5d6;border-radius:10px;margin:16px 0} #payment-conversation details label{display:inline-flex;flex-direction:column;gap:6px;margin:10px 14px 10px 0} #payment-conversation select{max-width:100%;min-height:44px} [id^="payment-"][id$="-host"] form{height:auto;overflow:visible;position:static;margin-top:18px} [id^="payment-"][id$="-host"] .exercise-actions{position:static;display:flex;flex-wrap:wrap;gap:12px;margin-top:16px} [id^="payment-"][id$="-host"] button{min-height:44px;white-space:normal;max-width:100%} @media(max-width:760px){.bill-comparison{grid-template-columns:1fr}#payment-conversation details label{display:flex;margin-right:0}} #preference-prep-host form{height:auto;overflow:visible;position:static} #preference-prep-host .exercise-actions{position:static;display:flex;flex-wrap:wrap;gap:12px;margin-top:16px} #preference-prep-host button{min-height:44px;white-space:normal;max-width:100%} .asset-direction-unknown{background-image:url('assets/direction-unknown-v1.jpg')} .direction-word-art{margin:0;width:100%;min-width:0;align-self:start} .direction-word-art img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:contain;border-radius:10px} .direction-word-art figcaption{padding:9px 12px;background:#f1f4e9;color:#315d37;font-size:clamp(12px,1.2vw,15px);font-weight:700;line-height:1.5;text-align:left} .vocab-main-art.direction-main-art{max-height:none;align-items:flex-start} .direction-illustration{overflow:visible;border-radius:12px;background:#fff;box-shadow:0 3px 16px #2a39230b} .direction-illustration>img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:contain;border-radius:12px 12px 0 0} .direction-step-strip{list-style:none;display:flex;gap:10px;align-items:stretch;margin:0;padding:12px;background:#f5f6ee;border-radius:0 0 12px 12px} .direction-step-strip li{display:flex;flex:1;min-width:0;gap:7px;align-items:center;justify-content:center;padding:8px 5px;font-size:clamp(12px,1.1vw,15px);font-weight:700;line-height:1.35;color:#315d37;background:#fff;border:1px solid #dfe8d9;border-radius:9px} .direction-step-strip small{font-size:12px;color:#7d896e} .direction-step-arrow{font-size:27px;line-height:1} .direction-step-strip .current-step{border-color:#68935e;background:#e8f1dc} .direction-illustration figcaption{padding:10px 12px;color:#4f6d49} .asset-ticket-counter{background-image:url('assets/ticket-counter-v1.jpg')} .asset-ticket-clarify{background-image:url('assets/ticket-clarify-v1.jpg')} .asset-ticket-soldout{background-image:url('assets/ticket-soldout-v1.jpg')} .asset-ticket-boarding{background-image:url('assets/ticket-boarding-v1.jpg')} .ticket-count-art{margin:0;min-width:0;width:100%} .ticket-count-art>img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:contain;border-radius:10px} .ticket-price-slip{display:flex;flex-direction:column;gap:8px;align-items:center;text-align:center;margin:18px 0;padding:20px;border:1px solid #d7dfce;background:#fffdf6;border-radius:12px} .ticket-price-slip strong{font-size:clamp(30px,4vw,42px);color:#315f39} .ticket-price-slip span{font-size:16px;color:#40543b} .ticket-price-slip small{font-size:12px;color:#73836a} .ticket-preparation{margin:22px 0;padding:18px;border:1px solid #dce5d6;border-radius:12px} #ticket-conversation details{padding:14px;border:1px solid #dce5d6;border-radius:10px;margin:16px 0} #ticket-conversation details label{display:inline-flex;flex-direction:column;gap:6px;margin:10px 14px 10px 0} #ticket-conversation select{max-width:100%;min-height:44px} [id^="ticket-"][id$="-host"] form{height:auto;overflow:visible;position:static;margin-top:18px} [id^="ticket-"][id$="-host"] .exercise-actions{position:static;display:flex;flex-wrap:wrap;gap:12px;margin-top:16px} [id^="ticket-"][id$="-host"] button{min-height:44px;white-space:normal;max-width:100%} @media(max-width:650px){#ticket-conversation details label{display:flex;margin-right:0}} @media(max-width:650px){.direction-step-strip li{font-size:15px;min-height:45px}} .asset-ticket-story-clarify{background-image:url('assets/ticket-story-clarify-v1.jpg')} /* Distinct actions for ticket vocabulary and dialogue scenes. */ .asset-ticket-howmany{background-image:url('assets/ticket-howmany-v1.jpg')} .asset-ticket-confirm{background-image:url('assets/ticket-confirm-v1.jpg')} .asset-ticket-correct{background-image:url('assets/ticket-correct-v1.jpg')} .asset-ticket-repeat{background-image:url('assets/ticket-repeat-v1.jpg')} .asset-ticket-price{background-image:url('assets/ticket-price-v1.jpg')} .asset-ticket-total{background-image:url('assets/ticket-total-v1.jpg')} .asset-ticket-thanks{background-image:url('assets/ticket-thanks-v1.jpg')} .asset-ticket-payment-card{background-image:url('assets/ticket-payment-card-v1.jpg')} /* Taxi scene actions, same shared illustration layout. */ .asset-taxi-address{background-image:url('assets/taxi-address-v1.jpg')} .asset-taxi-question{background-image:url('assets/taxi-question-v1.jpg')} .asset-taxi-confirm{background-image:url('assets/taxi-confirm-v1.jpg')} .asset-taxi-repeat{background-image:url('assets/taxi-repeat-v1.jpg')} .asset-taxi-wait{background-image:url('assets/taxi-wait-v1.jpg')} .asset-taxi-arrive{background-image:url('assets/taxi-arrive-v1.jpg')} .asset-taxi-stop{background-image:url('assets/taxi-stop-v1.jpg')} .asset-taxi-thanks{background-image:url('assets/taxi-thanks-v1.jpg')} .asset-taxi-phone{background-image:url('assets/taxi-phone-v1.jpg')} .asset-taxi-continue{background-image:url('assets/taxi-continue-v1.jpg')} .asset-taxi-vehicle{background-image:url('assets/lesson-taxi.jpg')} .lesson-hero.lesson-theme-11{background-image:linear-gradient(90deg,#15291dcc,#15291d22),url('assets/presence-bread-v1.jpg')} .asset-presence-ask{background-image:url('assets/presence-ask-v1.jpg')} .asset-presence-bread{background-image:url('assets/presence-bread-v1.jpg')} .asset-presence-empty{background-image:url('assets/presence-empty-v1.jpg')} .asset-presence-yes{background-image:url('assets/presence-yes-v1.jpg')} .asset-presence-no{background-image:url('assets/presence-no-v1.jpg')} .asset-presence-alternative{background-image:url('assets/presence-alternative-v1.jpg')} .asset-presence-water{background-image:url('assets/presence-water-v1.jpg')} .asset-presence-thanks{background-image:url('assets/presence-thanks-v1.jpg')} .asset-presence-water-empty{background-image:url('assets/presence-water-empty-v1.jpg')} .lesson-hero.lesson-theme-12{background-image:linear-gradient(90deg,#15291dcc,#15291d22),url('assets/correction-apology-v1.jpg')} .asset-correction-wrong-coffee{background-image:url('assets/correction-wrong-coffee-v1.jpg')} .asset-correction-wrong-tea{background-image:url('assets/correction-wrong-tea-v1.jpg')} .asset-correction-tea-one{background-image:url('assets/correction-tea-one-v1.jpg')} .asset-correction-tea-two{background-image:url('assets/correction-tea-two-v1.jpg')} .asset-correction-coffee-one{background-image:url('assets/correction-coffee-one-v1.jpg')} .asset-correction-coffee-two{background-image:url('assets/correction-coffee-two-v1.jpg')} .asset-correction-check{background-image:url('assets/correction-check-v1.jpg')} .asset-correction-apology{background-image:url('assets/correction-apology-v1.jpg')} .asset-correction-thanks{background-image:url('assets/correction-thanks-v1.jpg')} /* Numbers: values stay exact, selectable text; exercise height follows content. */ .lesson-hero.lesson-theme-13{background-image:linear-gradient(90deg,rgba(28,48,36,.8),rgba(28,48,36,.2)),url('assets/payment-check-v1.jpg')} .number-reference{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin:16px 0 28px} .number-reference>span{padding:12px 14px;border:1px solid #dce5d5;border-radius:10px;background:#fff} .number-reference b{color:#2f713c;margin-right:10px} .number-price{font-size:clamp(24px,4vw,36px);font-weight:650;color:#2f713c;padding:12px 0} .number-word-art{position:relative;width:100%}.number-word-art>.vocab-photo{width:100%} .number-value{position:absolute;right:14px;bottom:14px;background:#fffdf5;color:#285f35;border-radius:12px;padding:8px 20px;font-size:clamp(32px,5vw,58px);font-weight:700;box-shadow:0 2px 12px #19362222} #numbers-conversation select,#numbers-ten,#numbers-unit{max-width:100%;margin:6px 8px 10px 0} /* Hotel: original scenes use the shared 3:2 illustrated practice component. */ .asset-hotel-arrival{background-image:url('assets/hotel-arrival-v1.jpg')} .asset-hotel-booking{background-image:url('assets/hotel-booking-v1.jpg')} .asset-hotel-passport{background-image:url('assets/hotel-passport-v1.jpg')} .asset-hotel-check{background-image:url('assets/hotel-check-v1.jpg')} .asset-hotel-wait{background-image:url('assets/hotel-wait-v1.jpg')} .asset-hotel-key{background-image:url('assets/hotel-key-v1.jpg')} .asset-hotel-room{background-image:url('assets/hotel-room-v1.jpg')} .asset-hotel-name{background-image:url('assets/hotel-name-v1.jpg')} .asset-hotel-greeting{background-image:url('assets/hotel-greeting-v1.jpg')} .lesson-hero.lesson-theme-14{background-image:linear-gradient(90deg,rgba(28,48,36,.82),rgba(28,48,36,.2)),url('assets/hotel-arrival-v1.jpg')} #hotel-conversation select{max-width:100%;margin:6px 8px 10px 0} /* Room amenities share the normal-flow illustrated practice layout. */ .asset-amenities-room{background-image:url('assets/amenities-room-v1.jpg')} .asset-amenities-wifi{background-image:url('assets/amenities-wifi-v1.jpg')} .asset-amenities-password{background-image:url('assets/amenities-password-v1.jpg')} .asset-amenities-towels{background-image:url('assets/amenities-towels-v1.jpg')} .asset-amenities-climate{background-image:url('assets/amenities-climate-v1.jpg')} .asset-amenities-water{background-image:url('assets/amenities-water-v1.jpg')} .asset-amenities-breakfast{background-image:url('assets/amenities-breakfast-v1.jpg')} .asset-amenities-ask{background-image:url('assets/amenities-ask-v1.jpg')} .asset-amenities-missing{background-image:url('assets/amenities-missing-v1.jpg')} .lesson-hero.lesson-theme-15{background-image:linear-gradient(90deg,rgba(28,48,36,.82),rgba(28,48,36,.2)),url('assets/amenities-room-v1.jpg')} .amenities-password-card{display:flex;flex-wrap:wrap;gap:10px 24px;padding:18px 22px;background:#edf3e8;border:1px solid #cfdec6;border-radius:12px;margin:16px 0;color:#285f35}.amenities-password-card small{flex-basis:100%;color:#677664}#amenities-conversation select{max-width:100%;margin:6px 8px 10px 0} /* Help: distinct report, waiting, checking and result scenes. */ .asset-help-ask{background-image:url('assets/help-ask-v1.jpg')} .asset-help-air{background-image:url('assets/help-air-v1.jpg')} .asset-help-internet{background-image:url('assets/help-internet-v1.jpg')} .asset-help-water{background-image:url('assets/help-water-v1.jpg')} .asset-help-card{background-image:url('assets/help-card-v1.jpg')} .asset-help-check{background-image:url('assets/help-check-v1.jpg')} .asset-help-wait{background-image:url('assets/help-wait-v1.jpg')} .asset-help-move{background-image:url('assets/help-move-v1.jpg')} .asset-help-fixed{background-image:url('assets/help-fixed-v1.jpg')} .asset-help-followup{background-image:url('assets/help-followup-v2.jpg')} .lesson-hero.lesson-theme-16{background-image:linear-gradient(90deg,rgba(28,48,36,.82),rgba(28,48,36,.2)),url('assets/help-ask-v1.jpg')} #help-conversation select{max-width:100%;margin:6px 8px 10px 0} /* Shopping: one coherent scene for one/two items, exact prices stay in text. */ .asset-shop-ask{background-image:url('assets/shop-ask-v1.jpg')} .asset-shop-single{background-image:url('assets/shop-single-v1.jpg')} .asset-shop-pair{background-image:url('assets/shop-pair-v1.jpg')} .asset-shop-total{background-image:url('assets/shop-total-v1.jpg')} .asset-shop-discount{background-image:url('assets/shop-discount-v1.jpg')} .asset-shop-fixed{background-image:url('assets/shop-fixed-v1.jpg')} .asset-shop-alternative{background-image:url('assets/shop-alternative-v1.jpg')} .asset-shop-buy{background-image:url('assets/shop-buy-v1.jpg')} .asset-shop-decline{background-image:url('assets/shop-decline-v1.jpg')} .lesson-hero.lesson-theme-17{background-image:linear-gradient(90deg,rgba(28,48,36,.82),rgba(28,48,36,.2)),url('assets/shop-ask-v1.jpg')} #shop-conversation select{max-width:100%;margin:6px 8px 10px 0} /* Clothing choice: original color and fitting scenes, shared responsive flow. */ .asset-choice-ask{background-image:url('assets/choice-ask-v1.jpg')} .asset-choice-blue{background-image:url('assets/choice-blue-v1.jpg')} .asset-choice-black{background-image:url('assets/choice-black-v1.jpg')} .asset-choice-white{background-image:url('assets/choice-white-v1.jpg')} .asset-choice-compare{background-image:url('assets/choice-compare-v2.jpg')} .asset-choice-size{background-image:url('assets/choice-size-v1.jpg')} .asset-choice-try{background-image:url('assets/choice-try-v1.jpg')} .asset-choice-small{background-image:url('assets/choice-small-v2.jpg')} .asset-choice-alternative{background-image:url('assets/choice-alternative-v2.jpg')} .asset-choice-buy{background-image:url('assets/choice-buy-v1.jpg')} .asset-choice-decline{background-image:url('assets/choice-decline-v1.jpg')} .lesson-hero.lesson-theme-18{background-image:linear-gradient(90deg,rgba(28,48,36,.82),rgba(28,48,36,.2)),url('assets/choice-ask-v1.jpg')} #choice-conversation select{max-width:100%;margin:6px 8px 10px 0} /* Counted goods: whole scenes, shared responsive page flow. */ .asset-quantity-ask{background-image:url('assets/quantity-ask-v1.jpg')} .asset-quantity-one{background-image:url('assets/quantity-one-v1.jpg')} .asset-quantity-two{background-image:url('assets/quantity-two-v1.jpg')} .asset-quantity-three{background-image:url('assets/quantity-three-v1.jpg')} .asset-quantity-four{background-image:url('assets/quantity-four-v1.jpg')} .asset-quantity-clarify{background-image:url('assets/quantity-clarify-v1.jpg')} .asset-quantity-check{background-image:url('assets/quantity-check-v1.jpg')} .asset-quantity-more{background-image:url('assets/quantity-more-v1.jpg')} .asset-quantity-limited{background-image:url('assets/quantity-limited-v1.jpg')} .asset-quantity-bag{background-image:url('assets/quantity-bag-v1.jpg')} .asset-quantity-decline{background-image:url('assets/quantity-decline-v1.jpg')} .asset-quantity-empty{background-image:url('assets/quantity-empty-v1.jpg')} .lesson-hero.lesson-theme-19{background-image:linear-gradient(90deg,rgba(28,48,36,.82),rgba(28,48,36,.2)),url('assets/quantity-ask-v1.jpg')} #quantity-conversation select{max-width:100%;min-height:44px;margin:6px 8px 10px 0} /* Clarification: original context-specific scenes and readable exact records. */ .asset-repair-cafe-listen{background-image:url('assets/repair-cafe-listen-v1.jpg')} .asset-repair-cafe-slow{background-image:url('assets/repair-cafe-slow-v1.jpg')} .asset-repair-cafe-write{background-image:url('assets/repair-cafe-write-v1.jpg')} .asset-repair-hotel-ask{background-image:url('assets/repair-hotel-ask-v1.jpg')} .asset-repair-hotel-wait{background-image:url('assets/repair-hotel-wait-v1.jpg')} .asset-repair-hotel-show{background-image:url('assets/repair-hotel-show-v1.jpg')} .asset-repair-street-ask{background-image:url('assets/repair-street-ask-v1.jpg')} .asset-repair-street-repeat{background-image:url('assets/repair-street-repeat-v1.jpg')} .asset-repair-street-show{background-image:url('assets/repair-street-show-v1.jpg')} .asset-repair-word{background-image:url('assets/repair-word-v1.jpg')} .asset-repair-understood{background-image:url('assets/repair-understood-v1.jpg')} .asset-repair-unresolved{background-image:url('assets/repair-unresolved-v1.jpg')} .lesson-hero.lesson-theme-20{background-image:linear-gradient(90deg,rgba(28,48,36,.82),rgba(28,48,36,.2)),url('assets/repair-street-ask-v1.jpg')} #repair-conversation select{max-width:100%;min-height:44px;margin:6px 8px 10px 0} .repair-written{padding:16px 20px;margin:16px 0;border:1px solid #d6e0cc;border-radius:12px;background:#fff;color:#284b31;overflow-wrap:anywhere}.repair-written>span{display:block;font-size:14px}.repair-written>strong{display:block;font-size:clamp(24px,4vw,36px);margin-top:8px}.repair-written>p{margin:8px 0 0} .asset-clinic-ask{background-image:url('assets/clinic-ask-v1.jpg')} .asset-clinic-head{background-image:url('assets/clinic-head-v1.jpg')} .asset-clinic-rx{background-image:url('assets/clinic-rx-v1.jpg')} .asset-clinic-stock{background-image:url('assets/clinic-stock-v1.jpg')} .asset-clinic-write{background-image:url('assets/clinic-write-v1.jpg')} .asset-clinic-doctor{background-image:url('assets/clinic-doctor-v1.jpg')} .asset-clinic-read{background-image:url('assets/clinic-read-v1.jpg')} .asset-clinic-exit{background-image:url('assets/clinic-exit-v1.jpg')} .lesson-hero.lesson-theme-21{background-image:linear-gradient(90deg,rgba(28,48,36,.82),rgba(28,48,36,.2)),url('assets/clinic-ask-v1.jpg')} #clinic-conversation select{max-width:100%;min-height:44px;margin:6px 8px 10px 0} .lesson-hero.lesson-theme-22{background-image:linear-gradient(90deg,rgba(28,48,36,.82),rgba(28,48,36,.2)),url('assets/hotel-arrival-v1.jpg')} #day-conversation select{max-width:100%;min-height:44px;margin:6px 8px 10px 0} .asset-clinic-throat{background-image:url('assets/clinic-throat-v1.jpg')}