/* ===== Responsive ===== */
@media (max-width:860px){
  .ed{grid-template-columns:1fr}
  .ed-prev{position:static}
}
@media (max-width:760px){
  .nav,.pill-btn .lbl{display:none}
  .pill-btn{padding:0 11px}
  .tabbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:20;background:var(--glass);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-top:1px solid var(--line);padding:6px 6px calc(6px + env(safe-area-inset-bottom,0px))}
  .tabbar a{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 4px;border-radius:14px;color:var(--muted);text-decoration:none;font-size:.72rem;font-weight:600}
  .tabbar a svg{width:24px;height:24px}
  .tabbar a.on{color:var(--accent)}
  main{padding-bottom:90px}
  #toast{bottom:calc(90px + env(safe-area-inset-bottom,0px))}
  .hero{grid-template-columns:1fr;padding-top:30px;gap:24px}
  .stack{height:330px}
  .qcard.feat{flex-direction:column;align-items:flex-start;gap:14px;padding:26px}
  .qcard.feat .qe{font-size:3.2rem}
  .toc{min-height:160px}
  .toc .e{font-size:2.8rem}
  .modal{place-items:end center;padding:0}
  .mbox{width:100%;border-radius:28px 28px 0 0;padding-bottom:calc(26px + env(safe-area-inset-bottom,0px))}
  .paper{padding:34px 24px 36px}
  .p-lined{padding-left:44px}
  .p-lined::before{left:28px}
  footer{margin-bottom:70px}
}
@media (max-width:420px){.row2{grid-template-columns:1fr}.yn button{padding:26px 10px}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}#hearts{display:none}}