:root{
  --bg:#f4f1e9;--paper:#fffefa;--paper2:#fbfaf5;--ink:#183238;--muted:#647579;--line:#dfe5df;
  --brand:#123b3b;--brand2:#1d665e;--mint:#daf0e7;--sky:#e9f2ff;--warm:#f4dfb8;--coral:#f4cfc7;
  --good:#16785f;--bad:#b4443f;--warning:#8a6814;--shadow:0 18px 50px rgba(27,58,57,.10);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink);background:var(--bg)
}
*{box-sizing:border-box}html{scroll-behavior:smooth}html,body{margin:0;min-height:100%;background:linear-gradient(180deg,#f8f6f0 0,#f2efe7 100%)}body{min-height:100vh}button,input,select,textarea{font:inherit;color:inherit}button{cursor:pointer}a{color:inherit}.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.app-shell{min-height:100vh;display:flex;flex-direction:column}.site-head{position:sticky;top:0;z-index:30;background:rgba(248,246,240,.88);backdrop-filter:blur(18px);border-bottom:1px solid rgba(31,65,64,.08)}.head-inner{max-width:1240px;margin:auto;padding:11px 22px;display:flex;align-items:center;gap:14px}.brand{border:0;background:transparent;display:flex;align-items:center;gap:10px;font-weight:900;font-size:18px;padding:5px 7px;border-radius:14px}.brand:hover{background:rgba(18,59,59,.05)}.brand img{width:42px;height:42px;border-radius:13px;box-shadow:0 4px 16px rgba(18,59,59,.14)}.brand-copy{display:flex;flex-direction:column;align-items:flex-start;line-height:1.1}.brand-copy small{margin-top:4px;color:var(--muted);font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.topnav{display:flex;gap:4px;flex:1;justify-content:center}.topnav button{border:0;background:transparent;padding:9px 11px;border-radius:12px;color:var(--muted);font-weight:800;white-space:nowrap}.topnav button.active,.topnav button:hover{background:#fff;color:var(--brand);box-shadow:0 4px 16px rgba(27,58,57,.06)}.head-actions{display:flex;align-items:center;gap:8px}.lang-switch,.mini-select{border:1px solid var(--line);background:#fff;border-radius:12px;padding:8px 10px}.install{border:1px solid var(--line);background:#fff;border-radius:12px;padding:9px 11px;font-weight:800}
main{width:100%;max-width:1240px;margin:0 auto;padding:30px 22px 60px;flex:1}.hero{display:grid;grid-template-columns:1.18fr .82fr;gap:18px;align-items:stretch}.hero-main{border-radius:30px;padding:42px;background:linear-gradient(135deg,#123b3b 0%,#1d665e 62%,#39877e 100%);color:white;box-shadow:var(--shadow);position:relative;overflow:hidden}.hero-main:before,.hero-main:after{content:"";position:absolute;border-radius:50%;background:rgba(255,255,255,.08)}.hero-main:before{width:320px;height:320px;right:-120px;top:-130px}.hero-main:after{width:180px;height:180px;right:80px;bottom:-90px}.hero-main>*{position:relative;z-index:1}.eyebrow{font-size:12px;text-transform:uppercase;letter-spacing:.14em;color:#c9ebe4;font-weight:900}.hero h1{font-family:Georgia,"Times New Roman",serif;font-size:clamp(38px,5.5vw,68px);line-height:.98;margin:10px 0 18px;max-width:850px}.hero p{font-size:18px;line-height:1.6;color:rgba(255,255,255,.82);max-width:750px}.cta-row,.button-row{display:flex;flex-wrap:wrap;gap:9px;margin-top:20px}.hero-main .btn.primary{background:white;color:var(--brand);border-color:white}.hero-main .btn.warm{background:var(--warm);color:#473715;border-color:var(--warm)}
.hero-side{display:grid;grid-template-rows:auto 1fr;gap:14px}.daily-card,.panel,.mini-card{background:var(--paper);border:1px solid var(--line);border-radius:24px;box-shadow:0 10px 34px rgba(27,58,57,.06)}.daily-card{padding:22px}.daily-top{display:flex;justify-content:space-between;align-items:center;gap:14px}.daily-number{font-size:32px;font-weight:950;color:var(--brand)}.daily-label{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:900}.progress{height:10px;background:#e8ece8;border-radius:999px;overflow:hidden;margin-top:13px}.progress i{display:block;height:100%;background:linear-gradient(90deg,var(--brand2),#55a394);width:0;border-radius:inherit}.quick-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.quick-card{border:1px solid var(--line);background:var(--paper);border-radius:20px;padding:18px;text-align:left;min-height:130px;box-shadow:0 8px 28px rgba(27,58,57,.05);transition:.18s transform,.18s box-shadow}.quick-card:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(27,58,57,.09)}.quick-card .icon{font-size:26px}.quick-card strong{display:block;margin:12px 0 5px}.quick-card span{font-size:13px;color:var(--muted);line-height:1.45}
.btn{border:1px solid var(--line);background:#fff;border-radius:14px;padding:11px 15px;font-weight:850;transition:.15s transform,.15s box-shadow,.15s background}.btn:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(27,58,57,.08)}.btn.primary{background:var(--brand);border-color:var(--brand);color:#fff}.btn.secondary{background:var(--mint);border-color:#c6e2d9;color:#174d46}.btn.warm{background:#bd7a34;border-color:#bd7a34;color:#fff}.btn.ghost{background:transparent}.btn.danger{color:var(--bad)}.btn:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}.btn.icon-only{width:46px;height:46px;padding:0;display:grid;place-items:center}.btn.small{padding:7px 10px;border-radius:11px;font-size:13px}
.page-head{display:flex;align-items:end;justify-content:space-between;gap:16px;margin-bottom:18px}.page-head h1{font-family:Georgia,"Times New Roman",serif;font-size:40px;margin:0}.page-head p{margin:7px 0 0;color:var(--muted);max-width:720px;line-height:1.55}.panel{padding:22px;margin-bottom:16px}.panel.soft{background:linear-gradient(180deg,#fff,#fbfdfb)}.panel-title{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:14px}.panel-title h2,.panel-title h3{margin:0}.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.field{display:flex;flex-direction:column;gap:7px;margin-bottom:13px}.field label{font-size:13px;font-weight:850}.field input,.field select,.field textarea,.search-row input,.search-row select{border:1px solid var(--line);background:#fff;border-radius:13px;padding:12px 13px;outline:none}.field textarea{min-height:115px;resize:vertical}.field input:focus,.field select:focus,.field textarea:focus,.search-row input:focus,.search-row select:focus{border-color:#8dbeb3;box-shadow:0 0 0 4px rgba(29,102,94,.08)}.hint{color:var(--muted);font-size:13px;line-height:1.5}.status{padding:11px 13px;border-radius:13px;background:#edf7f4;color:#285a52;font-size:13px;line-height:1.45}.status.warn{background:#fff7df;color:#775b14}.status.error{background:#fff0ef;color:var(--bad)}.smallcaps{font-size:11px;text-transform:uppercase;letter-spacing:.09em;font-weight:950;color:var(--muted)}
.mode-tabs{display:inline-flex;padding:4px;background:#e8eeeb;border-radius:15px;gap:4px}.mode-tabs button{border:0;background:transparent;border-radius:11px;padding:9px 15px;font-weight:850;color:var(--muted)}.mode-tabs button.active{background:white;color:var(--brand);box-shadow:0 3px 10px rgba(27,58,57,.08)}.scenario-row{display:flex;flex-wrap:wrap;gap:7px}.chip{border:1px solid var(--line);background:white;border-radius:999px;padding:8px 11px;font-size:13px;font-weight:750}.chip.active{background:var(--mint);border-color:#b9ddd2;color:#174d46}
.coach-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:16px}.chat{display:flex;flex-direction:column;gap:13px;min-height:360px;max-height:59vh;overflow:auto;padding:5px 3px 10px}.bubble{max-width:86%;padding:13px 15px;border-radius:19px;line-height:1.55;white-space:pre-wrap;box-shadow:0 3px 12px rgba(27,58,57,.04)}.bubble.user{align-self:flex-end;background:#e7f0ff;border-bottom-right-radius:6px}.bubble.assistant{align-self:flex-start;background:#e8f4ef;border-bottom-left-radius:6px}.bubble .meta{font-size:10px;font-weight:950;color:var(--muted);text-transform:uppercase;letter-spacing:.07em;margin-bottom:5px}.coach-feedback{margin-top:10px;border-top:1px solid rgba(29,102,94,.15);padding-top:10px;display:grid;gap:8px}.feedback-line{font-size:13px}.feedback-line b{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);margin-bottom:2px}.correction{background:#fff;border:1px solid #d9e5df;border-radius:12px;padding:9px 10px}.natural{background:#fff8e8;border:1px solid #f0dfb9;border-radius:12px;padding:9px 10px}.composer{display:grid;grid-template-columns:auto 1fr auto;gap:8px;margin-top:12px}.composer textarea{min-height:56px;max-height:150px;border:1px solid var(--line);border-radius:15px;padding:13px;resize:vertical}.mic{width:54px;border-radius:15px;border:1px solid var(--line);background:#fff;font-size:22px}.mic.listening{background:#ffe7e4;border-color:#e6aaa5;animation:pulse 1.1s infinite}.engine-note{font-size:12px;color:var(--muted);margin-top:8px}.coach-side{display:flex;flex-direction:column;gap:12px}.coach-side .mini-card{padding:16px}.coach-side h3{font-size:15px;margin:0 0 8px}.coach-side p{margin:0;color:var(--muted);font-size:13px;line-height:1.5}.voice-grid{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:end}.voice-rate{width:100%}
.write-box textarea{min-height:160px;font-size:17px;line-height:1.6}.write-result{display:grid;gap:11px;margin-top:16px}.result-card{border:1px solid var(--line);border-radius:16px;padding:14px;background:white}.result-card.corrected{border-left:5px solid var(--good)}.result-card.natural{border-left:5px solid #bd7a34}.result-card.explain{border-left:5px solid #5888b4}.result-card .result-text{font-size:18px;line-height:1.55;margin-top:5px}.history-item{padding:11px 0;border-top:1px solid var(--line)}.history-item:first-child{border-top:0}
.phrase-card{text-align:center;padding:31px}.phrase-main{font-family:Georgia,"Times New Roman",serif;font-size:clamp(28px,4vw,40px);margin:10px auto;max-width:900px;line-height:1.25}.phrase-translation{color:var(--muted);font-size:17px}.score-wrap{display:grid;grid-template-columns:150px 1fr;gap:20px;align-items:center;margin-top:18px;text-align:left}.score-ring{width:130px;height:130px;border-radius:50%;display:grid;place-items:center;margin:auto;font-size:27px;font-weight:950;background:conic-gradient(var(--brand2) var(--score,0%),#e7ece8 0);position:relative}.score-ring:after{content:"";position:absolute;inset:11px;background:white;border-radius:50%}.score-ring span{position:relative;z-index:1}.transcript{background:#fbfaf6;border:1px dashed #ccd7d1;padding:13px;border-radius:14px;min-height:48px}.word-diff{display:flex;flex-wrap:wrap;gap:7px;margin:10px 0}.word-token{padding:5px 8px;border-radius:9px;background:#eef2ef;font-weight:800}.word-token.ok{background:#ddf2ea;color:#17634f}.word-token.miss{background:#ffe5e1;color:#a23d38}.focus-box{padding:12px 14px;border-radius:14px;background:#fff7e5;border:1px solid #f0deb3}.own-phrase{max-width:760px;margin:18px auto 0;display:grid;grid-template-columns:1fr auto;gap:8px}
.search-row{display:grid;grid-template-columns:1fr auto auto;gap:9px}.dictionary-meta{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:13px 0;color:var(--muted);font-size:12px}.dictionary-list{display:grid;gap:10px;margin-top:14px}.word-row{border:1px solid var(--line);border-radius:18px;padding:16px;display:grid;grid-template-columns:1fr auto;gap:12px;background:#fff}.word-row h3{margin:0 0 4px;font-size:20px}.word-row p{margin:4px 0;color:var(--muted);line-height:1.45}.word-row .translation{font-weight:950;color:var(--brand2);font-size:18px}.tag{display:inline-block;padding:4px 8px;border-radius:999px;background:#edf1ef;color:var(--muted);font-size:11px;font-weight:800;margin-left:6px}.live-result{margin-top:18px;border-top:1px solid var(--line);padding-top:18px}.live-card{border:1px solid var(--line);background:#fff;border-radius:18px;padding:16px}.live-card h3{margin-top:0}.definition{padding:9px 0;border-top:1px solid #eef1ee}.definition:first-of-type{border-top:0}.ipa{font-family:Georgia,"Times New Roman",serif;font-size:18px;color:#355d58}.forms{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}.form-pill{padding:5px 8px;border-radius:999px;background:#eef3f0;font-size:12px}
.quiz-q{font-size:22px;font-weight:900;margin-bottom:16px;line-height:1.45}.answers{display:grid;gap:9px}.answer{border:1px solid var(--line);background:white;border-radius:14px;padding:13px;text-align:left;font-weight:700}.answer:hover{border-color:#9fc7bd}.answer.correct{border-color:#76b39f;background:#e8f7f1}.answer.wrong{border-color:#d99792;background:#fff0ee}.feedback{margin-top:14px;padding:13px;border-radius:13px;background:#f4f0e7;line-height:1.5}.stat-row{display:flex;gap:18px;flex-wrap:wrap;color:var(--muted);font-size:14px}.stat-row strong{color:var(--ink)}
.game-menu{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.game-choice{border:1px solid var(--line);background:#fff;border-radius:20px;padding:20px;text-align:left;min-height:150px}.game-choice.active{border-color:#9cc8bd;background:#f3fbf8;box-shadow:0 8px 22px rgba(29,102,94,.08)}.game-choice .emoji{font-size:30px}.game-choice strong{display:block;margin:12px 0 6px;font-size:17px}.game-choice span{color:var(--muted);font-size:13px;line-height:1.45}.game-board{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}.card{min-height:92px;border:1px solid var(--line);background:white;border-radius:16px;padding:10px;display:grid;place-items:center;text-align:center;font-weight:850}.card small{color:var(--muted)}.card.selected{outline:3px solid rgba(29,102,94,.18);background:#eef8f5}.card.matched{opacity:.28;pointer-events:none}.builder-target{min-height:78px;border:2px dashed #cbd8d2;border-radius:18px;padding:14px;display:flex;flex-wrap:wrap;gap:8px;align-content:flex-start;background:#fbfdfb}.builder-word{border:1px solid var(--line);background:#fff;border-radius:12px;padding:9px 11px;font-weight:800}.builder-source{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}.listen-question{text-align:center;padding:20px}.listen-button{width:92px;height:92px;border-radius:50%;font-size:34px;border:0;background:var(--brand);color:#fff;box-shadow:0 12px 25px rgba(18,59,59,.22)}.listen-options{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px}
.reader-feature{padding:18px;border-radius:18px;background:linear-gradient(135deg,#edf7f4,#f9f1df);border:1px solid #dce8e2}.reader-feature strong{display:block;margin-bottom:6px}.reader-feature span{color:var(--muted);font-size:14px;line-height:1.5}footer{border-top:1px solid rgba(31,65,64,.10);padding:22px;color:var(--muted);font-size:12px}.footer-inner{max-width:1240px;margin:auto;padding:0 22px;display:flex;justify-content:space-between;gap:12px;align-items:center}.footer-inner a{text-decoration:none}.toast{position:fixed;right:18px;bottom:18px;z-index:99;background:#173b3b;color:white;border-radius:14px;padding:12px 15px;max-width:390px;box-shadow:var(--shadow)}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.035)}}
@media(max-width:980px){.topnav{order:3;width:100%;overflow:auto;justify-content:flex-start}.head-inner{flex-wrap:wrap}.head-actions{margin-left:auto}.hero,.coach-layout{grid-template-columns:1fr}.coach-side{display:grid;grid-template-columns:1fr 1fr}.grid-4{grid-template-columns:1fr 1fr}}
@media(max-width:760px){main{padding:24px 14px 46px}.head-inner{padding:9px 13px}.hero-main{padding:28px}.hero h1{font-size:42px}.grid-2,.grid-3,.game-menu{grid-template-columns:1fr}.game-board{grid-template-columns:repeat(3,minmax(0,1fr))}.listen-options{grid-template-columns:1fr}.page-head{align-items:flex-start;flex-direction:column}.score-wrap{grid-template-columns:1fr}.search-row{grid-template-columns:1fr 1fr}.search-row input{grid-column:1/-1}.word-row{grid-template-columns:1fr}.coach-side{grid-template-columns:1fr}.composer{grid-template-columns:50px 1fr}.composer .send{grid-column:1/-1}.bubble{max-width:95%}}
@media(max-width:480px){.brand-copy .brand-long{display:none}.brand-copy small{display:none}.quick-grid{grid-template-columns:1fr}.game-board{grid-template-columns:repeat(2,minmax(0,1fr))}.hero-main{padding:24px}.hero h1{font-size:37px}.panel{padding:17px}.phrase-card{padding:22px}.own-phrase{grid-template-columns:1fr}.search-row{grid-template-columns:1fr}.search-row input{grid-column:auto}.footer-inner{padding:0 14px;flex-direction:column;align-items:flex-start}}