/* Three optional native snapshot treatments; the live page always stays visible. */
#transition-settings{display:flex;align-items:center;justify-content:space-between;gap:1.5rem 2rem;flex-wrap:wrap;margin-block:2rem .5rem;padding-block-start:1.5rem;border-block-start:1px solid #ffffff30;view-transition-name:transition-settings}
#transition-settings fieldset{margin:0;padding:0;border:0;min-inline-size:0}
#transition-settings legend{padding:0;margin-block-end:.6rem;font-size:.875rem;font-weight:600}
.transition-choices{display:flex;align-items:center;gap:.3rem;flex-wrap:wrap}
.transition-choices label{position:relative;cursor:inherit}
.transition-choices input{position:absolute;inline-size:1px;block-size:1px;opacity:0;inset-inline-start:.5rem;inset-block-start:50%}
.transition-choices span{display:flex;align-items:center;min-block-size:2.75rem;padding:.65rem .85rem;font-size:.875rem;line-height:1.4;transition:background .18s ease,color .18s ease}
.transition-choices input:checked+span{background:var(--paper);color:var(--ink)}
.transition-choices input:focus-visible+span{outline:3px solid var(--yellow);outline-offset:3px}
.transition-preview-group{display:flex;flex-direction:column;align-items:flex-start;gap:.4rem}
.transition-preview{min-block-size:2.75rem;border-block-end:1px solid currentColor;padding:.5rem 0;font-size:.875rem;font-weight:600;text-align:start}
#transition-settings .transition-note{font-size:.8125rem;line-height:1.5;margin:0;max-inline-size:40ch;color:#aebfb5}
@media(hover:hover) and (pointer:fine){.transition-choices label:hover span{background:#ffffff1a}.transition-choices label:hover input:checked+span{background:var(--paper)}.transition-preview:hover{color:var(--yellow)}}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) and (forced-colors:none){.transition-choices label,.transition-choices input{cursor:url('assets/cursor-yellow.svg') 4 3,pointer}}
::view-transition-group(transition-settings){animation:none;z-index:11}
::view-transition-old(transition-settings){display:none}
::view-transition-new(transition-settings){animation:none;mix-blend-mode:normal}
html[data-route-transition]::view-transition-group(root){animation:none}
html[data-route-transition]::view-transition-image-pair(root){isolation:isolate}
html[data-route-transition]::view-transition-old(root),html[data-route-transition]::view-transition-new(root){mix-blend-mode:normal}
html[data-route-transition="soft-fade"]::view-transition-old(root){animation:route-soft-out 180ms var(--ease) both}
html[data-route-transition="soft-fade"]::view-transition-new(root){animation:route-soft-in 260ms var(--ease) 80ms both}
html[data-route-transition="vertical-reveal"]::view-transition-old(root){animation:route-vertical-out 440ms var(--ease) both}
html[data-route-transition="vertical-reveal"]::view-transition-new(root){animation:route-vertical-in 440ms var(--ease) both}
html[data-route-transition="sliding-panels"]::view-transition-old(root){animation:route-panel-out 420ms var(--ease) both}
html[data-route-transition="sliding-panels"]::view-transition-new(root){animation:route-panel-in 420ms var(--ease) both}
html[data-route-transition="sliding-panels"][data-route-direction="reverse"]::view-transition-old(root){animation-name:route-panel-out-reverse}
html[data-route-transition="sliding-panels"][data-route-direction="reverse"]::view-transition-new(root){animation-name:route-panel-in-reverse}
html[data-route-transition="sliding-panels"][data-route-direction="none"]::view-transition-old(root){animation:route-soft-out 180ms var(--ease) both}
html[data-route-transition="sliding-panels"][data-route-direction="none"]::view-transition-new(root){animation:route-soft-in 260ms var(--ease) 80ms both}
@keyframes route-soft-out{to{opacity:0}}
@keyframes route-soft-in{from{opacity:0}to{opacity:1}}
@keyframes route-vertical-out{to{opacity:.35}}
@keyframes route-vertical-in{from{clip-path:inset(100% 0 0 0);transform:translateY(1.25rem)}to{clip-path:inset(0);transform:none}}
@keyframes route-panel-out{from{transform:none;opacity:1}to{transform:translateX(-18%);opacity:.35}}
@keyframes route-panel-in{from{transform:translateX(100%)}to{transform:none}}
@keyframes route-panel-out-reverse{from{transform:none;opacity:1}to{transform:translateX(18%);opacity:.35}}
@keyframes route-panel-in-reverse{from{transform:translateX(-100%)}to{transform:none}}
@media(max-width:40rem){#transition-settings{align-items:flex-start;gap:1.2rem}.transition-choices{gap:.25rem}.transition-choices span{font-size:.8125rem;padding:.65rem .65rem}.transition-preview-group{inline-size:100%}}
@media(forced-colors:active){.transition-choices input:checked+span{outline:2px solid Highlight}.transition-choices input:focus-visible+span{outline:3px solid Highlight}}
@media(prefers-reduced-motion:reduce){html[data-route-transition]::view-transition-old(root),html[data-route-transition]::view-transition-new(root){animation:none}.transition-choices span{transition:none}}