:root{--canvas: #f0eee9;--cream: #fdf8f3;--bar: #f5ede0;--ink: #292524;--muted: #78716c;--faint: #a8a29e;--shell-line: #44403c;--bar-line: #78716c;--row-line: #a8a29e;--divider: #d6d3d1;--track: #e7e5e4;--terracotta: #c8603a;--terracotta-tint: #f9e9e1;--sage: #5f8455;--sage-tint: #e9f0e6;--amber: #b45309;--amber-tint: #faf0e2;--tab-label: #57534e;--shell-w: 375px;--shell-h: 812px;--bar-h: 64px}*{box-sizing:border-box}html,body{margin:0;padding:0;background:var(--canvas);color:var(--ink);font-family:Kalam,cursive;-webkit-font-smoothing:antialiased}button,input,textarea{font-family:inherit;color:inherit}.stage{min-height:100vh;min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:24px 0}.phone{width:var(--shell-w);height:var(--shell-h);max-height:100vh;max-height:100dvh;background:var(--cream);border:2px solid var(--shell-line);border-radius:28px;box-shadow:3px 3px #00000026;overflow:hidden;display:flex;flex-direction:column}.phone__body{flex:1;overflow-y:auto;padding:20px;display:flex;flex-direction:column;gap:14px}@media(max-width:420px){.stage{padding:0;align-items:stretch}.phone{width:100%;height:100vh;height:100dvh;border:none;border-radius:0;box-shadow:none;padding-left:env(safe-area-inset-left,0px);padding-right:env(safe-area-inset-right,0px)}.titlebar{height:auto;min-height:var(--bar-h);padding-top:env(safe-area-inset-top,0px)}.tabbar{height:auto;min-height:var(--bar-h);padding-bottom:env(safe-area-inset-bottom,0px)}.phone__body--bare{padding-top:calc(20px + env(safe-area-inset-top,0px));padding-bottom:calc(20px + env(safe-area-inset-bottom,0px))}.titlebar__back,.login__forgot,.login__signuplink,.write__ackedit,.chat__mute,.mic__voicetoggle,.mic__noticeretry,.speak__switchbtn{position:relative}.titlebar__back:after,.login__forgot:after,.login__signuplink:after,.write__ackedit:after,.chat__mute:after,.mic__voicetoggle:after,.mic__noticeretry:after,.speak__switchbtn:after{content:"";position:absolute;top:-16px;right:-16px;bottom:-16px;left:-16px}.speak__switchbtn:after{top:-5px;right:-3px;bottom:-5px;left:-3px}}.titlebar{height:var(--bar-h);flex-shrink:0;background:var(--bar);border-bottom:2px solid var(--bar-line);display:flex;align-items:center;position:relative;padding:0 14px}.titlebar--home{justify-content:space-between}.titlebar--sub{justify-content:center}.titlebar__title{margin:0;font-size:18px;font-weight:700;color:var(--ink)}.titlebar--home .titlebar__title{font-size:15px}.titlebar__title--long{font-size:16px}.titlebar__back{position:absolute;left:16px;background:none;border:none;padding:0;font-size:22px;line-height:1;color:var(--shell-line);cursor:pointer}.titlebar__flag{flex-shrink:0}.titlebar--sub .titlebar__flag{position:absolute;right:14px}.tabbar{height:var(--bar-h);flex-shrink:0;background:var(--bar);border-top:2px solid var(--bar-line);display:flex;justify-content:space-around;align-items:center}.tabbar__tab{background:none;border:none;padding:0;display:flex;flex-direction:column;align-items:center;gap:2px;font-size:10px;color:var(--tab-label);cursor:default}.tabbar__glyph{width:22px;height:22px;border:2px solid var(--bar-line);border-radius:50%}.flag{object-fit:cover;border:1px solid var(--bar-line);display:block}.placeholder{border:2px solid var(--row-line);border-radius:16px;padding:20px;text-align:center;color:var(--muted);font-size:13px}.login{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;padding:32px;text-align:center}.login__title{margin:0;font-size:24px;font-weight:700;color:var(--ink)}.login__subtitle{margin:4px 0 0;font-size:13px;color:var(--muted)}.login__form{width:100%;display:flex;flex-direction:column;gap:14px;text-align:left}.login__label{display:block;font-size:11px;color:var(--muted);margin-bottom:4px}.login__input{width:100%;border:2px solid var(--row-line);border-radius:12px;padding:12px 14px;font-size:13px;background:none;color:var(--ink)}.login__input::placeholder{color:var(--faint)}.login__input:focus{outline:none;border-color:var(--terracotta)}.login__forgot{align-self:flex-end;background:none;border:none;padding:0;font-size:12px;color:var(--terracotta);cursor:pointer}.login__error{margin:0;font-size:12px;color:var(--terracotta)}.login__submit{background:var(--terracotta);color:var(--cream);border:none;border-radius:12px;padding:14px;font-weight:700;font-size:16px;cursor:pointer}.login__or{display:flex;align-items:center;gap:10px;margin:6px 0}.login__rule{flex:1;height:1px;background:var(--divider)}.login__ortext{font-size:11px;color:var(--faint)}.login__google{border:2px solid var(--sage);color:var(--sage);background:none;border-radius:12px;padding:14px;font-weight:700;font-size:14px;cursor:pointer}.login__signup{margin:0;font-size:13px;color:var(--muted)}.login__signuplink{background:none;border:none;padding:0;font-size:13px;font-weight:700;color:var(--terracotta);cursor:pointer}.home__greeting{margin:0 0 2px;font-size:13px;color:var(--muted)}.card{width:100%;border:2px solid var(--tone);border-radius:16px;background:var(--tone-tint);padding:16px;display:flex;align-items:center;gap:14px;text-align:left;cursor:pointer;flex-shrink:0}.card--terracotta{--tone: var(--terracotta);--tone-tint: var(--terracotta-tint)}.card--sage{--tone: var(--sage);--tone-tint: var(--sage-tint)}.card--amber{--tone: var(--amber);--tone-tint: var(--amber-tint)}.card__badge{width:44px;height:44px;flex-shrink:0;border:2px solid var(--tone);border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:16px;color:var(--tone)}.card__text{flex:1}.card__title{display:block;font-size:16px;font-weight:700;color:var(--ink)}.card__desc{display:block;font-size:12px;color:var(--muted)}.phone__body--list{padding:16px;gap:10px}.lesson{display:flex;align-items:center;gap:12px;padding:12px;border-bottom:1px solid var(--row-line);flex-shrink:0}.lesson__number{width:36px;height:36px;flex-shrink:0;border:2px solid var(--row-line);border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;color:var(--muted)}.lesson__number--started{border-color:var(--terracotta);color:var(--terracotta)}.lesson__text{flex:1}.lesson__title{font-size:14px;font-weight:700;color:var(--ink)}.lesson__desc{font-size:11px;color:var(--muted)}.lesson__track{height:6px;margin-top:6px;background:var(--track);border-radius:3px;overflow:hidden}.lesson__fill{height:100%;background:var(--sage)}.lesson__chevron{font-size:18px;color:var(--row-line)}.phone__body--sets{padding:16px;gap:12px}.set{border:2px solid var(--terracotta);border-radius:16px;background:var(--terracotta-tint);padding:14px;flex-shrink:0}.set--active{border-color:var(--sage);background:var(--sage-tint);display:flex;flex-direction:column;gap:8px}.set--row{display:flex;justify-content:space-between;align-items:center}.set--locked{border-color:var(--row-line);background:#f5f5f4}.set__head{display:flex;justify-content:space-between;align-items:center}.set__title{font-weight:700;color:var(--ink)}.set--locked .set__title{color:var(--muted)}.set__count,.set__note{font-size:11px;color:var(--muted)}.set--locked .set__note{color:var(--faint)}.set__chevron{font-size:18px;color:var(--terracotta)}.set__lock{font-size:16px;color:var(--faint)}.set__hint{font-size:10px;color:var(--faint);text-align:center}.card3d{width:100%;background:var(--cream);border:2px solid var(--row-line);border-radius:10px;padding:14px;display:flex;align-items:center;justify-content:space-between;text-align:left;cursor:pointer}.card3d__lead{display:block;font-size:16px;font-weight:700;color:var(--ink)}.card3d__gloss{display:block;font-size:11px;color:var(--muted)}.card3d__play{width:30px;height:30px;flex-shrink:0;border:2px solid var(--sage);border-radius:50%;background:none;padding:0;display:flex;align-items:center;justify-content:center;font-size:11px;color:var(--sage);cursor:pointer}.phone__body--quiz{padding:20px;gap:20px;overflow:hidden}.quiz__track{height:8px;background:var(--track);border-radius:4px;overflow:hidden}.quiz__fill{height:100%;background:var(--terracotta)}.quiz__counter{margin-top:4px;font-size:11px;color:var(--muted)}.quiz__prompt{font-size:18px;font-weight:700;line-height:1.4;color:var(--ink)}.quiz__options{display:flex;flex-direction:column;gap:10px}.option{width:100%;border:2px solid var(--row-line);border-radius:12px;padding:14px;background:none;display:flex;align-items:center;gap:10px;text-align:left;cursor:pointer}.option--picked{border-color:var(--terracotta);background:var(--terracotta-tint)}.option__radio{width:18px;height:18px;flex-shrink:0;border:2px solid var(--bar-line);border-radius:50%}.option--picked .option__radio{border-color:var(--terracotta);background:var(--terracotta)}.option__label{color:var(--ink)}.quiz__spacer{flex:1}.quiz__submit{background:var(--terracotta);color:var(--cream);border:none;border-radius:12px;padding:14px;text-align:center;font-weight:700;font-size:16px;cursor:pointer;flex-shrink:0}.quiz__submit:disabled{opacity:.5;cursor:default}.results{flex:1;display:flex;flex-direction:column;gap:8px;text-align:center}.results__score{margin-top:40px;font-size:22px;font-weight:700;color:var(--ink)}.results__note{font-size:12px;color:var(--muted)}.phone__body--writing{padding:18px;gap:14px}.write__prompt{border:2px solid var(--terracotta);border-radius:14px;background:var(--terracotta-tint);padding:14px;flex-shrink:0}.write__promptlabel{font-size:11px;color:var(--muted);margin-bottom:4px}.write__prompttext{font-style:italic;font-size:14px;color:var(--ink)}.write__response{border:2px solid var(--row-line);border-radius:12px;padding:12px;height:100px;resize:none;background:none;font-size:14px;flex-shrink:0}.write__response:focus{outline:none;border-color:var(--terracotta)}.write__submit{background:var(--terracotta);color:var(--cream);border:none;border-radius:12px;padding:12px;text-align:center;font-weight:700;cursor:pointer;flex-shrink:0}.write__submit:disabled{opacity:.5;cursor:default}.write__ack{border:2px solid var(--row-line);border-radius:12px;padding:14px;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;flex-shrink:0}.write__ackline{font-size:14px;color:var(--ink)}.write__ackedit{background:none;border:none;padding:0;font-size:13px;font-weight:700;color:var(--terracotta);cursor:pointer}.write__divider{border-top:2px solid var(--row-line);margin-top:6px;padding-top:14px;font-weight:700;color:var(--ink);flex-shrink:0}.write__hint{font-size:13px;color:var(--muted);flex-shrink:0}.write__rec{display:flex;flex-direction:column;align-items:center;gap:10px;padding:10px 0;flex-shrink:0}.write__recbtn{width:64px;height:64px;border:3px solid var(--sage);border-radius:50%;background:none;display:flex;align-items:center;justify-content:center;color:var(--sage);font-weight:700;font-size:11px;cursor:pointer}.write__recbtn--recording{background:var(--sage);color:var(--cream)}.write__wave{display:flex;gap:3px;align-items:center;height:24px}.write__bar{width:3px;background:var(--sage);transform-origin:bottom}@keyframes write-wave{0%,to{transform:scaleY(.6)}50%{transform:scaleY(1.15)}}.write__wave--recording .write__bar{animation:write-wave .9s ease-in-out infinite}@media(prefers-reduced-motion:reduce){.write__wave--recording .write__bar{animation:none}}.speak__switch{display:flex;gap:8px;align-self:center;flex-shrink:0}.speak__switchbtn{border:2px solid var(--row-line);border-radius:16px;padding:6px 14px;background:none;cursor:pointer;font-size:12px;font-weight:700;color:var(--tab-label)}.speak__switchbtn[aria-pressed=true]{background:var(--sage);border-color:var(--sage);color:var(--cream)}.speak__spend{align-self:center;font-size:10px;color:var(--faint);flex-shrink:0}.speak__drill{display:flex;flex-direction:column;gap:14px}.speak__comparerow{display:flex;gap:8px}.speak__comparebtn{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;border:2px solid var(--row-line);border-radius:16px;padding:8px 12px;background:none;cursor:pointer;font-size:12px;font-weight:700;color:var(--tab-label)}.speak__comparebtn:disabled{opacity:.5;cursor:default}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.phone__body--speak{padding:16px;gap:10px}.phone__body--speak .chat__botrow,.phone__body--speak .chat__userrow{max-width:84%}.speak__caption{align-self:center;font-size:10px;color:var(--faint);border:1px solid var(--divider);border-radius:8px;padding:6px 10px;flex-shrink:0}.speak__pending{align-self:flex-end;max-width:84%;display:flex;align-items:center;gap:8px;border:2px dashed var(--terracotta);background:var(--terracotta-tint);border-radius:14px 14px 4px;padding:10px 14px}.speak__pendingdots{display:flex;gap:4px;align-items:center}.speak__pendingdot{width:5px;height:5px;border-radius:50%;background:var(--terracotta)}.speak__pendingdot:nth-child(2){opacity:.6}.speak__pendingdot:nth-child(3){opacity:.3}.speak__pendinglabel{font-size:12px;color:var(--muted)}.mic{border-top:2px solid var(--row-line);padding-top:14px;display:flex;flex-direction:column;align-items:center;gap:8px;flex-shrink:0}.mic__button{width:84px;height:84px;border:3px solid var(--sage);border-radius:50%;background:var(--sage-tint);display:flex;align-items:center;justify-content:center;padding:0;cursor:pointer;touch-action:none}.mic__button--recording{background:var(--sage);box-shadow:0 0 0 6px var(--sage-tint)}.mic__button--transcribing{border-color:var(--faint);background:#f5f5f4;cursor:default}.mic__hint{font-size:12px;color:var(--muted)}.mic__wave{display:flex;gap:3px;align-items:center;height:24px}.mic__bar{width:3px;background:var(--sage);transform-origin:bottom}@keyframes mic-wave{0%,to{transform:scaleY(.6)}50%{transform:scaleY(1.15)}}.mic__wave--live .mic__bar{animation:mic-wave .9s ease-in-out infinite}@media(prefers-reduced-motion:reduce){.mic__wave--live .mic__bar{animation:none}}.mic__status{font-size:12px;font-weight:700;color:var(--sage)}.mic__timer{font-size:11px;color:var(--muted)}.mic__replying{display:flex;align-items:center;gap:6px;border:2px solid var(--sage);border-radius:16px;padding:6px 12px;background:var(--sage-tint)}.mic__replyingbars{display:flex;align-items:center;gap:2px;height:12px}.mic__replyingbar{width:2px;background:var(--sage)}.mic__replyinglabel{font-size:11px;font-weight:700;color:var(--sage)}.mic__voicetoggle{display:flex;align-items:center;gap:6px;border:2px solid var(--row-line);border-radius:16px;padding:6px 12px;background:none;cursor:pointer;font-size:11px;color:var(--tab-label)}.mic__voicetoggle[aria-pressed=true]{color:var(--faint);border-color:var(--faint)}.mic__notice{border:2px solid var(--terracotta);border-radius:12px;background:var(--cream);padding:12px;display:flex;gap:10px;align-items:flex-start;text-align:left;cursor:pointer;width:100%}.mic__notice--dismissed{border-color:var(--amber)}.mic__notice--static{cursor:default}.mic__noticeretry{display:inline-flex;margin-top:8px;border:2px solid var(--terracotta);border-radius:10px;padding:6px 12px;font-size:12px;font-weight:700;color:var(--terracotta);background:none;cursor:pointer}.mic__noticetitle{display:block;font-size:13px;font-weight:700;color:var(--ink)}.mic__noticeline{display:block;font-size:11px;color:var(--muted)}.phone__body--chat{padding:16px;gap:10px}.chat__bot{min-width:0;background:var(--sage-tint);border:2px solid var(--sage);border-radius:14px 14px 14px 4px;padding:10px 14px;font-size:13px;color:var(--ink)}.chat__botrow{display:flex;align-items:flex-end;gap:6px;align-self:flex-start;max-width:75%}.chat__user{align-self:flex-end;max-width:75%;background:var(--terracotta-tint);border:2px solid var(--terracotta);border-radius:14px 14px 4px;padding:10px 14px;font-size:13px;color:var(--ink)}.chat__userrow{display:flex;align-items:flex-end;gap:6px;align-self:flex-end;max-width:75%}.chat__userrow .chat__user{max-width:none}.chat__chip{align-self:center;font-size:10px;color:var(--faint);border:1px solid var(--divider);border-radius:8px;padding:6px 10px;margin:2px 0}.chat__toolbar{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-shrink:0}.chat__mute{background:none;border:none;padding:0;font-size:12px;font-weight:700;color:var(--sage);cursor:pointer}.chat__mute[aria-pressed=true]{color:var(--faint)}.chat__notice{font-size:10px;color:var(--faint);text-align:right}.chat__play{width:30px;height:30px;flex-shrink:0;border:2px solid var(--sage);border-radius:50%;background:none;display:flex;align-items:center;justify-content:center;font-size:11px;color:var(--sage);cursor:pointer}.chat__play--terracotta{border-color:var(--terracotta);color:var(--terracotta)}.chat__play--active{background:var(--sage)}.chat__play--terracotta.chat__play--active{background:var(--terracotta)}.chat__spacer{flex:1}.chat__composer{display:flex;gap:8px;align-items:center;border-top:2px solid var(--row-line);padding-top:12px;flex-shrink:0}.chat__input{flex:1;border:2px solid var(--row-line);border-radius:20px;padding:10px 14px;font-size:12px;background:none;color:var(--ink)}.chat__input::placeholder{color:var(--faint)}.chat__send{width:38px;height:38px;flex-shrink:0;border:none;border-radius:50%;background:var(--terracotta);color:var(--cream);display:flex;align-items:center;justify-content:center;font-size:16px;cursor:pointer}