html{scroll-padding-bottom:100px;-webkit-text-size-adjust:100%}
.workspace>*,.exercise-top>*,.section-header>*,.course-heading>*,.intro>div{min-width:0}
.word,.question,.speak-card blockquote,.example,.feedback,.transcript{overflow-wrap:anywhere}
@media(max-width:650px){
  body{padding-bottom:calc(76px + env(safe-area-inset-bottom,0px))}
  .sidebar{padding:16px 16px 0;border:0}
  .brand{font-size:20px;gap:10px}
  .sidebar nav{position:fixed;z-index:70;left:0;right:0;bottom:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin:0;padding:10px max(10px,env(safe-area-inset-right,0px)) calc(10px + env(safe-area-inset-bottom,0px)) max(10px,env(safe-area-inset-left,0px));background:#edf3fff2;backdrop-filter:blur(16px);border-top:1px solid #fff;box-shadow:0 -5px 20px #c5d2eb55}
  .nav-item{min-width:0;min-height:46px;padding:10px 3px;display:flex;align-items:center;justify-content:center;font-size:14px;line-height:1.3;border-radius:14px}
  .topbar{height:58px;padding:0 16px}
  .top-actions{gap:10px;min-width:0}
  .top-pill{font-size:13px;padding:6px 12px;flex-shrink:0}
  .profile-chip{min-height:44px;max-width:calc(100% - 95px);font-size:14px}
  .profile-chip>span:first-of-type{max-width:calc(100vw - 190px)}
  main{padding:20px 16px 24px}
  .intro.with-mascot{align-items:center;gap:10px;margin-bottom:22px;min-height:0}
  .intro.with-mascot>div{flex:1}
  .intro.with-mascot h1{font-size:clamp(22px,6.2vw,27px);line-height:1.4;margin:8px 0 10px}
  .intro.with-mascot p{max-width:none;font-size:14px;line-height:1.7;margin:0}
  .intro .eyebrow{font-size:11px;letter-spacing:.4px}
  .mascot{display:block;width:70px;height:80px;margin:0;flex-shrink:0}
  .course-section{margin-bottom:22px}
  .course-heading{gap:10px;margin-bottom:12px;align-items:center}
  .course-heading h2{font-size:17px}
  .course-heading>span{font-size:12px;max-width:112px;line-height:1.5}
  .course-picker{gap:10px}
  .course-picker button{min-height:62px;padding:8px 6px;border-radius:14px}
  .course-picker span{font-size:12px}
  .course-section>p{line-height:1.7;margin:12px 0 0}
  .workspace{gap:20px}
  .study{padding:20px 16px;border-radius:22px;min-width:0}
  .section-header{gap:10px;align-items:flex-start;margin-bottom:18px}
  .section-header h2{font-size:20px;line-height:1.5;margin-top:6px}
  .badge{font-size:12px;white-space:nowrap;padding:5px 8px;flex-shrink:0;margin-top:5px}
  .exercise-top{gap:12px;font-size:13px;line-height:1.6}
  .exercise-top>span:last-child{text-align:right}
  .word-card{min-height:280px;padding:28px 16px}
  .word{max-width:100%;font-size:clamp(30px,9vw,40px);letter-spacing:-.5px}
  .phonetic{font-size:16px;overflow-wrap:anywhere}
  .meaning{padding:14px}
  .example{font-size:16px}
  .btn,.text-button,.option,.dialog-close,.upload-label{min-height:44px;touch-action:manipulation}
  .actions{gap:10px;flex-wrap:wrap}
  .actions .btn{flex:1 1 125px;font-size:14px;padding:11px 9px}
  .listen-panel,.speak-card{padding:22px 18px}
  .listen-buttons{gap:10px}
  .listen-buttons .btn{flex:1 1 112px;white-space:normal;padding:10px 12px}
  .speak-card blockquote{font-size:23px;line-height:1.65;margin:14px 0}
  .speak-card p{font-size:15px;line-height:1.8}
  .steps{gap:12px;font-size:14px;margin:20px 0}
  .option{font-size:16px;padding:14px 12px;line-height:1.6}
  .option .letter{flex-shrink:0}
  .question{font-size:21px}
  .card-navigation{gap:12px;margin-top:18px;font-size:13px}
  .card-navigation>span{min-width:0;text-align:center}
  .card-navigation .text-button{flex-shrink:0;font-size:14px}
  .voice-settings{padding:12px;margin-bottom:18px}
  .voice-settings>div{gap:8px}
  .voice-settings select{font-size:16px;min-height:44px;min-width:0;padding:7px 8px}
  .voice-settings small{line-height:1.6}
  .playback-panel:not([hidden]){gap:10px;padding:6px 10px}
  .rail{display:grid;grid-template-columns:minmax(0,1fr);gap:20px}
  .plan,.tip{padding:20px;min-width:0;margin:0}
  .plan-row strong{font-size:15px}
  footer{margin-top:24px;line-height:1.8}
  dialog{width:calc(100% - 24px);max-height:calc(100dvh - 24px);padding:20px;margin:auto;overflow:auto;overscroll-behavior:contain}
  .dialog-heading{gap:12px;margin-bottom:20px}
  .dialog-heading h2{font-size:23px}
  .dialog-close{width:44px;flex-shrink:0}
  #nickname-input{font-size:16px}
  .avatar-setting{gap:14px;align-items:flex-start}
  .avatar-setting>div{min-width:0;flex:1}
  .avatar-setting p{overflow-wrap:anywhere;line-height:1.7}
  .avatar-setting img{flex-shrink:0;width:64px;height:64px}
  .crop-control{font-size:14px;min-height:44px;gap:12px}
  .dialog-actions{position:sticky;bottom:-20px;margin:16px -20px -20px;padding:16px 20px 20px;background:#f3f7ff;border-top:1px solid #dce5f5;gap:10px}
  .dialog-actions .btn{flex:1;min-width:0;padding:10px 8px}
}
@media(max-width:360px){
  .mascot{width:56px;height:68px}
  .intro .eyebrow{font-size:10px}
  .course-heading{align-items:flex-start}
  .section-header{flex-wrap:wrap}
  .section-header .badge{margin-top:0}
  .voice-settings>div{justify-content:space-between}
  .voice-settings label{flex-basis:100%}
  .voice-settings select{flex:1}
  .voice-settings .text-button{flex-shrink:0}
  .steps{gap:9px;font-size:13px}
  .speak-card blockquote{font-size:21px}
  .word-card{min-height:265px}
}