:root{--ease-out:cubic-bezier(.22,1,.36,1);--ease-soft:cubic-bezier(.2,.8,.2,1)}
@media(prefers-reduced-motion:no-preference){
  button{transition:transform 180ms var(--ease-out),background-color 220ms var(--ease-soft),border-color 220ms var(--ease-soft),color 180ms ease,box-shadow 220ms var(--ease-soft)}
  button:active:not(:disabled){transform:scale(.975)}
  .bank:active:not(:disabled),.grid4 button:active:not(:disabled){transform:scale(.965)}
  .ico,.cover,.tabbar .app-icon{transition:transform 300ms var(--ease-out),opacity 240ms ease}
  .grid4 button:active .ico{transform:translateY(2px) scale(.94)}
  .tabbar button.on .app-icon{animation:nav-settle 380ms var(--ease-out)}
  .tabbar button.on{background:var(--primary-bg)}
  .tabbar button{margin:4px 2px;border-radius:14px}
  .option.selected b{transition:background-color 220ms ease,color 220ms ease,border-color 220ms ease}
  .bar i{transition:width 500ms var(--ease-out)}
  progress::-webkit-progress-value{transition:width 400ms var(--ease-out)}
  .sheet button{transition:transform 200ms var(--ease-out),box-shadow 200ms ease}
  .sheet-dialog[open]{animation:dialog-enter 300ms var(--ease-out)}
  .sheet-dialog::backdrop{animation:backdrop-enter 220ms ease}
  @media(hover:hover){.bank:hover{transform:translateY(-2px);box-shadow:0 8px 22px #1f233314}.grid4 button:hover .ico{transform:translateY(-3px)}.sheet button:hover{transform:scale(1.08)}}
}
@keyframes nav-settle{from{transform:translateY(3px) scale(.9)}60%{transform:translateY(-2px) scale(1.04)}to{transform:none}}
@keyframes dialog-enter{from{opacity:0;transform:translateY(18px) scale(.98)}to{opacity:1;transform:none}}
@keyframes backdrop-enter{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}