html{scroll-behavior:smooth}
body{min-width:320px}
button,input,textarea,select{font:inherit}
button{cursor:pointer}
button{min-height:44px}
button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid #7aa2ff;outline-offset:2px}
.skipLink{position:fixed;left:12px;top:8px;z-index:100;transform:translateY(-150%);background:#fff;color:#172237;border-radius:8px;padding:10px 14px;font-weight:700}
.skipLink:focus{transform:translateY(0)}
.visuallyHidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.dangerZone{border-color:#f0caca}
.dangerButton{border:1px solid #d84242;background:#fff0f0;color:#a62929;border-radius:8px;padding:10px 14px}
.choice.correct:disabled,.choice.wrong:disabled{opacity:1}
.dialog:focus{outline:none}
.topActions{margin-left:auto;display:flex;align-items:center;gap:12px}
.portalLink{min-height:36px;display:inline-flex;align-items:center;padding:6px 11px;border:1px solid rgba(255,255,255,.28);border-radius:9px;color:#fff;text-decoration:none;font-size:12px;white-space:nowrap}
.portalLink:hover,.portalLink:focus-visible{background:rgba(255,255,255,.1);outline:2px solid #fff;outline-offset:2px}
.topInner{max-width:1180px;margin:auto}
.main{width:100%;max-width:1180px;margin:auto}
.nav{scrollbar-width:thin}
.card,.row,.lesson,.hero{box-shadow:0 8px 28px rgba(23,34,55,.045)}

@media(min-width:700px){
  .top{padding:18px 24px 15px}
  .topInner{display:flex;align-items:center;gap:24px}
  .offline{margin:0 0 0 auto;white-space:nowrap}
  .nav{top:72px}
  .main{padding:24px 24px 64px}
  .hero{padding:32px}
  .hero h1{font-size:30px}
  .hero p{font-size:14px;max-width:720px}
  .toolGrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lessonText{max-width:860px;margin:auto}
  .question{font-size:18px}
  .choice{font-size:14px;padding:13px 15px}
  .notice,.row small,.lessonText p{font-size:13px}
}

@media(min-width:1080px){
  .nav{gap:10px}
  .nav button{padding:9px 17px}
  .list{grid-template-columns:repeat(3,minmax(0,1fr))}
  .detail-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .detail-row{padding:12px}
  .dialog{width:min(900px,100%)}
  .sheet{align-items:center}
  .dialog{border-radius:16px}
}

@media(max-width:699px){
  .topActions{gap:7px}
  .offline{display:none}
  .portalLink{min-height:34px;padding-inline:9px}
  .top{padding-top:max(14px,env(safe-area-inset-top))}
  .nav{top:calc(105px + env(safe-area-inset-top))}
  .main{padding-left:max(14px,env(safe-area-inset-left));padding-right:max(14px,env(safe-area-inset-right))}
  .actions{flex-wrap:wrap}
  .actions button{min-width:120px}
  .dialog{padding-bottom:max(18px,env(safe-area-inset-bottom))}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}