.demo{display:grid;gap:8px;width:100%;max-width:32rem;touch-action:pan-y;touch-action:pan-y pinch-zoom}.demo__card{display:grid;gap:16px;min-width:0;padding:16px}@media (min-width:600px){.demo__card{padding:20px 24px 24px}}.demo--poll{max-width:28rem}.demo__head{display:flex;align-items:center;justify-content:space-between;gap:8px}.demo__try{font:700 12px/1.3 var(--font-ui);letter-spacing:.12em;text-transform:uppercase;color:var(--blue-strong)}.no-js :is(.demo--poll,.demo--split) .demo__try{visibility:hidden}.demo__set{min-width:0;margin:0;padding:0;border:0}.demo__set>legend{float:left;width:100%;margin-bottom:12px;padding:0}.demo__set>legend + *{clear:both}.demo__q{font:700 var(--fs-body)/1.35 var(--font-ui);color:var(--title)}.demo__note{font-size:var(--fs-cap);line-height:1.45;color:var(--ink-2)}.demo__avatar{display:inline-grid;place-items:center;flex:none;width:28px;height:28px;border-radius:50%;background:var(--av,#0E52A0);color:#fff;font:700 12px/1 var(--font-ui)}.demo__choices,.sp__tabs{display:flex;flex-wrap:wrap;gap:8px}.demo__choice{position:relative;display:inline-flex}.demo__choice>span,.sp__tab{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 16px;border:1px solid var(--hair);border-radius:var(--r-pill);background:var(--paper-2);color:var(--ink);font:700 var(--fs-small)/1.2 var(--font-ui);cursor:pointer}.demo__choice :checked + span,.sp__tab[aria-selected="true"]{background:var(--blue-strong);border-color:var(--blue-strong);color:var(--on-blue)}.demo__choice :focus-visible + span{outline:3px solid var(--focus);outline-offset:2px}@media (hover:hover){.demo__choice :not(:checked) + span:hover,.sp__tab[aria-selected="false"]:hover{border-color:var(--blue)}}@keyframes demo-fade-in{from{opacity:0}}@keyframes demo-fade-out{to{opacity:0}}@keyframes demo-pop{from{opacity:0;transform:scale(.86)}}@keyframes demo-flash{from{opacity:1}to{opacity:0}}.dd__result{display:grid}.dd__panel{grid-area:1/1;display:grid;gap:12px;align-content:start;visibility:hidden}.demo--dates[data-ready] .dd__panel.is-on{visibility:visible}.demo--dates:not([data-ready]):has(.dd__in--exact:checked) .dd__panel--exact{visibility:visible}.demo--dates:not([data-ready]):has(.dd__in--month:checked) .dd__panel--month{visibility:visible}.demo--dates:not([data-ready]):has(.dd__in--tbd:checked) .dd__panel--tbd{visibility:visible}@supports not selector(:has(*)){.demo--dates:not([data-ready]) .dd__panel--exact{visibility:visible}}.dd__title{display:flex;align-items:center;gap:10px;font:700 var(--fs-h3)/1.25 var(--font-ui);color:var(--title)}.dd__title .icon{flex:none;width:24px;height:24px;color:var(--blue)}.dd__days{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.dd__days li{display:grid;place-content:center;justify-items:center;gap:2px;min-height:56px;padding:6px 4px;border-radius:var(--r-sm);background:var(--tint);text-align:center;font:var(--fs-cap)/1.25 var(--font-ui);font-variant-numeric:tabular-nums}.dd__day{font-weight:700;color:var(--blue-strong)}.dd__date{color:var(--ink-2)}.dd__note{font-size:var(--fs-cap);line-height:1.45;color:var(--ink-2)}.pl__from{display:flex;align-items:center;gap:10px;font-size:var(--fs-small);color:var(--ink)}.pl__q{display:flex;align-items:center;gap:8px}.pl__q .icon{color:var(--blue)}.pl__opt{position:relative;display:block}.pl__opt + .pl__opt{margin-top:8px}.pl__row{position:relative;isolation:isolate;display:flex;align-items:center;gap:12px;min-height:48px;padding:8px 14px 8px 12px;overflow:hidden;border:1px solid var(--hair);border-radius:var(--r-md);background:var(--card);cursor:pointer}.pl__row::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--tint);transform:scaleX(var(--pct,0));transform-origin:0 50%}.pl__tick{display:grid;place-items:center;flex:none;width:22px;height:22px;border:2px solid var(--ink-2);border-radius:50%;background:var(--card)}.pl__tick .icon{width:14px;height:14px;stroke-width:3;visibility:hidden}.pl__text{flex:1;font-weight:700}.pl__pct{min-width:4ch;text-align:right;font-weight:700;font-variant-numeric:tabular-nums}.pl__opt :checked + .pl__row{border-color:var(--blue)}.pl__opt :checked + .pl__row .pl__tick{border-color:var(--blue-strong);background:var(--blue-strong);color:var(--on-blue)}.pl__opt :checked + .pl__row .pl__tick .icon{visibility:visible}.pl__opt :focus-visible + .pl__row{outline:3px solid var(--focus);outline-offset:2px}.pl__opt :disabled + .pl__row{cursor:default}@media (hover:hover){.pl__opt :enabled:not(:checked) + .pl__row:hover{border-color:var(--blue)}}.pl__foot{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 16px;min-height:1.6em;font-size:var(--fs-small);color:var(--ink-2)}.pl__foot .tnum{font-weight:700;color:var(--ink)}.pl__hint{font-size:var(--fs-cap)}.sp__head{display:flex;align-items:center;gap:12px}.sp__icon{display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:var(--r-sm);background:var(--tint);color:var(--blue-strong)}.sp__what{display:grid;gap:2px;min-width:0;font-size:var(--fs-small);line-height:1.4;color:var(--ink-2)}.sp__what>strong{font-size:var(--fs-body);color:var(--title)}.sp__by strong{color:var(--ink)}.sp__tab{padding:0 14px}.sp__panels{display:grid}.sp__panel{grid-area:1/1;display:grid;grid-template-rows:1fr auto auto;gap:8px;min-width:0;visibility:hidden}.sp__panel.is-on{visibility:visible}.sp__text{display:grid;gap:4px;align-content:start}.sp__how{font-weight:700;line-height:1.45;color:var(--title)}.sp__note{font-size:var(--fs-small);line-height:1.45;color:var(--ink-2)}.sp__table{width:100%;margin-top:4px;border-collapse:collapse;font-size:var(--fs-small)}.sp__table caption{margin-bottom:4px;text-align:left;font-weight:700;color:var(--title)}.js .sp__table caption{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.sp__table th,.sp__table td{padding:6px 0;font-weight:400;text-align:left;vertical-align:middle}.sp__table tbody tr + tr>*{border-top:1px solid var(--hair)}.sp__table th .demo__avatar{margin-right:10px}.sp__table th .tag{margin-left:4px}.sp__table tr:nth-child(1) .demo__avatar{--av:#0E52A0}.sp__table tr:nth-child(2) .demo__avatar{--av:#5B21B6}.sp__table tr:nth-child(3) .demo__avatar{--av:#C2410C}.sp__table tr:nth-child(4) .demo__avatar{--av:#15803D}.sp__table tr:nth-child(5) .demo__avatar{--av:#9D174D}.sp__table tr:nth-child(6) .demo__avatar{--av:#0E7490}.sp__table .sp__in{padding-right:16px;color:var(--ink-2);text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}.sp__table .sp__amt{text-align:right;white-space:nowrap}.sp__amt .money{position:relative;isolation:isolate;display:inline-block;font-weight:700;color:var(--ink)}.sp__amt .money::before{content:"";position:absolute;inset:-2px -6px;z-index:-1;border-radius:6px;background:var(--tint);opacity:0}.sp__left{display:flex;align-items:center;gap:6px;padding-top:8px;border-top:1px solid var(--hair);font-size:var(--fs-small);color:var(--ink-2)}.sp__left .icon,.sp__left strong{color:var(--ok)}.no-js .sp__tabs{display:none}.no-js .sp__panels{gap:24px}.no-js .sp__panel{grid-area:auto;display:none;visibility:visible}.no-js :is(.sp__panel--equal,.sp__panel--shares){display:grid}.cl__stage{display:grid;grid-template:minmax(0,1fr)/minmax(0,1fr);width:min(100%,320px);margin-inline:auto;aspect-ratio:4/5;overflow:hidden;border-radius:var(--r-md);background:var(--paper-2);box-shadow:var(--shadow-card)}.cl__img{grid-area:1/1;display:none;width:100%;height:100%;object-fit:cover;object-position:top}.cl__img--filmstrip{object-fit:contain}.demo--collage[data-ready] .cl__img:is(.is-current,.is-leaving){display:block}.demo--collage[data-ready] .cl__img.is-current{z-index:1}.demo--collage:not([data-ready]):has(.cl__in--filmstrip:checked) .cl__img--filmstrip{display:block}.demo--collage:not([data-ready]):has(.cl__in--polaroid:checked) .cl__img--polaroid{display:block}.demo--collage:not([data-ready]):has(.cl__in--postcard:checked) .cl__img--postcard{display:block}.demo--collage:not([data-ready]):has(.cl__in--magazine:checked) .cl__img--magazine{display:block}.demo--collage:not([data-ready]):has(.cl__in--scrapbook:checked) .cl__img--scrapbook{display:block}.demo--collage:not([data-ready]):has(.cl__in--hero-strip:checked) .cl__img--hero-strip{display:block}@supports not selector(:has(*)){.demo--collage:not([data-ready]) .cl__img--filmstrip{display:block}}.cl__bar{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;margin-bottom:-4px}.demo__pause{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border:1px solid var(--hair);border-radius:var(--r-pill);background:var(--card);color:var(--ink);font:700 var(--fs-cap)/1 var(--font-ui)}.demo__pause .icon{width:16px;height:16px}.demo__pause .i-play,.demo__pause[data-paused] .i-pause{display:none}.demo__pause[data-paused] .i-play{display:inline-block}@media (prefers-reduced-motion:no-preference){[data-motion="running"] .demo--dates[data-touched] .dd__panel.is-on{animation:demo-fade-in 180ms var(--ease-out)}[data-motion="running"] .demo--dates[data-touched] .dd__panel.is-leaving{visibility:visible;animation:demo-fade-out 180ms var(--ease-out) forwards}[data-motion="running"] .demo--dates[data-touched] .dd__panel.is-on li{animation:demo-pop 220ms var(--ease-out) calc(var(--i,0) * 40ms) both}[data-motion="running"] .demo--poll[data-touched] .pl__row::before{transition:transform 500ms var(--ease-out)}[data-motion="running"] .demo--split[data-touched] .sp__amt.is-changed .money::before{animation:demo-flash 400ms ease-in}[data-motion="running"] .demo--collage .cl__img.is-entering{animation:demo-fade-in 300ms var(--ease-out)}}@media (forced-colors:active){.demo__choice :checked + span,.sp__tab[aria-selected="true"]{forced-color-adjust:none;background:Highlight;border-color:Highlight;color:HighlightText}}@media print{.demo__card{box-shadow:none}.demo__pause{display:none}}