body{
  min-height:100svh;
  overflow-x:clip;
  overflow-y:auto;
  font-family:'Quicksand','Microsoft YaHei','PingFang SC',sans-serif;
}
.pages-wrapper{min-height:100svh;height:auto;padding:76px 12px 96px;}
.page{min-width:0;outline:none;}
.page:focus-visible{outline:2px solid var(--mint-dark);outline-offset:6px;border-radius:24px;}
.chinese-title,.letter-content{font-family:'ZCOOL KuaiLe','Ma Shan Zheng','Microsoft YaHei','PingFang SC',cursive;}
.cal-nav button,.music-btn{min-width:44px;min-height:44px;}
.music-btn{top:calc(18px + env(safe-area-inset-top));right:18px;}
.btn-prev,.btn-next{min-height:44px;bottom:calc(20px + env(safe-area-inset-bottom));}
.dots{bottom:calc(38px + env(safe-area-inset-bottom));}
button:focus-visible,input:focus-visible{outline:3px solid #83bba0;outline-offset:4px;}
button:not(:disabled):hover{filter:brightness(0.97);}
button:disabled{cursor:default;}
.music-btn:disabled{opacity:0.6;}
.music-status{position:fixed;top:76px;right:18px;z-index:201;max-width:240px;padding:10px 14px;background:white;border-radius:14px;font-size:14px;box-shadow:0 4px 14px #0001;}
.mobile-nav{display:none;}
#quizInput{font-size:16px!important;min-height:44px;max-width:100%;}
#quizSubmit{min-height:44px;min-width:88px;}
.letter-content{max-height:min(400px,calc(100svh - 220px));min-height:160px;overscroll-behavior:contain;scrollbar-width:thin;}
@media(max-width:640px){
  .pages-wrapper{padding:72px 10px calc(98px + env(safe-area-inset-bottom));}
  .page{padding:16px 6px;}
  .btn-prev,.btn-next,.dots{display:none;}
  .mobile-nav{display:grid;z-index:150;padding:8px 8px calc(8px + env(safe-area-inset-bottom));background:rgba(255,254,245,0.98);border-top:1px solid rgba(184,224,204,0.45);}
  .mobile-nav button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:54px;min-width:44px;border:0;border-radius:14px;background:transparent;color:#7a7a6a;font-family:inherit;font-size:12px;cursor:pointer;}
  .mobile-nav button span:first-child{font-size:21px;line-height:24px;}
  .mobile-nav button[aria-current="page"]{background:var(--mint);color:#426851;}
  .mobile-nav button:active{transform:scale(0.96);}
  .letter-content{padding:22px 16px;font-size:1em;}
}
@media(max-width:370px){.chinese-title{font-size:2.15em;}.cd-rings{gap:8px;}.ring{width:60px;height:60px;}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important;}}