@media(min-width:480px){
  .app{min-height:100vh;max-width:520px;}
}

@media(min-width:1024px){
  .app{max-width:1240px;}
  .top-bar{padding:52px 44px 0;}
  .welcome-block{padding:32px 44px 0;}
  .stats-row{padding:0 44px;margin:28px 0;}
  .home-btns{padding:0 44px 48px;}
  .divider{margin:0 44px;}
  .screen-header{padding:52px 44px 0;}
  .cat-scroll,.word-nav,.word-hero,.sents,.learn-nav-row,.prog-body,.rev-grid{padding-left:44px;padding-right:44px;}
  #s-train .screen-header{padding:36px 44px 0;}
  .t-progress-wrap,.t-zone,.t-sticky-bottom{padding-left:44px !important;padding-right:44px !important;}
  #s-overview > div:first-child,#ov-words,#s-overview > div:last-child{padding-left:44px !important;padding-right:44px !important;}
  .welcome-hz{font-size:56px;line-height:1.12;}
  .welcome-py{font-size:18px;color:#4F4942;}
  .welcome-en{font-size:14px;color:#5E564D;}
  .stat-n{font-size:34px;}
  .stat-l{font-size:12px;color:#5E564D;}
  .train-hz{font-size:24px;}
  .train-sub{font-size:14px;color:rgba(255,255,255,.9);}
  .grid-hz{font-size:30px;}
  .grid-lbl{font-size:15px;color:#5E564D;}
  .word-big,.done-big{font-size:76px;}
  .word-py,.done-phrase-py{font-size:22px;color:#4F4942;}
  .word-pill2,.done-phrase-en{font-size:16px;color:#5E564D;}
  .t-word-pill{font-size:18px;padding:8px 15px;}
  .word-tag-hz,.fb-row-val{font-size:22px;}
  .word-tag-py,.fb-row-lbl,.mbar-lbl,.weak-lbl{font-size:13px;color:#5E564D;}
  .t-sent{font-size:42px;}
  .t-py{font-size:18px;color:#4F4942;}
  .t-en{font-size:15px;color:#5E564D;}
  .blank-in{font-size:28px;padding:18px 20px;}
  .input-hint,.heard,.skip-hint,.screen-title,.screen-title *, .rev-py,.rev-meta,.prog-section-lbl,.skill-name,.skill-pct,.mastery-sub{color:#5E564D !important;}
  .opt{font-size:28px;padding:22px 16px;}
  .opt .opt-pinyin,.sent-py,.sent-en,.rev-en,.rev-py,.grid-lbl,.welcome-tap,.back-btn,.cat-pill,.nav-btn,.input-hint{font-size:14px;}
  .next-btn{font-size:18px;padding:18px;}
}

@media(min-width:768px){
  body{padding:22px;background:#EEE8DF;}
  .app{
    max-width:960px;
    min-height:calc(100vh - 44px);
    background:#F7F5F0;
    border-radius:26px;
    overflow:hidden;
    box-shadow:0 16px 44px rgba(34,27,18,.08), 0 0 0 1px rgba(115,102,87,.08);
  }
  .top-bar,.welcome-block,.screen-header,.prog-body,.rev-grid,
  .cat-scroll,.word-nav,.word-hero,.sents,.learn-nav-row,
  .t-progress-wrap,.t-zone,.t-sticky-bottom{
    padding-left:34px;
    padding-right:34px;
  }
  .divider,.stats-row,.home-btns{margin-left:34px;margin-right:34px;}
  .stats-row{padding-left:0;padding-right:0;}
  .home-btns{padding-left:0;padding-right:0;}
  .grid2{gap:12px;}
  .train-btn,.grid-btn,.sent-card,.rev-card,.t-card,.t-sentence-card,.opt,.blank-in,.next-btn{border-radius:18px;}
  .welcome-hz{font-size:48px;line-height:1.14;}
  .welcome-py{font-size:16px;color:#4D463E;}
  .welcome-en,.grid-lbl,.sent-py,.sent-en,.rev-py,.rev-meta,.t-py,.t-en,.skip-hint,.mbar-lbl,.input-hint,.screen-title,.back-btn,.cat-pill,.nav-btn{color:#5A5248;}
  .train-hz{font-size:22px;}
  .train-sub{font-size:13px;color:rgba(255,255,255,.92);}
  .grid-hz{font-size:26px;}
  .word-big,.done-big{font-size:72px;}
  .word-py,.done-phrase-py{font-size:20px;color:#4D463E;}
  .word-pill2,.done-phrase-en,.rev-en{font-size:15px;}
  .t-main-hz,.t-compact-hz{font-size:74px;}
  .t-main-py{font-size:20px;}
  .t-main-en,.t-q-main{font-size:17px;}
  .t-sent{font-size:38px;}
  .blank-in{font-size:28px;padding:18px 18px;}
  .opt{font-size:24px;padding:18px 14px;}
  .next-btn{font-size:17px;padding:18px;}
  .rev-grid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px;}
}

@media(min-width:1024px){
  body{padding:34px;background:#ECE6DD;min-height:100vh;}
  .app{
    max-width:1480px;
    min-height:calc(100vh - 68px);
    border-radius:30px;
  }
  .top-bar,.welcome-block,.screen-header{max-width:1280px;width:100%;margin:0 auto;}
  .divider,.stats-row,.home-btns{max-width:1280px;width:100%;}
  .cat-scroll,.word-nav,.word-hero,.sents,.learn-nav-row{max-width:1180px;width:100%;margin:0 auto;}
  #s-overview > .screen-header, #s-overview > div:nth-child(2), #ov-words, #s-overview > div:last-child{max-width:1080px;width:100%;margin-left:auto !important;margin-right:auto !important;}
  .t-progress-wrap,.t-zone,.t-sticky-bottom{max-width:1080px;width:100%;margin:0 auto;}
  .prog-body{max-width:1240px;width:100%;margin:0 auto;}
  .rev-grid{max-width:1240px;width:100%;margin:0 auto;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px;}
  .top-bar{padding-top:56px;}
  .welcome-block{padding-top:36px;}
  .screen-header{padding-top:54px;}
  .divider,.stats-row,.home-btns{margin-left:auto;margin-right:auto;}
  .welcome-stroke{max-width:620px;}
  .stats-row{grid-template-columns:repeat(3,minmax(0,1fr));gap:0;}
  .stat-n{font-size:40px;}
  .stat-l{font-size:13px;color:#544c43;}
  .home-btns{padding-top:26px;}
  .train-btn{padding:24px 30px;margin-bottom:16px;}
  .train-hz{font-size:30px;}
  .train-sub{font-size:16px;color:rgba(255,255,255,.94);}
  .train-arrow{font-size:30px;}
  .grid2{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;}
  .grid-btn{padding:22px 24px;border-radius:22px;min-height:120px;}
  .grid-hz{font-size:34px;}
  .grid-lbl{font-size:17px;color:#544c43;}
  .welcome-hz{font-size:64px;line-height:1.08;}
  .welcome-py{font-size:21px;color:#453d35;}
  .welcome-en{font-size:17px;color:#544c43;}
  .train-btn{padding:22px 26px;}
  .grid-btn{padding:18px 20px;}
  .grid-hz{font-size:30px;}
  .grid-lbl{font-size:15px;}
  .word-big,.done-big{font-size:88px;}
  .word-py,.done-phrase-py{font-size:24px;}
  .word-pill2,.done-phrase-en{font-size:16px;}
  .sent-zh{font-size:21px;}
  .sent-py,.sent-en{font-size:14px;}
  .learn-nav-row{padding-bottom:40px;}
  .nav-btn{font-size:14px;padding:14px 10px;}
  .t-word-strip{gap:8px;padding-top:14px;}
  .t-word-pill{font-size:18px;padding:8px 14px;}
  .word-tag{padding:6px 12px;border-radius:10px;}
  .word-tag-hz{font-size:20px;}
  .word-tag-py{font-size:13px;color:#7A4F4A;}
  .t-card{padding:22px 22px 20px;}
  .t-main-hz,.t-compact-hz{font-size:88px;}
  .t-main-py{font-size:24px;}
  .t-main-en{font-size:18px;}
  .t-phase-l,.t-phase-r,.t-helper,.t-minor,.t-prompt,.t-counter,.t-word-ct,.skip-hint,.mbar-lbl,.input-hint,.fb-row-lbl,.screen-title,.back-btn{font-size:13px;}
  .t-q-main{font-size:20px;line-height:1.5;}
  .t-sentence-card{padding:18px 18px 16px;}
  .t-sent{font-size:44px;}
  .t-py{font-size:18px;color:#585046;}
  .t-en{font-size:15px;color:#655D53;}
  .opts{gap:12px;}
  .opt{font-size:28px;padding:22px 16px;}
  .blank-in{font-size:32px;padding:20px 20px;}
  .next-btn{font-size:19px;padding:20px;}
}