@import"https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Noto+Sans+SC:wght@400;500;600;700&family=Playfair+Display:ital,wght@1,600&display=swap";:root{--ink: #14323b;--muted: #67818a;--teal: #087f8c;--teal-dark: #065d68;--teal-soft: #dff6f3;--coral: #ff7b6b;--cream: #fff8e8;--paper: #fffdf8;--line: #d9e7e5;--shadow: 0 24px 70px rgba(20, 50, 59, .12);color:var(--ink);font-family:DM Sans,Noto Sans SC,sans-serif;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}*{box-sizing:border-box}html{min-width:320px;background:var(--cream)}body{margin:0;min-width:320px;min-height:100vh;color:var(--ink);background:linear-gradient(rgba(8,127,140,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(8,127,140,.035) 1px,transparent 1px),var(--cream);background-size:32px 32px;overflow-x:hidden}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit}button:focus-visible,a:focus-visible{outline:3px solid rgba(8,127,140,.3);outline-offset:3px}.ambient{position:fixed;z-index:-1;border-radius:999px;filter:blur(3px);opacity:.8}.ambient-one{width:420px;height:420px;top:-190px;right:-100px;background:radial-gradient(circle at 40% 40%,#9ce5dc,#9ce5dc00)}.ambient-two{width:360px;height:360px;bottom:-170px;left:-140px;background:radial-gradient(circle at 60% 40%,#ffc5b8,#ffc5b800)}.site-header{width:min(1180px,calc(100% - 40px));margin:0 auto;padding:24px 0;display:flex;align-items:center;justify-content:space-between;gap:24px}.brand{display:flex;align-items:center;gap:12px;color:inherit;text-decoration:none}.brand-mark{display:grid;place-items:center;width:42px;height:42px;color:#fff;border-radius:14px 14px 14px 4px;background:var(--teal);font-size:20px;font-weight:700;box-shadow:0 9px 22px #087f8c38}.brand strong,.brand small{display:block}.brand strong{font-size:16px;letter-spacing:.02em}.brand small{margin-top:1px;color:var(--muted);font-size:11px}.header-meta{display:flex;align-items:center;gap:24px}.service-status{display:flex;align-items:center;gap:7px;color:var(--muted);font-size:11px}.service-status-dot{width:8px;height:8px;border-radius:50%;background:#aab7b4}.service-status[data-status=online] .service-status-dot{background:#36a278;box-shadow:0 0 0 4px #36a2781f}.service-status[data-status=offline] .service-status-dot{background:#e08a68;box-shadow:0 0 0 4px #e08a681f}.header-progress{display:grid;grid-template-columns:auto auto;gap:5px 14px;align-items:center;font-size:12px;color:var(--muted)}.header-progress strong{color:var(--ink);text-align:right}.progress-track{grid-column:1 / -1;width:190px;height:6px;border-radius:99px;overflow:hidden;background:#dbe9e6}.progress-track span{display:block;width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--teal),#48c9b7);transition:width .45s ease}.page-shell{width:min(1180px,calc(100% - 40px));margin:0 auto;padding-bottom:64px}.hero{display:grid;grid-template-columns:1fr 250px;gap:40px;align-items:end;padding:54px 0 42px}.eyebrow{margin:0 0 13px;color:var(--teal);font-size:12px;font-weight:700;letter-spacing:.15em}.hero h1{margin:0;font-size:clamp(42px,6vw,74px);line-height:.98;letter-spacing:-.055em}.hero h1 em{color:var(--coral);font-family:Playfair Display,serif;font-weight:600}.hero-copy{max-width:600px;margin:22px 0 0;color:var(--muted);font-size:16px;line-height:1.8}.streak-card{position:relative;padding:22px;border:1px solid rgba(255,123,107,.3);border-radius:24px 24px 7px;background:#fffdf8bf;box-shadow:0 14px 40px #5b452c14;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}.streak-label{color:var(--coral);font-size:12px;font-weight:700}.streak-card strong{display:block;margin:5px 0;font-size:52px;line-height:1}.streak-card strong small{margin-left:5px;font-size:14px;font-weight:500}.streak-card p{margin:10px 0 0;color:var(--muted);font-size:12px;line-height:1.6}.practice-layout{display:grid;grid-template-columns:290px minmax(0,1fr);gap:24px;align-items:start}.lesson-list,.practice-card{border:1px solid rgba(8,127,140,.14);background:#fffdf8e6;box-shadow:var(--shadow);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}.lesson-list{position:sticky;top:20px;padding:24px;border-radius:28px 9px 28px 28px}.section-heading{display:flex;align-items:start;justify-content:space-between;gap:8px}.section-heading span{color:var(--muted);font-size:11px}.section-heading h2{margin:4px 0 0;font-size:20px}.section-heading .time-pill{padding:7px 9px;color:var(--teal);border-radius:99px;background:var(--teal-soft);white-space:nowrap}.lesson-items{display:grid;gap:8px;margin-top:22px}.lesson-item{width:100%;display:grid;grid-template-columns:32px 1fr 18px;gap:10px;align-items:center;padding:11px 10px;color:var(--muted);text-align:left;border:0;border-radius:14px;background:transparent;cursor:pointer;transition:transform .16s ease,background .16s ease,color .16s ease}.lesson-item:hover{transform:translate(3px);background:#f2f8f6}.lesson-item.active{color:var(--ink);background:var(--teal-soft)}.lesson-item-number{display:grid;place-items:center;width:32px;height:32px;border-radius:11px;background:#edf2ef;font-size:11px;font-weight:700}.lesson-item.active .lesson-item-number{color:#fff;background:var(--teal)}.lesson-item.done .lesson-item-number{color:#fff;background:#46a596}.lesson-item-copy{min-width:0}.lesson-item-copy strong,.lesson-item-copy small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.lesson-item-copy strong{font-size:12px;font-weight:600}.lesson-item-copy small{margin-top:3px;font-size:10px}.lesson-check{color:var(--teal);font-weight:700}.text-button{margin-top:18px;padding:8px 0;color:var(--muted);border:0;border-bottom:1px solid var(--line);background:transparent;font-size:11px;cursor:pointer}.practice-card{padding:32px;border-radius:9px 34px 34px}.card-topline,.card-footer,.recording-actions{display:flex;align-items:center}.card-topline{justify-content:space-between}.step-chip,.level-chip{padding:7px 10px;border-radius:99px;font-size:11px;font-weight:600}.step-chip{color:#fff;background:var(--teal)}.level-chip{color:var(--muted);background:#f2f3ef}.sentence-block{display:grid;grid-template-columns:76px 1fr;gap:22px;align-items:center;min-height:190px;padding:28px 6px 24px}.listen-button{width:74px;height:74px;display:grid;place-items:center;align-content:center;gap:4px;color:var(--teal);border:1px solid #b9ded8;border-radius:50%;background:#effaf7;font-size:10px;cursor:pointer;transition:transform .18s ease,box-shadow .18s ease}.listen-button:hover{transform:translateY(-2px) scale(1.03);box-shadow:0 12px 24px #087f8c24}.listen-button.speaking{animation:pulse 1.2s infinite}.speaker-icon{font-size:18px}.english-sentence{margin:0;font-size:clamp(27px,4vw,43px);line-height:1.18;letter-spacing:-.035em}.translation{margin:12px 0 0;color:var(--muted);font-size:15px}.pronunciation-panel{display:grid;grid-template-columns:92px 1fr;gap:18px;padding:20px;border:1px solid #cee6e1;border-radius:18px;background:linear-gradient(135deg,#edf9f6,#fdfcf7)}.panel-label{color:var(--teal);font-size:12px;font-weight:700}.pronunciation-grid{display:grid;grid-template-columns:1fr 1.35fr;gap:24px}.pronunciation-grid span{display:block;margin-bottom:6px;color:var(--muted);font-size:10px}.pronunciation-grid strong{font-size:13px}.pronunciation-grid p{margin:0;font-size:12px;line-height:1.65}.recording-zone{margin-top:18px;padding:22px;border:1px dashed #b8d3d0;border-radius:20px;background:#ffffff8c}.recording-copy{display:flex;align-items:center;gap:13px}.zone-number{display:grid;place-items:center;width:37px;height:37px;color:var(--coral);border:1px solid #ffd0c9;border-radius:12px;font-size:11px;font-weight:700}.recording-copy h3{margin:0;font-size:15px}.recording-copy p{margin:3px 0 0;color:var(--muted);font-size:11px}.visualizer{height:42px;display:flex;align-items:center;justify-content:center;gap:5px;margin:8px 0}.visualizer span{width:4px;height:8px;border-radius:99px;background:#8ac8c0}.visualizer.active span{animation:bars .8s ease-in-out infinite alternate}.visualizer.active span:nth-child(2),.visualizer.active span:nth-child(6){animation-delay:-.2s}.visualizer.active span:nth-child(3),.visualizer.active span:nth-child(5){animation-delay:-.4s}.visualizer.active span:nth-child(4){animation-delay:-.6s}.recording-actions{justify-content:center;gap:10px}.primary-button,.secondary-button,.complete-button,.nav-button{border:0;border-radius:13px;cursor:pointer;transition:transform .16s ease,opacity .16s ease,box-shadow .16s ease}.primary-button:hover,.complete-button:hover{transform:translateY(-2px);box-shadow:0 9px 20px #087f8c33}.primary-button{display:flex;align-items:center;gap:8px;padding:12px 18px;color:#fff;background:var(--teal)}.record-dot{width:8px;height:8px;border-radius:50%;background:var(--coral);box-shadow:0 0 0 4px #ff7b6b2e}.primary-button.recording{background:#c94f45}.primary-button.recording .record-dot{background:#fff;animation:blink 1s infinite}.secondary-button{padding:12px 17px;color:var(--ink);background:#e9efec}button:disabled{cursor:not-allowed;opacity:.45;transform:none!important;box-shadow:none!important}.result-panel{display:grid;grid-template-columns:92px 1fr;gap:20px;align-items:center;margin-top:18px;padding:18px 20px;border-radius:20px;background:#fff2ed;animation:reveal .28s ease both}.score-ring{--score: 0;position:relative;width:78px;height:78px;display:grid;place-items:center;align-content:center;border-radius:50%;background:conic-gradient(var(--coral) calc(var(--score) * 1%),#f5d8d1 0)}.score-ring:before{content:"";position:absolute;top:7px;right:7px;bottom:7px;left:7px;border-radius:50%;background:#fff8f5}.score-ring strong,.score-ring span{position:relative;z-index:1}.score-ring strong{font-size:21px}.score-ring span{color:var(--muted);font-size:9px}.result-kicker{color:var(--coral);font-size:10px;font-weight:700}.result-copy h3{margin:4px 0;font-size:16px}.result-copy p{margin:0;color:var(--muted);font-size:11px;line-height:1.6}.transcript{margin-top:6px!important;color:var(--ink)!important}.card-footer{justify-content:space-between;gap:12px;margin-top:22px}.nav-button{padding:11px 4px;color:var(--muted);background:transparent}.complete-button{padding:12px 22px;color:#fff;background:var(--coral)}.complete-button.done{color:var(--teal-dark);background:#d8f0eb}.toast{position:fixed;left:50%;bottom:24px;z-index:10;max-width:calc(100% - 32px);padding:11px 18px;color:#fff;border-radius:12px;background:var(--ink);box-shadow:0 10px 28px #14323b40;font-size:12px;transform:translate(-50%)}.toast-enter-active,.toast-leave-active{transition:opacity .18s ease,transform .18s ease}.toast-enter-from,.toast-leave-to{opacity:0;transform:translate(-50%,20px)}.status-page{min-height:100vh;display:grid;place-items:center;padding:24px}.status-card{max-width:520px;padding:42px;text-align:center;border:1px solid var(--line);border-radius:32px 10px 32px 32px;background:#fffdf8eb;box-shadow:var(--shadow)}.status-code{color:var(--coral);font-family:Playfair Display,serif;font-size:72px;font-style:italic}.status-card h1{margin:4px 0 12px}.status-card p{color:var(--muted)}.status-link{display:inline-flex;margin-top:24px;padding:12px 18px;color:#fff;border-radius:12px;background:var(--teal);text-decoration:none}@keyframes bars{0%{height:8px}to{height:34px}}@keyframes blink{50%{opacity:.35}}@keyframes pulse{50%{box-shadow:0 0 0 12px #087f8c14}}@keyframes reveal{0%{opacity:0;transform:translateY(8px)}}@media(max-width:940px){.header-meta{gap:12px}.service-status{display:none}}@media(max-width:860px){.hero{grid-template-columns:1fr;padding-top:34px}.streak-card{display:none}.practice-layout{grid-template-columns:1fr}.lesson-list{position:static}.lesson-items{grid-template-columns:repeat(5,1fr)}.lesson-item{grid-template-columns:1fr;justify-items:center;text-align:center}.lesson-item-copy,.lesson-check,.text-button{display:none}}@media(max-width:600px){.site-header,.page-shell{width:min(100% - 24px,1180px)}.site-header{padding:16px 0}.header-progress>span:first-child{display:none}.header-progress{display:block;text-align:right}.progress-track{width:116px;margin-top:5px}.hero{padding:28px 4px}.hero h1{font-size:44px}.hero-copy{font-size:14px}.lesson-list,.practice-card{padding:18px}.lesson-list{border-radius:20px 7px 20px 20px}.practice-card{border-radius:7px 24px 24px}.section-heading{align-items:center}.lesson-items{margin-top:14px}.sentence-block{grid-template-columns:1fr;gap:14px;min-height:0;padding:30px 2px}.listen-button{width:auto;height:auto;display:inline-flex;justify-self:start;padding:9px 13px;border-radius:99px}.speaker-icon{font-size:12px}.english-sentence{font-size:31px}.pronunciation-panel{grid-template-columns:1fr;gap:13px}.pronunciation-grid{grid-template-columns:1fr;gap:14px}.recording-actions{flex-direction:column}.primary-button,.secondary-button{width:100%;justify-content:center}.result-panel{grid-template-columns:72px 1fr;padding:15px}.score-ring{width:66px;height:66px}.card-footer{display:grid;grid-template-columns:1fr 1fr}.complete-button{grid-column:1 / -1;grid-row:1}.nav-button{background:#f1f3ef}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}.auth-page{min-height:100vh;display:grid;place-items:center;padding:24px}.auth-card{width:100%;max-width:420px;padding:40px 36px;border:1px solid var(--line);border-radius:32px 10px 32px 32px;background:#fffdf8eb;box-shadow:var(--shadow);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}.auth-card h1{margin:0;font-size:28px;letter-spacing:-.03em}.auth-subtitle{margin:8px 0 28px;color:var(--muted);font-size:14px}.form-field{margin-bottom:18px}.form-field label{display:block;margin-bottom:6px;font-size:12px;font-weight:600;color:var(--muted)}.form-field input,.form-field select{width:100%;padding:12px 14px;color:var(--ink);border:1px solid var(--line);border-radius:12px;background:#fff;font-size:14px;font-family:inherit;transition:border-color .16s ease}.form-field input:focus,.form-field select:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px #087f8c1f}.auth-error{margin:0 0 16px;padding:10px 14px;color:#c94f45;border-radius:10px;background:#fff2ed;font-size:13px}.auth-success{margin:0 0 16px;padding:10px 14px;color:var(--teal-dark);border-radius:10px;background:var(--teal-soft);font-size:13px}.auth-button{width:100%;padding:13px;color:#fff;border:0;border-radius:13px;background:var(--teal);font-size:15px;font-weight:600;cursor:pointer;transition:transform .16s ease,box-shadow .16s ease}.auth-button:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 9px 20px #087f8c33}.auth-button:disabled{opacity:.5;cursor:not-allowed}.auth-link{margin:22px 0 0;text-align:center;color:var(--muted);font-size:13px}.auth-link a{color:var(--teal);font-weight:600}.header-auth{display:flex;align-items:center;gap:12px}.header-user{color:var(--ink);font-size:12px;font-weight:600;max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.header-nav-link{padding:6px 12px;color:var(--teal);border-radius:8px;font-size:12px;font-weight:600;text-decoration:none;transition:background .16s ease}.header-nav-link:hover{background:var(--teal-soft)}.header-logout{padding:6px 12px;color:var(--muted);border:0;border-radius:8px;background:transparent;font-size:12px;cursor:pointer;transition:color .16s ease}.header-logout:hover{color:var(--coral)}.settings-page{min-height:100vh;padding:48px 24px}.settings-card{width:100%;max-width:640px;margin:0 auto;padding:40px 36px;border:1px solid var(--line);border-radius:32px 10px 32px 32px;background:#fffdf8eb;box-shadow:var(--shadow);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}.settings-card h1{margin:0;font-size:28px;letter-spacing:-.03em}.settings-subtitle{margin:8px 0 28px;color:var(--muted);font-size:14px}.settings-section{padding:24px 0;border-top:1px solid var(--line)}.settings-section:first-of-type{border-top:0;padding-top:0}.settings-section h2{margin:0 0 8px;font-size:18px}.section-desc{margin:0 0 18px;color:var(--muted);font-size:13px}.settings-section.danger-zone h2{color:var(--coral)}.logout-button{padding:11px 20px;color:var(--coral);border:1px solid #ffd0c9;border-radius:12px;background:#fff2ed;font-size:14px;font-weight:600;cursor:pointer;transition:transform .16s ease}.logout-button:hover{transform:translateY(-2px)}.voice-loading{padding:24px;text-align:center;color:var(--muted);font-size:13px}.voice-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.voice-card{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border:2px solid var(--line);border-radius:14px;background:#fff;cursor:pointer;transition:border-color .16s ease,background .16s ease;text-align:left}.voice-card:hover{border-color:var(--teal)}.voice-card.selected{border-color:var(--teal);background:var(--teal-soft)}.voice-card-info{display:flex;flex-direction:column;gap:2px}.voice-card-info strong{font-size:15px;color:var(--ink)}.voice-meta{font-size:12px;color:var(--muted)}.voice-preview{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;background:var(--teal);color:#fff;font-size:14px;cursor:pointer;transition:transform .16s ease;flex-shrink:0}.voice-preview:hover{transform:scale(1.1)}.voice-preview.playing{background:var(--coral)}@media(max-width:480px){.voice-grid{grid-template-columns:1fr}}.recorder-panel{margin-top:24px;padding:22px;border:1px solid rgba(8,127,140,.14);border-radius:20px 20px 7px;background:#fffdf899}.attempt-hint{margin-left:8px;padding:3px 9px;border-radius:99px;background:var(--teal-soft);color:var(--teal-dark);font-size:11px;font-weight:600}.recorder-controls{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.record-button{display:inline-flex;align-items:center;gap:8px;padding:12px 20px;color:#fff;border:0;border-radius:14px;background:var(--teal);font-size:14px;font-weight:600;cursor:pointer;transition:transform .16s ease,box-shadow .16s ease}.record-button:hover{transform:translateY(-2px);box-shadow:0 9px 20px #087f8c33}.record-button.stop{background:var(--coral)}.record-dot{width:12px;height:12px;border-radius:50%;background:#fff}.record-square{width:10px;height:10px;border-radius:2px;background:#fff}.recording-player{max-width:240px;height:40px}.evaluate-button{padding:12px 20px;color:#fff;border:0;border-radius:14px;background:var(--amber, #d9913a);font-size:14px;font-weight:600;cursor:pointer;transition:transform .16s ease,opacity .16s ease}.evaluate-button:hover:not(:disabled){transform:translateY(-2px)}.evaluate-button:disabled{opacity:.5;cursor:not-allowed}.recorder-unsupported{padding:16px;text-align:center;color:var(--muted);font-size:13px}.recorder-error{margin:14px 0 0;padding:10px 14px;color:#c94f45;border-radius:10px;background:#fff2ed;font-size:13px}.result-panel{margin-top:18px;padding:24px;border:1px solid rgba(217,145,58,.2);border-radius:20px 20px 7px;background:#fffdf8bf}.result-summary{display:flex;gap:22px;align-items:flex-start}.result-score-wrap{text-align:center;flex-shrink:0}.result-score{font-size:52px;font-weight:800;line-height:1;letter-spacing:-.03em}.result-score.score-good{color:var(--teal)}.result-score.score-ok{color:var(--amber, #d9913a)}.result-score.score-bad{color:var(--coral)}.result-label{margin-top:4px;color:var(--muted);font-size:12px}.result-right{flex:1;min-width:0}.result-comment{margin:0 0 14px;font-size:15px;font-weight:600;color:var(--ink)}.dimension-bars{display:flex;flex-direction:column;gap:8px}.dimension{display:flex;align-items:center;gap:10px}.dimension-label{width:48px;font-size:12px;color:var(--muted);flex-shrink:0}.dimension-track{flex:1;height:8px;border-radius:99px;background:#087f8c1f;overflow:hidden}.dimension-track span{display:block;height:100%;border-radius:99px;background:var(--teal);transition:width .4s ease}.dimension-value{width:34px;text-align:right;font-size:12px;font-weight:700;color:var(--teal-dark)}.word-score-grid{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px;padding-top:18px;border-top:1px dashed rgba(8,127,140,.2)}.word-chip{position:relative;display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:10px;font-size:13px;font-weight:600}.word-chip i.word-badge{font-style:normal;font-size:10px;padding:2px 5px;border-radius:6px}.word-correct{background:#087f8c1f;color:var(--teal-dark)}.word-correct i.word-badge{background:var(--teal);color:#fff}.word-ok{background:#d9913a24;color:#a76a1e}.word-ok i.word-badge{background:var(--amber, #d9913a);color:#fff}.word-weak{background:#d9913a38;color:#8a5a14}.word-weak i.word-badge{background:#c08a2e;color:#fff}.word-missing,.word-extra{background:#c94f451f;color:#c94f45;text-decoration:line-through}.word-missing i.word-badge,.word-extra i.word-badge{background:var(--coral);color:#fff;text-decoration:none}@media(max-width:560px){.result-summary{flex-direction:column}}.speed-toggle{padding:7px 10px;color:var(--muted);border:1px solid var(--line);border-radius:99px;font-size:11px;font-weight:600;cursor:pointer;background:#fff;transition:color .16s ease,border-color .16s ease}.speed-toggle:hover{color:var(--teal);border-color:var(--teal)}.learn-loading{min-height:50vh;display:grid;place-items:center;padding:48px 24px;text-align:center}.learn-loading p{color:var(--muted);font-size:14px}.learn-error{color:var(--coral)!important}.learn-content{padding-bottom:64px}.learn-hero{display:grid;grid-template-columns:1fr 250px;gap:40px;align-items:end;padding:40px 0 30px}.learn-progress-card{padding:22px;border:1px solid rgba(8,127,140,.14);border-radius:24px 24px 7px;background:#fffdf8bf;box-shadow:0 14px 40px #5b452c14;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);text-align:center}.learn-progress-card strong{display:block;margin:5px 0 10px;font-size:40px;line-height:1;color:var(--teal)}.learn-progress-card strong small{margin-left:4px;font-size:14px;font-weight:500;color:var(--muted)}