:root{--motion-press:80ms;--motion-feedback:140ms;--motion-local:160ms;--motion-reveal:200ms;--motion-sheet-enter:250ms;--motion-sheet-exit:180ms;--motion-sheet-backdrop-enter:220ms;--motion-sheet:var(--motion-sheet-enter);--copy-fade:120ms;--gallery-exit:130ms;--page-out:110ms;--page-in:160ms;--motion-ease:cubic-bezier(.2,.7,.2,1);--motion-distance-local:12px;--motion-press-scale:.985}
/* Persistent navigation stays in place across native document transitions. */
@supports(view-transition-name:ampe-header){
 .site-header{view-transition-name:ampe-header}
 .mobile-dock{view-transition-name:ampe-dock}
}
::view-transition-old(root){animation:ampe-content-out var(--page-out) ease-out both}
::view-transition-new(root){animation:ampe-content-in var(--page-in) ease-out both}
::view-transition-group(ampe-header),::view-transition-group(ampe-dock){animation:none}
::view-transition-old(ampe-header),::view-transition-old(ampe-dock){animation:none;opacity:0}
::view-transition-new(ampe-header),::view-transition-new(ampe-dock){animation:none;mix-blend-mode:normal}
@keyframes ampe-content-out{to{opacity:0}}
@keyframes ampe-content-in{from{opacity:0}to{opacity:1}}
:root :is(.button,.link-button,.ui-hero-address button,.ui-device-tabs button,.skin-preview__button,.product-term,.mobile-dock__item){transition:background-color var(--motion-feedback) ease,border-color var(--motion-feedback) ease,color var(--motion-feedback) ease,opacity var(--motion-feedback) ease,scale var(--motion-feedback) var(--motion-ease)}
:root :is(.button,.link-button,.ui-hero-address button,.skin-preview__button):active:not(:disabled){scale:var(--motion-press-scale);transition-duration:var(--motion-press)}
:root :is(.button,.link-button,[data-motion-busy]):focus-visible{transition:outline-color 0s}
[data-motion-busy]{cursor:progress}
:root .mobile-menu-sheet__panel{transition:none;will-change:auto}
.mobile-menu-sheet::backdrop{background:rgba(5,2,12,.6)}
/* One stable, rounded indicator for every native disclosure. */
:root details > summary::after,
:root details[class] > summary::after,
:root details[open] > summary::after,
:root details[class][open] > summary::after {
 content:"";
 display:block;
 flex:0 0 20px;
 inline-size:20px;
 block-size:20px;
 width:20px;
 height:20px;
 padding:0;
 border:0;
 font-size:0;
 background:var(--primary, #bc88f7);
 -webkit-mask:url("disclosure-chevron.svg?rev=e6757cdd9e67e697") center / 20px 20px no-repeat;
 mask:url("disclosure-chevron.svg?rev=e6757cdd9e67e697") center / 20px 20px no-repeat;
 transform:none;
 rotate:0deg;
 transform-origin:center;
 transition:rotate 280ms cubic-bezier(.2,.65,.3,1);
 pointer-events:none;
}
:root details[open]:not([data-motion-open="false"]) > summary::after {
 rotate:180deg;
}
@media (forced-colors:active) {
 :root details > summary::after {background:ButtonText;forced-color-adjust:none}
}
:root .ui-copy-label,:root .ui-copy-result{transition:opacity var(--copy-fade) ease;visibility:visible}
:root .ui-copy-label{opacity:1}
:root .ui-copy-result{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;opacity:0}
:root .ui-copy-button[data-copy-state] .ui-copy-label{opacity:0}
:root .ui-copy-button[data-copy-state] .ui-copy-result{opacity:1}
@media(hover:hover) and (pointer:fine){:root :is(.button,.link-button):hover{transform:none}}
@media(hover:none){:root :is(.button,.link-button):hover{transform:none}}
@media(prefers-reduced-motion:reduce){
 :root{scroll-behavior:auto}
 :root *, :root *::before,:root *::after{scroll-behavior:auto!important}
 :root :is(.button,.link-button,.ui-hero-address button,.ui-device-tabs button,.skin-preview__button,.product-term,.mobile-dock__item,.ui-copy-label,.ui-copy-result),details>summary::after{transition:none!important}
 :root :is(.button,.link-button,.ui-hero-address button,.skin-preview__button):active{scale:1}
 ::view-transition-old(root),::view-transition-new(root),::view-transition-group(ampe-header),::view-transition-group(ampe-dock),::view-transition-old(ampe-header),::view-transition-new(ampe-header),::view-transition-old(ampe-dock),::view-transition-new(ampe-dock){animation:none!important}
}

/* A single link scroller keeps large text, the heading and close control reachable. */
@media(max-width:56rem){
 :root .mobile-menu-sheet[open]{box-sizing:border-box;inset:calc(100dvh - max(8px,env(safe-area-inset-bottom))) auto auto max(8px,env(safe-area-inset-left),calc((100vw - 512px)/2));margin:0;transform:translateY(-100%);inline-size:calc(100vw - max(8px,env(safe-area-inset-left)) - max(8px,env(safe-area-inset-right)));min-inline-size:0;max-inline-size:512px;max-block-size:calc(100dvh - max(8px,env(safe-area-inset-top)) - max(8px,env(safe-area-inset-bottom)));overflow:hidden}
 :root .mobile-menu-sheet__panel{box-sizing:border-box;display:flex;flex-direction:column;min-inline-size:0;padding:clamp(16px,1rem,24px);max-block-size:calc(100dvh - max(8px,env(safe-area-inset-top)) - max(8px,env(safe-area-inset-bottom)))}
 :root .mobile-menu-sheet__drag,:root .mobile-menu-sheet__header{flex-shrink:0}
 :root .mobile-menu-sheet__header{gap:16px}
 :root .mobile-menu-sheet__header>div{min-inline-size:0;overflow-wrap:anywhere}
 :root .mobile-menu-sheet__close{inline-size:44px;block-size:44px;min-inline-size:44px;min-block-size:44px;flex:0 0 44px}
 :root .mobile-menu-sheet__links{display:flex;flex-direction:column;min-block-size:0;overflow-y:auto;overscroll-behavior:contain;scroll-padding-block:8px}
 :root .mobile-menu-sheet__links a{flex:0 0 auto;min-inline-size:0;gap:8px;padding:12px;overflow-wrap:anywhere}
 :root .mobile-menu-sheet__links .mobile-dock__icon{inline-size:24px;block-size:24px}
 :root .mobile-menu-sheet__arrow{inline-size:20px;block-size:20px}
}