/* One finite dissolve includes the HUD and its current module. */
html[data-appearance-transition=snapshot]::view-transition { pointer-events:none; }
html[data-appearance-transition=snapshot]::view-transition-group(root) { animation-duration:680ms; animation-timing-function:cubic-bezier(.4,0,.2,1); }
html[data-appearance-transition=snapshot]::view-transition-image-pair(root) { isolation:isolate; }
html[data-appearance-transition=snapshot]::view-transition-old(root) { animation:air-theme-dissolve 680ms cubic-bezier(.4,0,.2,1) both; z-index:2; mix-blend-mode:normal; }
html[data-appearance-transition=snapshot]::view-transition-new(root) { animation:none; opacity:1; mix-blend-mode:normal; }
@keyframes air-theme-dissolve { from { opacity:1; } to { opacity:0; } }

/* The fallback changes colors without capturing or repainting an animated blur. */
html[data-appearance-transition=colors],
html[data-appearance-transition=colors] :where(body,.app,.main,.content,.topbar,.air-shell-header,.air-shell-nav,.air-shell-dropdown,.air-appearance,button,a,input,select,textarea,dialog,[class*="card"],[class*="panel"],[class*="hero"],[class*="metric"]) {
  transition:background-color 680ms cubic-bezier(.4,0,.2,1),color 680ms cubic-bezier(.4,0,.2,1),border-color 680ms cubic-bezier(.4,0,.2,1),box-shadow 680ms cubic-bezier(.4,0,.2,1);
}
:where(.air-appearance) { position:relative; }
.air-appearance { isolation:isolate; }
.air-appearance::before { content:''; position:absolute; inset:4px auto 4px 4px; width:calc((100% - 11px) / 2); border-radius:50%; background:var(--hud-surface); box-shadow:0 2px 8px #001A3420,inset 0 1px 0 var(--hud-highlight); transition:transform 680ms cubic-bezier(.4,0,.2,1),background-color 680ms; pointer-events:none; }
.air-appearance[data-theme=dark]::before { transform:translateX(calc(100% + 3px)); }
.air-appearance button { position:relative; z-index:1; }
.air-appearance button[aria-pressed=true] { background:transparent; box-shadow:none; }
.air-appearance button svg { transition:transform 680ms cubic-bezier(.4,0,.2,1); }
.air-appearance button[aria-pressed=false] svg { transform:rotate(-12deg) scale(.94); }
@media(prefers-reduced-motion:reduce) {
  .air-appearance::before,.air-appearance button svg,html[data-appearance-transition=colors],html[data-appearance-transition=colors] * { transition:none!important; }
  html[data-appearance-transition=snapshot]::view-transition-old(root),html[data-appearance-transition=snapshot]::view-transition-new(root) { animation:none; }
}
@media(forced-colors:active) { .air-appearance::before { display:none; } }