/* Quiet operating UI: feedback 100–160ms, route continuity 200ms, dialog 250/150ms. */
:root{--ease-out:cubic-bezier(0.23,1,0.32,1);--motion-fast:150ms;--motion-state:200ms}
::view-transition-group(root){animation-duration:200ms}
::view-transition-old(root){animation:theme-out 200ms ease both}
::view-transition-new(root){animation:theme-in 200ms ease both}
@keyframes theme-out{to{opacity:0}}
@keyframes theme-in{from{opacity:0}}
html{-webkit-text-size-adjust:100%}
[hidden]{display:none!important}
.btn,.icon-button,.theme-toggle,.close,.chip,.period-control button,.docs-protocols button,.code-languages button,.tabs button,.docs-toc button,.text-button{
 transition:transform 160ms var(--ease-out),opacity 150ms ease,background-color 150ms ease,color 150ms ease,border-color 150ms ease;
 -webkit-user-select:none;-webkit-touch-callout:none;
}
:root[data-input=pointer] :is(.btn,.icon-button,.theme-toggle,.close,.chip,.period-control button,.docs-protocols button,.code-languages button,.tabs button):active:not(:disabled){transform:scale(.97)}
.nav a{transition:background-color 150ms ease,color 150ms ease}
input,select,textarea{transition:border-color 150ms ease}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.copy-done{color:var(--green)!important;background:var(--positive-bg)!important}
.catalog-reset{display:flex;margin:0 auto 22px}
.content{position:relative}
.content::before{content:'';position:absolute;inset:0 0 auto;height:2px;background:var(--accent);opacity:0;transform:scaleX(.35);transform-origin:left;pointer-events:none;transition:opacity 150ms ease,transform 200ms var(--ease-out)}
.content.is-loading::before{opacity:1;transform:scaleX(1)}
.loading{background:var(--soft)}
.loading::after{animation:loading 1s ease-in-out 3 alternate}
:root[data-input=keyboard] .loading::after{animation:none}
#toasts{display:flex;flex-direction:column;align-items:flex-end;pointer-events:none}
.toast{opacity:1;transform:translateY(0);transition:opacity 200ms var(--ease-out),transform 200ms var(--ease-out);max-width:100%;overflow-wrap:anywhere}
.toast.toast-exit{opacity:0;transform:translateY(8px);transition-duration:150ms}
@starting-style{.toast{opacity:0;transform:translateY(8px)}}
dialog{max-height:calc(100dvh - 32px);overflow:auto;overscroll-behavior:contain;transform-origin:center}
dialog::backdrop{opacity:1;transition:opacity 200ms var(--ease-out)}
dialog.is-closing::backdrop{opacity:0;transition-duration:150ms}
:root[data-motion-hidden] *, :root[data-motion-hidden] *::before,:root[data-motion-hidden] *::after{animation-play-state:paused!important;transition:none!important}
@starting-style{dialog[open]::backdrop{opacity:0}}
.close{min-width:36px;min-height:36px;justify-content:center;align-items:center}
@media(hover:hover) and (pointer:fine){
 .model-row:hover,.key-item:hover,.usage-table tbody tr:hover{background:var(--hover)}
 .usage-mobile-row:hover{background:var(--hover)}
}
@media(pointer:coarse){
 input,textarea,select,.list-toolbar input,.list-toolbar select,.usage-filters select{font-size:16px}
 .close,.code-top .text-button,.code-languages button,.docs-toc button{min-height:44px}
}
@media(max-width:600px){
 dialog{max-height:92dvh}
 #toasts{bottom:calc(76px + max(env(safe-area-inset-bottom),var(--tg-content-safe-area-inset-bottom,0px)));right:16px;left:16px;max-width:none}
}
:root[data-input=keyboard] *, :root[data-input=keyboard] *::before,:root[data-input=keyboard] *::after{transition:none!important}
:root[data-input=keyboard] dialog::backdrop{transition:none!important}
@media(prefers-reduced-motion:reduce){
 .content::before,.toast,.toast.toast-exit,.btn:active,.icon-button:active,.theme-toggle:active,.close:active,.chip:active,.period-control button:active,.docs-protocols button:active,.code-languages button:active,.tabs button:active{transform:none!important}
 dialog::backdrop{transition:none!important}
 ::view-transition-group(root),::view-transition-old(root),::view-transition-new(root){animation:none!important}
}