.practice-stage,.practice-dock{display:contents}
.free-personal>summary{font-weight:650;padding:2px 0;line-height:1.5}
.audio-parts{margin-top:12px;border-color:#e6e6ed}
.audio-parts>summary{color:var(--blue);min-height:44px}
#practice-guide .help{margin:8px 0}
.support{display:flex;justify-content:center;align-items:center;gap:16px}
@media screen and (max-width:600px){
 html,body{height:100%;overflow:hidden}
 .page{height:100dvh;height:var(--visible-height,100dvh);max-width:none;display:flex;flex-direction:column;padding:10px 14px max(6px,env(safe-area-inset-bottom));overflow:hidden}
 .page>header{flex:none;margin:0 0 8px;min-height:28px}
 .page>header>.muted{font-size:.8125rem}
 .page>section{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;scroll-padding:14px}
 .page>#practice{display:flex;flex-direction:column;overflow:hidden}
 .toolbar{flex:none;gap:10px;min-height:40px}
 .toolbar button{min-height:40px;font-size:.875rem}
 #practice>.heading{flex:none;margin:0 0 4px}
 #greeting{font-size:.875rem;margin:0 0 6px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}
 .modes{display:flex;width:100%;flex-wrap:nowrap}
 .modes button{flex:1;padding:7px 10px;min-height:40px}
 .progress-label{flex:none;margin:6px 0;font-size:.8125rem}
 progress{flex:none;margin-bottom:8px;height:5px}
 .practice-stage{display:block;flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;scroll-padding:12px;padding:2px 0 12px}
 .practice-dock{display:flex;flex:none;flex-wrap:wrap;gap:4px 8px;padding-top:8px;background:#f2f2f7;border-top:1px solid #e2e2e9}
 .practice-dock #next{width:100%;margin:0;padding:10px;min-height:44px}
 .practice-dock #skip-free,.practice-dock #finish-free{flex:1;width:auto;margin:0;min-height:40px;padding:7px 8px;font-size:.875rem}
 .surface{padding:16px;border-radius:20px}
 #question{font-size:1.35rem;line-height:1.35;margin:10px 0 14px;letter-spacing:-.025em}
 #category{font-size:.8125rem;margin:0}
 #question-panel>.row{gap:6px}
 #question-panel>.row button{padding:9px 10px;min-height:44px;flex:1}
 #instruction{margin:10px 0;font-size:.875rem;padding:9px 11px}
 .option{padding:10px 12px;min-height:44px;font-size:1rem}
 .stack{gap:8px}
 #answer-panel{margin-top:14px;padding-top:14px}
 #free-form{margin-top:12px}
 #free-limit{padding:9px 11px;margin:8px 0 12px}
 #free-answer{min-height:96px;height:110px;font-size:1rem}
 #free-private{margin:10px 0;font-size:.875rem}
 #free-form>.primary{margin-top:8px;padding:11px;min-height:44px}
 .remove-question{padding:9px;margin-top:8px;min-height:44px}
 .free-personal{margin:0 0 8px;padding:10px 14px;border-radius:14px}
 .free-personal>summary{font-size:.875rem;min-height:24px}
 #complete{padding:18px}
 #complete h2{font-size:1.5rem;margin:6px 0 12px}
 #home .heading{margin:6px 0}
 #home h1,#editor h1{font-size:1.5rem;margin:8px 0}
 #home .heading .muted{margin:6px 0}
 #home>.help{margin:0 0 6px}
 #profiles{max-height:25dvh;overflow:auto;padding:2px}
 .profile{padding:6px;border-radius:14px}
 #new-user{margin-top:10px;padding:11px}
 #home>.note{margin:8px 0}
 .reviews-section{margin-top:18px;padding-top:14px}
 #reviews-list{max-height:32dvh;overflow:auto;overscroll-behavior:contain}
 .review-card{padding:14px}
 #editor{padding-bottom:8px}
 .fields{margin:14px 0;gap:14px}
 input,select,textarea{font-size:1rem}
 #profile-form>.row{position:sticky;bottom:0;background:#f2f2f7;padding:10px 0 2px;z-index:1}
 .support{flex:none;margin:4px 0 0;padding:0;border:0;gap:18px;font-size:.875rem;min-height:40px}
 .support button{padding:5px 8px;min-height:40px}
 .support a{display:inline-flex;align-items:center;min-height:40px;margin:0}
 #notice:empty{display:none}
 #notice{flex:none;max-height:58px;overflow:auto;margin:4px 0;font-size:.875rem}
 dialog{max-height:calc(var(--visible-height,100dvh) - 20px);width:calc(100% - 20px);padding:18px;border-radius:24px;overscroll-behavior:contain;scroll-padding:12px}
 .dialog-top{position:sticky;top:-4px;z-index:3;background:#fafafc;margin:0;height:32px}
 dialog h2{font-size:1.4rem;margin:8px 0}
 #mode-person{margin:4px 0;font-size:.8125rem}
 #mode-subtitle{margin:6px 0;font-size:.875rem}
 .mode-cards{margin-top:12px;gap:8px}
 .mode-card{padding:12px 14px;gap:5px;border-radius:16px}
 .mode-card small{font-size:.8125rem}
 .mode-cta{padding-top:0}
 .dialog-note{margin-top:12px}
}
@media screen and (max-width:600px) and (max-height:520px){
 .page>header{margin-bottom:2px;min-height:22px}
 #greeting{display:none}
 .support{min-height:32px}.support button,.support a{min-height:32px}
 .toolbar{min-height:34px}.toolbar button{min-height:34px}
}
@media screen and (max-width:600px){.modes{flex-wrap:wrap}.modes button{flex:1 1 30%;min-height:44px}}@media screen and (max-width:600px) and (min-resolution:1dppx){html{font-size:clamp(16px,4vw,20px)}.mode-cards{grid-template-columns:1fr}}