/* A camada de movimento não substitui os transforms dos componentes. */
:root{--motion-out:cubic-bezier(.16,1,.3,1)}
.motion-control{position:fixed;right:18px;bottom:18px;z-index:95;display:flex;align-items:center;gap:8px;padding:11px 16px;border:1px solid #ffffff30;border-radius:30px;background:#17130ef2;color:#fff;font-size:12px;box-shadow:0 6px 20px #0002}
.motion-control:before{content:"";width:8px;height:10px;border-inline:2px solid #ff9a00}
.motion-control[aria-pressed=true]:before{border:0;background:#ff9a00;clip-path:polygon(0 0,100% 50%,0 100%)}
.motion-control:disabled{opacity:.75;cursor:default}
@media(max-width:600px){.motion-control{right:12px;bottom:88px;font-size:11px;padding:9px 12px}}
[data-motion-paused] .motion-tilt{rotate:none!important}
:where(button:not(.f-flashcard),.s-download,.j-download-button){transition:scale 160ms var(--motion-out),background-color 180ms,color 180ms}
:where(button:not(.f-flashcard),.s-download,.j-download-button):active{scale:.96}
.motion-tilt{rotate:var(--device-rotation,0deg)}
.p-chart i{transform-origin:bottom}
.p-flap,.f-time{font-variant-numeric:tabular-nums}
.s-header nav a{position:relative}
.s-header nav a:after{content:"";position:absolute;inset:auto 0 -6px;height:2px;background:currentColor;scale:0 1;transform-origin:left;transition:scale 220ms var(--motion-out)}
.s-header nav a:focus-visible:after{scale:1 1}
@media(hover:hover) and (pointer:fine){
 :where(button:not(.f-flashcard),.s-download,.j-download-button):hover{scale:1.025}
 .s-header nav a:hover:after{scale:1 1}
 .s-download svg,.j-scene-button svg{transition:translate 220ms var(--motion-out)}
 .s-download:hover svg{translate:0 2px}
 .j-scene-button:hover svg{translate:3px 0}
}
@media(prefers-reduced-motion:reduce){
 .motion-tilt{rotate:none!important}
 :where(button,.s-download,.j-download-button){scale:1!important}
 .s-download svg,.j-scene-button svg{translate:none!important}
}