.range-input{appearance:none;width:100%;min-height:1.5rem;color:inherit;cursor:pointer;background:0 0;border:0}.range-input::-webkit-slider-runnable-track{background:linear-gradient(to right, var(--color-orange) var(--fill), #0000001a var(--fill));border:0;border-radius:9999px;height:4px}.range-input::-moz-range-track{background:linear-gradient(to right, var(--color-orange) var(--fill), #0000001a var(--fill));border:0;border-radius:9999px;height:4px}.range-input::-webkit-slider-thumb{appearance:none;background:currentColor;border:0;border-radius:50%;width:14px;height:14px;margin-top:-5px}.range-input::-moz-range-thumb{background:currentColor;border:0;border-radius:50%;width:14px;height:14px}.comparison{margin-block:2rem}.comparison-slice{position:absolute;inset-block:0;overflow:hidden}.comparison-content{width:100cqw;height:100%;position:absolute;top:0}.comparison-toolbar{flex-wrap:wrap;gap:.5rem;margin-bottom:.75rem;display:flex}.comparison-toolbar button{cursor:pointer;border:1px solid;border-radius:.5rem;padding:.5rem .75rem;font-size:.875rem}.comparison-toolbar button[aria-pressed=true]{color:var(--color-manila-light);background:var(--color-faded-black)}.dark .comparison-toolbar button[aria-pressed=true],.comparison:fullscreen .comparison-toolbar button[aria-pressed=true]{color:var(--color-faded-black);background:var(--color-manila-light)}.comparison-stage{isolation:isolate;position:relative;container-type:inline-size}.comparison-label{z-index:50;color:#fff;pointer-events:none;background:#000000bf;border-radius:.25rem;padding:.25rem .5rem;font-size:.75rem;position:absolute;top:.75rem;left:50%;transform:translate(-50%)}.comparison-divider{z-index:60;cursor:ew-resize;touch-action:none;color:#000;background:#fff;border-radius:50%;place-items:center;width:2rem;height:2rem;padding:0;display:grid;position:absolute;transform:translate(-50%,-50%);box-shadow:0 1px 4px #0006}.comparison-divider-line{z-index:50;pointer-events:none;background:#fff;width:2px;position:absolute;inset-block:0;transform:translate(-50%);box-shadow:0 0 2px #000}.comparison-adjust{margin-top:.75rem;font-size:.875rem}.comparison-adjust summary{cursor:pointer}.comparison-adjust>div{grid-template-columns:repeat(auto-fit,minmax(8rem,1fr));gap:1rem;margin-top:.5rem;display:grid}.comparison-adjust label{gap:.25rem;font-size:.75rem;display:grid}@media (prefers-reduced-motion:no-preference){.comparison[data-animate] .comparison-slice{transition:left .18s ease-in-out,width .18s ease-in-out}.comparison[data-animate] .comparison-content,.comparison[data-animate] .comparison-divider,.comparison[data-animate] .comparison-divider-line{transition:left .18s ease-in-out}}.skin-comparison{--comparison-background:var(--color-manila-light);margin-block:2rem}.dark .skin-comparison{--comparison-background:var(--color-faded-black)}.skin-comparison .comparison-stage{background:var(--comparison-background);container-name:media-root}.skin-comparison-video{object-fit:contain;width:100%;height:100%;clip-path:inset(0 round var(--comparison-radius-start,0px) var(--comparison-radius-end,0px) var(--comparison-radius-end,0px) var(--comparison-radius-start,0px));display:block;position:relative}.skin-comparison-video::-webkit-media-text-track-container{z-index:40;scale:.98;translate:0 var(--comparison-caption-y,0px);font-family:inherit}.skin-comparison .skin-comparison-skin{--media-accent-color:var(--color-orange);isolation:auto;width:100%;height:100%;box-shadow:0 0 0 100vmax var(--comparison-background);background:0 0;position:absolute;top:0;container-type:normal}.skin-comparison .comparison:fullscreen{--comparison-background:black;color:#fff;background:#000;flex-direction:column;justify-content:center;max-width:none;margin:0;padding:1rem;display:flex}.skin-comparison .comparison:fullscreen .skin-comparison-video{clip-path:none}.skin-comparison .comparison:fullscreen .comparison-stage{flex:1;min-height:0;aspect-ratio:auto!important}.skin-comparison .comparison-stage:has(.skin-comparison-skin:focus-visible){outline:2px solid var(--color-gold);outline-offset:2px}.skin-comparison .skin-comparison-skin:focus-visible{outline:none!important}@media (hover:hover){.animation-controls{opacity:0;transition:opacity .15s ease-out}:hover>.animation-controls,:focus-within>.animation-controls,.animation-controls:has([data-popup-open]){opacity:1}}@media (prefers-reduced-motion:reduce){.animation-controls{transition:none}}.blog-demo-surface{--border:1px;-webkit-backdrop-filter:blur(calc(var(--unit) * 16)) saturate(110%);backdrop-filter:blur(calc(var(--unit) * 16)) saturate(110%);box-shadow:0 0 0 var(--border) #0000001a, 0 2px 6px #00000026, 0 2px 4px -2px #00000026;text-shadow:0 var(--unit) 0 #00000026}.blog-demo-surface:after{content:"";z-index:10;pointer-events:none;border-radius:inherit;box-shadow:inset 0 var(--border) 0 #ffffff1a, inset 0 0 0 var(--border) #ffffff0d;position:absolute;inset:0}.blog-demo-surface svg{filter:drop-shadow(0 var(--unit) 0 oklch(from currentColor 0 0 0 / clamp(0, calc((l - .5) * .5), .15)))}.blog-demo-surface .blog-demo-guide{filter:none}@container (width>=40rem){.blog-demo-surface{--border:2px}}.frosted-image[data-astro-cid-4wsodhzn]{animation:15s infinite frosted-image}@media (prefers-reduced-motion:reduce){blog-frosted-demo[data-astro-cid-4wsodhzn]:not([data-running]) .frosted-image[data-astro-cid-4wsodhzn]{animation-play-state:paused}}blog-frosted-demo[data-astro-cid-4wsodhzn][data-paused] .frosted-image[data-astro-cid-4wsodhzn]{animation-play-state:paused}@keyframes frosted-image{0%,26.67%,to{opacity:1}33.33%,93.33%{opacity:0}}.accent-button[data-astro-cid-wfhduing],.accent-fill[data-astro-cid-wfhduing]{background-color:var(--demo-accent);transition:background-color .4s ease-in-out,color .4s ease-in-out}.accent-button[data-astro-cid-wfhduing]{color:contrast-color(var(--demo-accent))}@media (prefers-reduced-motion:reduce){.accent-button[data-astro-cid-wfhduing],.accent-fill[data-astro-cid-wfhduing]{transition:none}}
