:root{--primary: #2f8c9e;--danger: #d21c31;--accent-orange: #ed7844;--accent-yellow: #ffb730;--text-main: #001f24;--text-muted: #8ea1a5;--bg-light: #fcf4ed;--bg-darker: #f0eae4;--border: #e5e7eb;--content-width: 520px;--fs-heading: 17px;--fs-body: 14px;--transcript-font: 18px}*{box-sizing:border-box;-ms-overflow-style:none;scrollbar-width:none}button,textarea,select{font-family:inherit}*::-webkit-scrollbar{display:none}html,body{margin:0;min-height:100%}body{background:var(--bg-light);color:var(--text-main);font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.hidden{display:none!important}.animate-fade-in{animation:fade-in .35s ease-out}.status{position:fixed;top:12px;right:12px;padding:6px 10px;border-radius:999px;font-size:12px;font-weight:700;z-index:120}.status.disconnected{background:#eee;color:#666}.status.connected{background:#e6f4ea;color:#1e8e3e}.status.error{background:#fce8e6;color:#d93025}#appRoot{min-height:100vh}.global-header{position:fixed;inset:0 0 auto 0;z-index:100;height:64px;background:var(--bg-light);border-bottom:1px solid #f1f1f1;box-shadow:0 1px 6px #0000000d}.global-header-inner{width:100%;max-width:900px;margin:0 auto;height:100%;display:grid;grid-template-columns:128px 1fr 128px;align-items:center;padding:0 14px;gap:6px}.header-slot{display:flex;align-items:center}.left-slot{justify-content:flex-start;gap:8px}.center-slot{justify-content:center}.right-slot{justify-content:flex-end;gap:8px}.icon-btn{width:30px;height:30px;border:0;background:transparent;color:var(--text-muted);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;border-radius:8px}.icon-btn svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}.icon-btn:hover{color:var(--danger)}.streak-pill{display:inline-flex;align-items:center;justify-content:center;gap:4px;min-width:58px;height:26px;border-radius:999px;border:1px solid #f1f1f1;background:#fff;font-size:11px;font-weight:700}.flame{font-size:13px}.progress-track{width:100%;max-width:360px;height:8px;background:var(--bg-darker);border-radius:999px;overflow:hidden;position:relative}.progress-fill{position:absolute;left:0;top:0;height:100%;width:100%;background:var(--danger);transition:width .8s ease}.progress-divider{position:absolute;top:0;width:1px;height:100%;background:#ffffff73}.divider-1{left:33.33%}.divider-2{left:66.66%}.timer-pill{width:58px;height:26px;border-radius:999px;border:1px solid #f1f1f1;background:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:#001f24cc;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}.auth-section{min-height:100vh;display:flex;flex-direction:column;align-items:center;padding:24px}.auth-center{width:100%;max-width:380px;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center}.logo-box{width:80px;height:80px;border-radius:16px;background:var(--danger);display:flex;align-items:center;justify-content:center;box-shadow:0 12px 24px #00000024;transform:rotate(5deg);margin-bottom:24px}.logo-icon{width:40px;height:40px;color:#fff}.brand-title{margin:0 0 4px;font-size:42px;line-height:1;letter-spacing:-.02em}.brand-subtitle{margin:0 0 30px;color:var(--danger);font-size:24px;font-style:italic;font-weight:700;text-align:center}.auth-hint{margin:0 0 12px;font-size:14px;color:var(--text-muted);font-weight:600}.auth-fields{width:100%;display:flex;flex-direction:column;gap:10px;margin-bottom:12px}.auth-fields input{width:100%;padding:14px 16px;border:1px solid var(--border);border-radius:12px;background:#fff;outline:none;box-sizing:border-box}.auth-fields input:focus{border-color:var(--danger);box-shadow:0 0 0 2px #d21c3126}.password-wrap{position:relative;width:100%}.password-wrap input{padding-right:48px}.password-toggle{position:absolute;right:12px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:4px;display:flex;align-items:center;justify-content:center}.password-toggle svg{width:14px;height:14px;stroke:var(--text-muted);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.password-toggle:hover svg{stroke:var(--text-main)}.btn{width:100%;padding:14px 18px;border:none;border-radius:12px;color:#fff;font-weight:700;font-size:20px;cursor:pointer;transition:transform .15s ease,opacity .2s ease}.btn:hover{opacity:.95}.btn:active{transform:scale(.98)}.btn:disabled{cursor:not-allowed;opacity:.65}.btn-primary{background:var(--primary)}.btn-danger{background:var(--danger)}.btn-review{background:var(--accent-yellow);color:#fff}.review-mode .amplitude-bars{opacity:.3}.screen{min-height:100vh;display:flex;flex-direction:column;padding-top:64px}.screen-content{width:100%;max-width:1120px;margin:0 auto;padding:16px 24px 24px;flex:1}.content-panel{width:100%;max-width:var(--content-width);margin:0 auto}.common-text{font-size:var(--fs-body, 14px)}.brand-header{display:flex;flex-direction:column;align-items:center;margin-bottom:26px}.menu-cards{width:100%;max-width:var(--content-width);margin:0 auto;display:grid;gap:12px}.menu-card{border:0;border-radius:16px;background:#fff;min-height:72px;padding:16px 18px;display:flex;align-items:center;justify-content:space-between;text-align:left;box-shadow:0 1px 6px #0000000f;color:var(--text-main);font-size:20px;font-weight:700;cursor:pointer}.menu-card.primary:hover{outline:2px solid rgba(210,28,49,.2)}.menu-card:not(.primary):not(.locked):not(.menu-card-logout):hover{outline:2px solid rgba(210,28,49,.2)}.menu-card.locked{opacity:.6;cursor:default}.menu-card-logout{color:var(--text-muted);font-size:18px}.menu-logout-icon{width:1em;height:1em;vertical-align:-.1em;margin-left:.25em;margin-right:.45em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.menu-card-logout:hover{color:var(--danger)}.arrow{font-size:30px;line-height:1;color:#d1d5db}.level-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.level-card{border:0;border-radius:16px;background:#fff;min-height:130px;padding:16px;display:flex;justify-content:space-between;align-items:center;text-align:left;box-shadow:0 1px 6px #0000000f;cursor:pointer}.level-card:hover{outline:2px solid rgba(210,28,49,.2)}.level-main{display:flex;gap:10px;align-items:flex-start}.level-icon{font-size:26px;line-height:1}.level-title{font-size:18px;font-weight:700;margin-bottom:6px}.level-details{color:#001f24b3}.module-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.module-card{border:0;border-radius:16px;background:#fff;min-height:86px;padding:14px 16px;display:flex;justify-content:space-between;align-items:center;box-shadow:0 1px 6px #0000000f;cursor:pointer;text-align:left}.module-card:hover{outline:2px solid rgba(210,28,49,.2)}.lesson-select-grid{display:grid;gap:12px;justify-content:center}.lesson-select-grid[data-cols="2"]{grid-template-columns:repeat(2,minmax(0,254px))}.lesson-select-grid[data-cols="3"]{grid-template-columns:repeat(3,minmax(0,254px))}.lesson-select-grid[data-cols="4"]{grid-template-columns:repeat(4,minmax(0,254px))}@media(max-width:768px){.lesson-select-grid[data-cols]{grid-template-columns:repeat(2,minmax(0,254px))}}@media(max-width:540px){.lesson-select-grid[data-cols]{grid-template-columns:1fr}}.mode-grid{display:grid;gap:16px;width:100%;max-width:520px;margin:0 auto}.mode-card{border:0;border-radius:16px;background:#fff;min-height:100px;padding:20px 18px;display:flex;align-items:center;justify-content:space-between;text-align:left;box-shadow:0 1px 6px #0000000f;cursor:pointer;width:100%}.mode-card:hover{outline:2px solid rgba(210,28,49,.2)}.mode-card-main{display:flex;align-items:flex-start;gap:14px}.mode-card-icon{font-size:28px;line-height:1;flex:0 0 auto;margin-top:2px}.mode-card-title{font-size:18px;font-weight:700;color:var(--text-main);margin-bottom:4px}.mode-card-desc{color:#001f24b3;line-height:1.4}@media(max-width:768px){.mode-card{min-height:88px;padding:16px 14px}.mode-card-title{font-size:16px}}.module-main{display:flex;align-items:flex-start;gap:10px;min-width:0}.module-badge{width:34px;height:34px;border-radius:999px;background:#c7ccd0;color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex:0 0 auto}.module-name{font-size:17px;font-weight:700;line-height:1.2;white-space:normal;overflow-wrap:anywhere}.lesson-screen{justify-content:flex-start;min-height:100vh;height:100vh;overflow:hidden}.banner{display:flex;align-items:center;justify-content:center;gap:8px;padding:16px 44px 16px 20px;border-radius:12px;color:#fff;font-size:15px;font-weight:700;text-align:center;position:relative}.banner--fixed{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:110;width:calc(100% - 48px);max-width:520px;min-height:96px;box-shadow:0 4px 16px #00000026}.banner--inset{position:absolute;top:0;right:0;bottom:0;left:0;z-index:10}.banner--teal{background:var(--primary)}.banner--yellow{background:var(--accent-yellow)}.banner-close{position:absolute;right:10px;top:10px;width:28px;height:28px;border:none;background:#fff;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0}.banner-close svg{width:14px;height:14px;stroke:currentColor;stroke-width:3.5;stroke-linecap:round;fill:none}.banner--teal .banner-close{color:var(--primary)}.banner--yellow .banner-close{color:var(--accent-yellow)}.banner-close:hover{background:#f0f0f0}.banner-enter{animation:banner-fade-in .4s ease forwards}.banner-exit{animation:banner-fade-out .3s ease forwards}@keyframes banner-fade-in{0%{opacity:0}to{opacity:1}}@keyframes banner-fade-out{0%{opacity:1}to{opacity:0}}.banner__text{flex:0 1 auto}.reconnect-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:9000;background:#0000008c;display:flex;align-items:center;justify-content:center}.reconnect-content{text-align:center;color:#fff;display:flex;flex-direction:column;align-items:center;gap:12px}.reconnect-reason{font-size:1.1rem;font-weight:600;margin:0}.reconnect-content #reconnectMessage{font-size:.95rem;opacity:.8;margin:0}.reconnect-spinner{width:40px;height:40px;border:4px solid rgba(255,255,255,.25);border-top-color:#fff;border-radius:50%;animation:reconnect-spin .8s linear infinite}@keyframes reconnect-spin{to{transform:rotate(360deg)}}.mic-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:9000;background:#0000008c;display:flex;align-items:center;justify-content:center}.mic-content{max-width:460px;margin:0 24px;text-align:center;color:#fff;display:flex;flex-direction:column;align-items:center;gap:14px;padding:28px 22px}.mic-title{font-size:1.15rem;font-weight:700;margin:0}.mic-body{font-size:.95rem;line-height:1.45;opacity:.9;margin:0}.mic-overlay-close{position:absolute;top:16px;right:16px;color:#222}.lesson-content{width:100%;max-width:540px;margin:0 auto;padding:0 16px 20px;flex:1;min-height:0;display:flex;flex-direction:column}.lesson-title-wrap{display:flex;flex-direction:column;align-items:center;margin-top:10px;margin-bottom:18px}.lesson-chip{margin:0 0 4px;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--primary)}.lesson-title-wrap h2{margin:0;text-align:center;font-size:22px}.amplitude-wrap{position:relative;width:100%;display:flex;justify-content:center;margin:6px 0 14px}.amplitude-bars{width:100%;max-width:420px;min-height:96px;display:flex;align-items:center;justify-content:center;gap:6px}.amplitude-bars .bar{width:6px;height:12px;border-radius:999px;background:#d7dadd;transform-origin:center;transition:height .14s cubic-bezier(.22,.61,.36,1),background-color .18s ease,opacity .18s ease}.amplitude-bars.idle .bar,.amplitude-bars.ai .bar{background:var(--danger)}.amplitude-bars.user .bar{background:var(--accent-yellow)}.transcript-toggle-btn{position:absolute;top:8px;right:8px;z-index:2;width:38px;height:38px;color:var(--text-muted)}.transcript-toggle-btn.transcript-active{color:var(--accent-yellow)}.transcript-toggle-btn:hover{color:var(--text-muted)}.transcript-toggle-btn.transcript-active:hover{color:var(--accent-yellow)}.transcript-toggle-btn svg{width:33px;height:33px;fill:currentColor;stroke:none;display:block}.transcript-panel{background:#fff;border:1px solid #f1f1f1;border-radius:22px;margin-bottom:8px;padding:8px;flex:1;min-height:0;overflow:hidden;position:relative}#lessonMainBtn{margin-top:auto;margin-bottom:0}.chat-log{height:100%;overflow-y:auto;padding:10px;display:flex;flex-direction:column;gap:8px}.transcript-placeholder{position:absolute;top:0;right:0;bottom:0;left:0;display:none;flex-direction:column;align-items:center;justify-content:center;font-weight:800;letter-spacing:.08em;color:var(--accent-yellow);pointer-events:none}.transcript-panel.transcript-muted .chat-log{visibility:hidden}.transcript-panel.transcript-muted .transcript-placeholder{display:flex}.transcript-panel:not(.lesson-active) .lp-dots{display:none}.lp-title{letter-spacing:.08em}.lp-dots{display:inline-flex;gap:6px;margin-top:10px}.lp-dots span{width:8px;height:8px;border-radius:50%;background:var(--accent-yellow);animation:lp-dot 1.4s ease-in-out infinite}.lp-dots span:nth-child(2){animation-delay:.2s}.lp-dots span:nth-child(3){animation-delay:.4s}@keyframes lp-dot{0%,60%,to{transform:translateY(0);opacity:.4}30%{transform:translateY(-8px);opacity:1}}.message{max-width:82%;padding:6px 10px;border-radius:16px;word-break:break-word;font-size:var(--transcript-font, 18px)}.message.user{align-self:flex-end;background:var(--primary);color:#fff}.message.gemini{align-self:flex-start;background:var(--bg-darker);color:var(--text-main)}.message-label{display:block;font-size:.55rem;letter-spacing:.08em;text-transform:uppercase;opacity:.45;margin-bottom:1px}.settings-group{display:flex;flex-direction:column}.settings-label{margin:0 0 10px;font-weight:600;font-size:var(--fs-heading);color:var(--text-main)}#afterlesson-section .settings-label{padding-left:19.5px}.size-slider{display:flex;align-items:flex-start;gap:18px}.size-slider-control{flex:1}.size-slider-track{position:relative;height:32px;margin-bottom:6px}.size-slider-rail,.size-slider-fill{position:absolute;top:50%;left:13px;height:8px;transform:translateY(-50%);border-radius:4px}.size-slider-rail{right:13px;background:var(--bg-darker)}.size-slider-fill{width:0;background:var(--primary);transition:width .15s ease}.size-slider-dot{position:absolute;top:50%;transform:translate(-50%,-50%);width:26px;height:26px;padding:0;border-radius:50%;border:3px solid var(--primary);background:#fff;box-shadow:0 2px 5px #00000026;cursor:pointer;transition:background .15s ease}.size-slider-dot:nth-of-type(1){left:13px}.size-slider-dot:nth-of-type(2){left:calc(13px + (100% - 26px)*.3333)}.size-slider-dot:nth-of-type(3){left:calc(13px + (100% - 26px)*.6667)}.size-slider-dot:nth-of-type(4){left:calc(100% - 13px)}.size-slider-dot.active{background:var(--primary)}.size-slider-ticks{display:flex;justify-content:space-between;font-size:11px;color:var(--text-muted)}.size-slider-sample{flex:0 0 72px;width:72px;height:32px;display:flex;align-items:center;justify-content:center;background:var(--bg-darker);border-radius:12px;color:var(--text-main);line-height:1;white-space:nowrap}#transcriptFontSample{font-size:var(--transcript-font, 18px)}#uiFontSample{font-size:var(--fs-body, 14px)}.settings-subsection{margin-top:28px}.segmented{align-self:flex-start;display:inline-flex;border:.5px solid var(--border);border-radius:999px;background:#fff;padding:3px;gap:4px}.pill-choice{border:0;background:transparent;border-radius:999px;padding:8px 16px;font-size:var(--fs-body);font-weight:600;color:var(--text-muted);cursor:pointer;transition:background .15s ease,color .15s ease}.pill-choice.active{background:var(--primary);color:#fff}.message.user .message-label{text-align:right}.typing-indicator{display:inline-flex;gap:5px;padding:10px 14px;border-radius:16px}.typing-indicator.user{align-self:flex-end;background:var(--primary)}.typing-indicator.gemini{align-self:flex-start;background:var(--bg-darker)}.typing-indicator span{width:7px;height:7px;border-radius:50%;animation:lp-dot 1.4s ease-in-out infinite}.typing-indicator.user span{background:#fff}.typing-indicator.gemini span{background:var(--text-main)}.typing-indicator span:nth-child(2){animation-delay:.2s}.typing-indicator span:nth-child(3){animation-delay:.4s}.preparing-loading{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;color:var(--text-muted);font-size:.95rem;font-weight:600;letter-spacing:.02em;pointer-events:none;animation:prep-pulse 1.4s ease-in-out infinite}@keyframes prep-pulse{0%,to{opacity:.5}50%{opacity:1}}.changelog-list{width:100%;max-width:var(--content-width);margin:0 auto}.changelog-table{display:flex;flex-direction:column;gap:0;background:#fff;border-radius:16px;box-shadow:0 1px 6px #0000000f;overflow:hidden}.changelog-row{display:grid;grid-template-columns:36px 1fr;align-items:start;padding:14px 18px;border-bottom:1px solid #f0f0f0}.changelog-row:last-child{border-bottom:none}.changelog-cell-emoji{font-size:18px;line-height:1.2;grid-row:1 / 3}.changelog-cell-date{font-size:13px;color:var(--text-muted);font-weight:600;white-space:nowrap}.changelog-cell-text{line-height:1.45;color:#1a1a2e;padding-top:2px}@media(max-width:540px){.changelog-row{grid-template-columns:30px 1fr}.changelog-cell-date{font-size:12px}}.account-stats{width:100%;max-width:var(--content-width);margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.account-card{background:#fff;border-radius:16px;padding:18px 16px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:4px;box-shadow:0 1px 6px #0000000f;color:var(--text-main);min-height:110px}.account-card-emoji{font-size:28px;line-height:1;margin-bottom:6px}.account-card-value{font-size:24px;font-weight:700;color:var(--text-main);line-height:1.1;white-space:nowrap}.account-card-label{font-size:13px;font-weight:600;color:var(--text-muted);line-height:1.3}@media(max-width:540px){.account-stats{grid-template-columns:repeat(2,1fr);max-width:420px;gap:10px}.account-card{padding:14px;min-height:96px}.account-card-emoji{font-size:22px;margin-bottom:4px}.account-card-value{font-size:20px}.account-card-label{font-size:12px}}.feedback-form{width:100%;max-width:var(--content-width);margin:0 auto;display:flex;flex-direction:column;gap:22px}.feedback-question{display:flex;flex-direction:column;gap:8px}.feedback-question-center{align-items:center}.feedback-label{margin:0;font-size:var(--fs-heading);font-weight:700}.feedback-rating{display:flex;gap:2px}.feedback-rating button{width:44px;height:44px;border:none;border-radius:0;background:transparent;font-size:32px;cursor:pointer;color:#ccc;transition:transform .15s ease,color .15s ease;line-height:1;padding:0}.feedback-rating button:hover{transform:scale(1.15)}.feedback-rating button.active{color:#f5a623}.feedback-options{display:flex;flex-direction:column;gap:8px}.feedback-options button{padding:12px 16px;border:2px solid var(--border);border-radius:12px;background:#fff;font-size:15px;font-weight:600;text-align:left;cursor:pointer;transition:border-color .15s ease}.feedback-options button:hover{border-color:var(--primary)}.feedback-options button.selected{border-color:var(--primary);background:#2f8c9e14}.feedback-textarea{width:100%;padding:14px 16px;border:1px solid var(--border);border-radius:12px;background:#fff;font-family:inherit;resize:vertical;outline:none;box-sizing:border-box}.feedback-textarea:focus{border-color:var(--primary);box-shadow:0 0 0 2px #2f8c9e26}.feedback-hint{margin:0;font-size:14px;color:var(--text-muted);font-weight:600;text-align:center}.app-footer{margin-top:auto;padding:10px 12px 14px;text-align:center;opacity:.7}.stars{display:flex;align-items:center;justify-content:center;gap:4px;margin-bottom:4px}.star{width:10px;height:10px}.star-yellow{fill:var(--accent-yellow)}.star-orange{fill:var(--accent-orange)}.star-red{fill:var(--danger)}.copyright{margin:0;font-size:11px;color:var(--text-muted);font-weight:600}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@media(max-width:1024px){.level-grid,.module-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:768px){.global-header-inner{grid-template-columns:116px 1fr 116px;padding:0 8px}.brand-title{font-size:34px}.brand-subtitle{font-size:20px;margin-bottom:20px}.logo-box{width:64px;height:64px;margin-bottom:16px}.logo-icon{width:34px;height:34px}.btn{font-size:18px}.menu-card{min-height:66px;font-size:18px}.level-grid{grid-template-columns:1fr}.module-grid{grid-template-columns:1fr;gap:10px}.module-card{min-height:74px;padding:12px 14px}.module-badge{width:30px;height:30px;font-size:11px}.module-name{font-size:16px}.screen-content{padding:10px 14px 18px}.lesson-content{min-height:0}}@media(max-width:380px){.module-card{padding:10px 12px}.module-main{gap:8px}.module-name{font-size:15px}}