/* Durations are interaction refinements; reference screenshots do not encode timing. */
button,a,input,select,textarea{touch-action:manipulation}
button{transition:background-color .18s ease,color .18s ease,opacity .15s ease,box-shadow .2s ease}
dialog[open]{animation:scene-sheet-in .28s cubic-bezier(.2,.8,.2,1) both}
dialog[open]::backdrop{animation:scene-backdrop-in .22s ease both}
@keyframes scene-sheet-in{from{opacity:0;translate:0 18px;scale:.985}to{opacity:1;translate:0 0;scale:1}}
@keyframes scene-backdrop-in{from{background-color:transparent;backdrop-filter:blur(0)}to{background-color:#0008;backdrop-filter:blur(5px)}}
#toast.visible{animation:scene-toast-in .24s ease both}
@keyframes scene-toast-in{from{opacity:0;translate:0 8px}to{opacity:1;translate:0 0}}
canvas[data-scene-chart],canvas[data-chart]{animation:scene-chart-in .48s cubic-bezier(.2,.7,.3,1) both}
@keyframes scene-chart-in{from{opacity:.3;clip-path:inset(0 100% 0 0)}to{opacity:1;clip-path:inset(0)}}
.design-option .card-face{transition:transform .22s ease,box-shadow .22s ease}
.design-option[aria-pressed=true] .card-face{transform:translateY(-2px);box-shadow:0 8px 24px #0004}
@media(hover:hover){.design-option:hover .card-face{transform:translateY(-3px)}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}}