@view-transition{navigation:auto}
::view-transition-old(root){animation:brand-out .2s ease both}::view-transition-new(root){animation:brand-in .35s ease both}
@keyframes brand-out{to{opacity:0}}@keyframes brand-in{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
.brand-route-leaving body{opacity:.7;transition:opacity .16s ease}
[data-color-mode-toggle]{display:inline-grid;place-items:center;flex:none;width:44px;height:44px;padding:11px;border:1px solid currentColor;border-color:color-mix(in srgb,currentColor 22%,transparent);border-radius:50%;background:transparent;color:inherit;cursor:pointer;position:relative;vertical-align:middle}
[data-color-mode-toggle] svg{width:20px;height:20px;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;position:absolute;transition:opacity .25s,transform .45s cubic-bezier(.22,1,.36,1)}
[data-color-mode=light] .mode-sun,[data-color-mode=dark] .mode-moon{opacity:0;transform:rotate(-60deg) scale(.6)}
[data-color-mode=light] .mode-moon,[data-color-mode=dark] .mode-sun{opacity:1;transform:rotate(0) scale(1)}
[data-color-mode-toggle]:focus-visible{outline:2px solid currentColor;outline-offset:3px}
@media(prefers-reduced-motion:reduce){::view-transition-old(root),::view-transition-new(root){animation:none}.brand-route-leaving body,[data-color-mode-toggle] svg{transition:none}}

[data-color-mode-toggle]::before,[data-color-mode-toggle]::after{content:"";position:absolute;width:20px;height:20px;background:currentColor;transition:opacity .25s,transform .45s cubic-bezier(.22,1,.36,1);mask:var(--mode-icon) center/contain no-repeat}
[data-color-mode-toggle]::before{--mode-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2m0 16v2M2 12h2m16 0h2M5 5l1.5 1.5m11 11L19 19M5 19l1.5-1.5m11-11L19 5'/%3E%3C/svg%3E")}
[data-color-mode-toggle]::after{--mode-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linejoin='round'%3E%3Cpath d='M20 14.4A8.5 8.5 0 0 1 9.6 4a8.5 8.5 0 1 0 10.4 10.4Z'/%3E%3C/svg%3E")}
[data-color-mode=light] [data-color-mode-toggle]::before,[data-color-mode=dark] [data-color-mode-toggle]::after{opacity:0;transform:rotate(-60deg) scale(.6)}
[data-color-mode=light] [data-color-mode-toggle]::after,[data-color-mode=dark] [data-color-mode-toggle]::before{opacity:1;transform:rotate(0) scale(1)}
@media(prefers-reduced-motion:reduce){[data-color-mode-toggle]::before,[data-color-mode-toggle]::after{transition:none}}

/* Page travel follows the gesture immediately; horizontal demo selection retains its own motion. */
html[data-color-mode]{scroll-behavior:auto}
@media(max-width:800px){html[data-color-mode] body[data-embed] .immersive-nav,html[data-color-mode] .collection-dock,html[data-color-mode] .examples-dialog{backdrop-filter:blur(12px) saturate(120%);-webkit-backdrop-filter:blur(12px) saturate(120%)}html[data-color-mode] .examples-head{backdrop-filter:none;-webkit-backdrop-filter:none}}