@layer components{.demo .demo__core{display: grid;gap: var(--space-m);padding: var(--space-m)}@container (min-width: 44rem){.demo .demo__core{padding: var(--space-l)}}.demo__head{display: flex;flex-wrap: wrap;align-items: center;justify-content: space-between;gap: var(--space-xs) var(--space-m)}.demo__kicker{color: var(--c-lilac);max-inline-size: none}.demo__note{font-size: var(--step--2);line-height: 1.5;color: var(--c-bone-3);max-inline-size: calc(64 * var(--ch-body))}.car__line{fill: none;stroke: var(--c-bone-2);stroke-width: 1.25;stroke-linejoin: round;vector-effect: non-scaling-stroke}.car__seam{fill: none;stroke: color-mix(in oklch,var(--c-bone) 24%,transparent);stroke-width: 1;vector-effect: non-scaling-stroke}.car__glass{fill: var(--c-raised-2);stroke: color-mix(in oklch,var(--c-bone) 38%,transparent);stroke-width: 1;vector-effect: non-scaling-stroke}.car__tyre{fill: var(--c-raised-2);stroke: var(--c-bone-3);stroke-width: 1.25;vector-effect: non-scaling-stroke}.car__hub{fill: none;stroke: color-mix(in oklch,var(--c-bone) 22%,transparent);stroke-width: 1;vector-effect: non-scaling-stroke}.car__ground{stroke: color-mix(in oklch,var(--c-bone) 14%,transparent);stroke-width: 1;vector-effect: non-scaling-stroke}.ppf__views{display: grid;gap: var(--space-s)}@container (min-width: 52rem){.ppf__views{grid-template-columns: 1fr 1fr}}.ppf__view{display: grid;gap: 0.5rem;margin: 0;padding: var(--space-xs) var(--space-xs) var(--space-2xs);border-radius: var(--radius-m);background: var(--c-sunken);box-shadow: inset 0 0 0 1px var(--edge-faint)}.ppf__svg{inline-size: 100%;block-size: auto;overflow: visible}.ppf__view figcaption{padding-inline-start: 0.25rem}.ppf__wash{fill: var(--c-violet);fill-opacity: 0.3}.ppf__strand{fill: var(--c-lilac);fill-opacity: 0.75}.ppf .z{fill: url(#ppf-film);opacity: 0;transition: opacity var(--dur-state) var(--ease-out-soft)}.ppf .z.edge{stroke: var(--c-lilac);stroke-width: 1;vector-effect: non-scaling-stroke}.ppf:has(input[value="partial"]:checked) .z.p,.ppf:has(input[value="front"]:checked) .z.f,.ppf:has(input[value="track"]:checked) .z.t,.ppf:has(input[value="full"]:checked) .z.a{opacity: 1}@supports not selector(:has(*)){.ppf .z.f{opacity: 1}.ppf__pick{display: none}}.ppf__info{display: grid;gap: var(--space-xs)}.ppf__pkg{display: none;gap: var(--space-2xs)}.ppf:has(input[value="partial"]:checked) [data-pkg="partial"],.ppf:has(input[value="front"]:checked) [data-pkg="front"],.ppf:has(input[value="track"]:checked) [data-pkg="track"],.ppf:has(input[value="full"]:checked) [data-pkg="full"]{display: grid}@supports not selector(:has(*)){.ppf [data-pkg="front"]{display: grid}}.ppf__name{font-family: var(--font-ui);font-weight: var(--weight-medium);font-size: var(--step-1);letter-spacing: -0.02em;color: var(--c-bone)}.ppf__note{color: var(--c-bone-2)}.ppf__panels{display: flex;flex-wrap: wrap;gap: 0.375rem;margin: 0;padding: 0;list-style: none}.ppf__panels li{padding: 0.3125rem 0.75rem;border-radius: var(--radius-pill);background: var(--c-violet-wash);box-shadow: inset 0 0 0 1px color-mix(in oklch,var(--c-violet) 40%,transparent);font-family: var(--font-ui);font-size: var(--step--1);color: var(--c-bone)}.ppf__key{display: flex;align-items: center;gap: 0.5rem;font-family: var(--font-mono);font-size: var(--step--2);letter-spacing: var(--tracking-label);text-transform: uppercase;color: var(--c-bone-3)}.ppf__swatch{inline-size: 1.25rem;block-size: 0.75rem;border-radius: 0.1875rem;background: repeating-linear-gradient(135deg,var(--c-lilac) 0 1.5px,color-mix(in oklch,var(--c-violet) 35%,transparent) 1.5px 5px);box-shadow: inset 0 0 0 1px var(--c-lilac)}.tint__read{display: flex;gap: var(--space-s);max-inline-size: none;font-family: var(--font-mono);font-size: var(--step--2);letter-spacing: var(--tracking-label);text-transform: uppercase;color: var(--c-bone-3)}.tint__read b{font-weight: 400;color: var(--c-bone);font-variant-numeric: tabular-nums}.tint__car{margin: 0;padding: var(--space-s) var(--space-xs) var(--space-2xs);border-radius: var(--radius-m);background: var(--c-sunken);box-shadow: inset 0 0 0 1px var(--edge-faint)}.tint__svg{display: block;inline-size: 100%;block-size: auto}.tint__body{fill: var(--c-raised-2)}.tint .car__glass{fill: color-mix(in oklch,var(--c-lilac) 18%,var(--c-raised-3))}.tint__seat{fill: var(--c-raised-1);stroke: color-mix(in oklch,var(--c-bone) 40%,transparent);stroke-width: 1;vector-effect: non-scaling-stroke}.tint__cabin path:last-child{fill: none;stroke-width: 2.5}.tint__film{fill: var(--c-sunken);transition: opacity var(--dur-state) var(--ease-out-soft)}.tint__glint{fill: none;stroke: color-mix(in oklch,var(--c-bone) 22%,transparent);stroke-width: 1.5;stroke-linecap: round;vector-effect: non-scaling-stroke}.tint__controls{display: grid;gap: var(--space-m)}@container (min-width: 44rem){.tint__controls{grid-template-columns: 1fr 1fr;column-gap: var(--space-l)}}.tint__ctl{display: grid;gap: 0.625rem;min-inline-size: 0}.tint__ctl label{color: var(--c-bone-2)}.tint__range{-webkit-appearance: none;appearance: none;inline-size: 100%;block-size: 2.75rem;margin: 0;background: transparent;cursor: pointer}.tint__range::-webkit-slider-runnable-track{block-size: 0.375rem;border-radius: var(--radius-pill);background: linear-gradient(90deg,var(--c-raised-3),var(--c-sunken));box-shadow: inset 0 0 0 1px var(--edge)}.tint__range::-moz-range-track{block-size: 0.375rem;border-radius: var(--radius-pill);background: linear-gradient(90deg,var(--c-raised-3),var(--c-sunken));box-shadow: inset 0 0 0 1px var(--edge)}.tint__range::-webkit-slider-thumb{-webkit-appearance: none;inline-size: 1.375rem;block-size: 1.375rem;margin-block-start: -0.5rem;border-radius: 50%;background: var(--c-bone);box-shadow: 0 0 0 4px var(--c-violet-glow)}.tint__range::-moz-range-thumb{inline-size: 1.375rem;block-size: 1.375rem;border: 0;border-radius: 50%;background: var(--c-bone);box-shadow: 0 0 0 4px var(--c-violet-glow)}.tint__range:focus-visible{outline: none}.tint__range:focus-visible::-webkit-slider-thumb{box-shadow: 0 0 0 2px var(--c-ground),0 0 0 4px var(--c-lilac)}.tint__range:focus-visible::-moz-range-thumb{box-shadow: 0 0 0 2px var(--c-ground),0 0 0 4px var(--c-lilac)}.tint__ticks{display: flex;justify-content: space-between;margin: -0.25rem 0 0;padding: 0;list-style: none;font-family: var(--font-mono);font-size: 0.6875rem;letter-spacing: 0.04em;color: var(--c-bone-3)}.tint__law{position: relative;padding: var(--space-xs) var(--space-s) var(--space-xs) calc(var(--space-s) + 0.25rem);border-radius: var(--radius-s);background: var(--c-raised-2);font-size: var(--step--1);line-height: 1.5;color: var(--c-bone);max-inline-size: none}.tint__law::before{content: "";position: absolute;inset-block: 0.625rem;inset-inline-start: 0.5rem;inline-size: 2px;border-radius: 2px;background: var(--c-lilac-dim)}.tint__law[data-over]::before{background: var(--c-error)}.tint__films{display: grid;gap: var(--space-s)}.tint__specs{display: grid;gap: 0;margin: 0}.tint__specs > div{display: grid;grid-template-columns: minmax(0,11rem) minmax(0,1fr);align-items: center;gap: var(--space-s);padding-block: 0.625rem;box-shadow: inset 0 1px 0 var(--edge-faint)}.tint__specs dt{font-family: var(--font-mono);font-size: var(--step--2);letter-spacing: var(--tracking-label);text-transform: uppercase;color: var(--c-bone-3)}.tint__specs dd{display: grid;grid-template-columns: minmax(0,1fr) auto;align-items: center;gap: var(--space-s);margin: 0;font-family: var(--font-ui);font-weight: var(--weight-medium);color: var(--c-bone)}.tint__specs dd:not(:has(.tint__bar)){grid-template-columns: auto}.tint__bar{position: relative;display: block;block-size: 0.3125rem;border-radius: var(--radius-pill);background: var(--c-raised-3);overflow: hidden}.tint__bar::after{content: "";position: absolute;inset: 0;border-radius: inherit;background: var(--c-lilac);transform-origin: left;transform: scaleX(var(--v))}.tint__ir{display: none}.tint:has(input[value="carbon"]:checked) .tint__ir[data-film="carbon"],.tint:has(input[value="ceramic"]:checked) .tint__ir[data-film="ceramic"]{display: grid}@supports not selector(:has(*)){.tint__ir[data-film="ceramic"]{display: grid}.tint__pick{display: none}}.no-js .tint__controls,.no-js .tint__law{display: none}.bk__steps{display: flex;gap: var(--space-s);margin: 0;padding: 0;list-style: none}.bk__steps li{display: inline-flex;align-items: center;gap: 0.5rem;font-family: var(--font-ui);font-size: var(--step--1);color: var(--c-bone-3)}.bk__steps span{display: grid;place-items: center;inline-size: 1.5rem;block-size: 1.5rem;border-radius: 50%;font-family: var(--font-mono);font-size: 0.6875rem;box-shadow: inset 0 0 0 1px var(--edge-strong);transition: background-color var(--dur-hover) var(--ease-out-soft),color var(--dur-hover) var(--ease-out-soft)}.bk__steps [aria-current="step"]{color: var(--c-bone)}.bk__steps [aria-current="step"] span,.bk__steps .is-done span{background: var(--c-violet);color: var(--c-bone);box-shadow: none}.no-js .bk__steps{display: none}.bk__form{display: grid;gap: var(--space-m)}.bk__step{display: grid;gap: var(--space-s);margin: 0;padding: 0;border: 0;min-inline-size: 0}.bk__q{padding: 0;margin-block-end: var(--space-s);font-family: var(--font-ui);font-weight: var(--weight-medium);font-size: var(--step-2);line-height: 1.15;letter-spacing: -0.025em;color: var(--c-bone)}.bk__q:focus{outline: none}.bk.is-live .bk__step:not(.is-current),.bk.is-live.is-done .bk__step{display: none}@media (prefers-reduced-motion: no-preference){.bk.has-moved .bk__step.is-current,.bk.has-moved .bk__done{animation: bk-in var(--dur-state) var(--ease-out)}}@keyframes bk-in{from{opacity: 0;transform: translateY(0.5rem)}}.choices{display: flex;flex-wrap: wrap;gap: 0.5rem}.choice{position: relative;cursor: pointer;border-radius: var(--radius-pill)}.choice input{position: absolute;opacity: 0;inline-size: 1px;block-size: 1px;pointer-events: none}.choice span{display: inline-flex;align-items: center;min-block-size: 2.75rem;padding-inline: 1rem;border-radius: inherit;background: var(--c-raised-2);box-shadow: inset 0 0 0 1px var(--edge);font-family: var(--font-ui);font-size: var(--step--1);letter-spacing: -0.01em;color: var(--c-bone-2);transition: color var(--dur-hover) var(--ease-out-soft),box-shadow var(--dur-hover) var(--ease-out-soft),background-color var(--dur-hover) var(--ease-out-soft),transform var(--dur-press) var(--ease-out-soft)}@media (hover: hover){.choice:hover span{color: var(--c-bone);box-shadow: inset 0 0 0 1px var(--edge-strong)}}.choice:active span{transform: scale(0.97)}.choice input:checked + span{color: var(--c-bone);background: color-mix(in oklch,var(--c-violet) 16%,var(--c-raised-2));box-shadow: inset 0 0 0 1.5px var(--c-violet)}.choice:has(input:focus-visible){outline: 2px solid var(--c-lilac);outline-offset: 3px}.choice input[aria-invalid="true"] + span{box-shadow: inset 0 0 0 1px color-mix(in oklch,var(--c-error) 55%,transparent)}.choices--quiet .choice span{min-block-size: 2.5rem;background: transparent}.bk__err{display: flex;align-items: center;gap: 0.5rem;font-size: var(--step--1);color: var(--c-error)}.bk__err[hidden]{display: none}.bk__err .icon{inline-size: 1.125rem;block-size: 1.125rem}.bk__nav{display: flex;align-items: center;justify-content: space-between;gap: var(--space-s);padding-block-start: var(--space-s);box-shadow: inset 0 1px 0 var(--edge-faint)}.bk.is-live .bk__nav[hidden]{display: none}.bk__back{display: inline-flex;align-items: center;gap: 0.5rem;min-block-size: 2.75rem;padding-inline: 0.25rem;font-family: var(--font-mono);font-size: var(--step--2);letter-spacing: var(--tracking-label);text-transform: uppercase;color: var(--c-bone-2);transition: color var(--dur-hover) var(--ease-out-soft)}.bk__back .icon{inline-size: 1rem;block-size: 1rem}@media (hover: hover){.bk__back:hover{color: var(--c-lilac)}}.bk__back[disabled]{visibility: hidden}.no-js .bk__nav{display: none}.bk__done{display: grid;gap: var(--space-s)}.bk__done[hidden]{display: none}.bk__done-title{font-family: var(--font-ui);font-weight: var(--weight-medium);font-size: var(--step-2);letter-spacing: -0.025em;color: var(--c-bone);max-inline-size: none}.bk__done-title:focus{outline: none}.bk__done-title .t-label{color: var(--c-lilac);letter-spacing: var(--tracking-label)}.bk__sum{display: grid;gap: 0;margin: 0}.bk__sum > div{display: grid;gap: 0.25rem var(--space-s);padding-block: 0.625rem;box-shadow: inset 0 1px 0 var(--edge-faint)}@media (min-width: 40rem){.bk__sum > div{grid-template-columns: 8rem minmax(0,1fr)}}.bk__sum dt{font-family: var(--font-mono);font-size: var(--step--2);letter-spacing: var(--tracking-label);text-transform: uppercase;color: var(--c-bone-3)}.bk__sum dd{margin: 0;color: var(--c-bone)}.bk__then{color: var(--c-bone-2)}.js .bk__nojs{display: none}}