@layer normalize,base,demo,markers,arrows;@layer normalize{html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}}@layer base{:root{color-scheme:light dark;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}[data-theme=light]{color-scheme:light only}[data-theme=dark]{color-scheme:dark only}*,*:before,*:after{box-sizing:border-box}body{min-height:100svh;margin:0;display:grid;place-items:center;padding-block:clamp(1rem,4vw,3rem);padding-inline:1rem;color:light-dark(#111,#f7f7f7);background:light-dark(#fff,#000)}body:before{--size: 45px;--line: color-mix(in hsl, canvasText, transparent 80%);content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(90deg,var(--line) 1px,transparent 1px var(--size)) calc(var(--size) * .36) 50% / var(--size) var(--size),linear-gradient(var(--line) 1px,transparent 1px var(--size)) 0 calc(var(--size) * .32) / var(--size) var(--size);-webkit-mask:linear-gradient(-20deg,transparent 50%,white);mask:linear-gradient(-20deg,transparent 50%,white)}main{width:min(100%,500px)}a{color:#438ee4}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}.brand-link{position:fixed;top:1rem;left:1rem;width:44px;aspect-ratio:1;display:grid;place-items:center;color:canvasText;opacity:.72}.brand-link:is(:hover,:focus-visible){opacity:1}.craft-link .spinner{width:24px}.gem__facet{transform-box:fill-box;transform-origin:center}.gem__facet--top{--spin-to: 360deg;transform:scaleY(-1)}@media(prefers-reduced-motion:no-preference){.gem__facet{animation:gem-spin 30s infinite linear;animation-composition:add}.brand-link:is(:hover,:focus-visible) .gem__facet{animation:gem-spin 30s infinite linear,gem-hover .65s cubic-bezier(.215,.61,.355,1);animation-composition:add,add}}@keyframes gem-spin{to{rotate:var(--spin-to, -360deg)}}@keyframes gem-hover{to{rotate:calc(var(--spin-to, -360deg) / 4)}}}@layer demo{.post{timeline-scope:--carousel,--slide-1,--slide-2,--slide-3,--slide-4,--slide-5;--post-padding: clamp(1rem, 4vw, 1.25rem);--marker-inset: 5.25rem ;--rail-inset: calc(var(--post-padding) + var(--marker-inset));container-type:inline-size;overflow:hidden;padding:var(--post-padding);outline:1px solid light-dark(hsl(0 0% 0% / .12),hsl(0 0% 100% / .14));border-radius:1.6rem;background:light-dark(rgb(255 255 255 / .78),rgb(14 15 18 / .76));box-shadow:0 1px 0 light-dark(rgb(255 255 255 / .9),rgb(255 255 255 / .08)) inset,0 18px 50px #00000024,0 2px 8px #00000014;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}.post__header{display:grid;grid-template-columns:auto 1fr;height:50px;align-items:start;gap:.75rem}.post__avatar{width:4.5rem;aspect-ratio:1;border-radius:50%;-o-object-fit:cover;object-fit:cover}.post__byline{display:flex;gap:1rem;font-size:.875rem}.post__byline p{margin:0}.post__byline p:last-child{color:light-dark(#656a73,#9297a1)}.carousel{display:block;position:relative}.carousel>ul{display:flex;gap:.6rem;width:calc(100% + (var(--post-padding) * 2));margin:0 calc(var(--post-padding) * -1);padding-inline:var(--rail-inset) var(--post-padding);overflow-x:auto;overflow-y:hidden;overscroll-behavior-inline:contain;scrollbar-width:none;scroll-snap-type:inline mandatory;scroll-behavior:smooth;scroll-padding-inline:var(--rail-inset);scroll-timeline:--carousel inline;list-style:none;cursor:grab;-webkit-user-select:none;-moz-user-select:none;user-select:none}.carousel>ul::-webkit-scrollbar{display:none}.carousel>ul[data-dragging=true]{cursor:grabbing}.carousel[drag=off]>ul{cursor:auto;-webkit-user-select:auto;-moz-user-select:auto;user-select:auto}.carousel li{width:calc(100cqi - var(--marker-inset) * 2);flex:0 0 auto;scroll-snap-align:center;scroll-snap-stop:always;overflow:hidden;border-radius:1.1rem;background:light-dark(#d8dbe0,#24262c);view-timeline-name:var(--slide);view-timeline-axis:inline;border:1px solid light-dark(hsl(0 0% 0% / .12),hsl(0 0% 100% / .14))}.carousel li>img{display:block;width:100%;aspect-ratio:4 / 3;-o-object-fit:cover;object-fit:cover;pointer-events:none}.carousel li:where(:nth-child(1)),.carousel__fallback button:where(:nth-child(1)){--slide: --slide-1;--thumb: url(https://picsum.photos/id/1015/160/100)}.carousel li:where(:nth-child(2)),.carousel__fallback button:where(:nth-child(2)){--slide: --slide-2;--thumb: url(https://picsum.photos/id/1016/160/100)}.carousel li:where(:nth-child(3)),.carousel__fallback button:where(:nth-child(3)){--slide: --slide-3;--thumb: url(https://picsum.photos/id/1039/160/100)}.carousel li:where(:nth-child(4)),.carousel__fallback button:where(:nth-child(4)){--slide: --slide-4;--thumb: url(https://picsum.photos/id/1043/160/100)}.carousel li:where(:nth-child(5)),.carousel__fallback button:where(:nth-child(5)){--slide: --slide-5;--thumb: url(https://picsum.photos/id/1050/160/100)}[data-thumbnails=false] .carousel li,[data-thumbnails=false] .carousel__fallback button{--thumb: none}@supports (animation-timeline: --carousel) and (timeline-scope: --carousel){.post__avatar{animation:shrink-avatar ease-out both;animation-timeline:--carousel;animation-range:0% calc(var(--marker-inset) * .75);transform-origin:top right}@keyframes shrink-avatar{to{scale:.5}}}}@layer markers{.carousel{--item-count: 4;--thumb-thickness: 6px;--thumb-rest-width: 1rem;--thumb-active-width: 1.85rem;--thumb-gap: .25rem;--marker-group-width: calc( var(--thumb-active-width) + (var(--item-count) - 1) * (var(--thumb-rest-width) + var(--thumb-gap)) );--thumb-hit-inline: .2rem;--thumb-hit-block: .8rem;--thumb-radius: calc(var(--thumb-thickness) / 2 + var(--thumb-hit-inline)) / calc(var(--thumb-thickness) / 2 + var(--thumb-hit-block))}.carousel__fallback{position:absolute;inset:auto auto calc(100% + 6px) var(--marker-inset);width:var(--marker-group-width);height:2rem;display:flex;align-items:center;gap:var(--thumb-gap)}.carousel__fallback button{box-sizing:content-box;height:var(--thumb-thickness);flex:1;padding-inline:var(--thumb-hit-inline);padding-block:var(--thumb-hit-block);margin-inline:calc(var(--thumb-hit-inline) * -1);margin-block:calc(var(--thumb-hit-block) * -1);overflow:hidden;border:0;border-radius:var(--thumb-radius);opacity:.4;min-width:var(--thumb-rest-width);filter:saturate(.65);cursor:pointer;background-color:color-mix(in hsl,canvasText,canvas 30%);background-image:var(--thumb);background-position:center;background-size:cover;background-origin:content-box;background-clip:content-box}.carousel__fallback button[aria-current=true]{flex:4;opacity:1;filter:saturate(1)}.carousel__fallback button:focus-visible{outline:3px solid #438ee4;outline-offset:0}@supports selector(li::scroll-marker){.carousel>ul{scroll-marker-group:before}[data-mode=markers] .carousel__fallback{display:none}[data-mode=buttons] .carousel>ul::scroll-marker-group{display:none}.carousel>ul::scroll-marker-group{position:absolute;inset:auto auto calc(100% + 6px) var(--marker-inset);width:var(--marker-group-width);height:2rem;display:flex;align-items:center;gap:var(--thumb-gap)}.carousel li::scroll-marker{content:attr(data-label);box-sizing:content-box;height:var(--thumb-thickness);flex:1;padding-inline:var(--thumb-hit-inline);padding-block:var(--thumb-hit-block);margin-inline:calc(var(--thumb-hit-inline) * -1);margin-block:calc(var(--thumb-hit-block) * -1);overflow:hidden;border:0;border-radius:var(--thumb-radius);font-size:0;opacity:.4;min-width:var(--thumb-rest-width);filter:saturate(.65);background-color:color-mix(in hsl,canvasText,canvas 30%);background-image:var(--thumb);background-position:center;background-size:cover;background-origin:content-box;background-clip:content-box}.carousel li::scroll-marker:focus-visible{outline:3px solid #438ee4;outline-offset:0}}@supports (animation-timeline: --slide-1) and (timeline-scope: --slide-1){.carousel li:nth-last-child(2),.carousel__fallback button:nth-last-child(2){--thumb-range: cover var(--marker-inset) cover calc(100% - var(--marker-inset))}.carousel li:last-child,.carousel__fallback button:last-child{--thumb-range: cover 0% cover calc(100% - var(--marker-inset) * 2)}.carousel__fallback button{animation:activate-thumb linear both;animation-timeline:var(--slide);animation-range:var(--thumb-range, cover)}@supports selector(li::scroll-marker){.carousel li::scroll-marker{animation:activate-thumb linear both;animation-timeline:var(--slide);animation-range:var(--thumb-range, cover)}}@keyframes activate-thumb{0%,to{flex:1;opacity:.4;filter:saturate(.65)}50%{flex:4;opacity:1;filter:saturate(1)}}}@supports not ((animation-timeline: --slide-1) and (timeline-scope: --slide-1)){.carousel__fallback button{transition:flex .2s ease-out,opacity .2s ease-out,filter .2s ease-out}.post__avatar{transform-origin:top left;transition:scale .2s ease-out}.post[data-scrolled=true] .post__avatar{scale:.7222}@supports selector(li::scroll-marker){.carousel li::scroll-marker{transition:flex .2s ease-out,opacity .2s ease-out,filter .2s ease-out}.carousel li::scroll-marker:target-current{flex:4;opacity:1;filter:saturate(1)}}}}@layer arrows{.carousel{--arrow-fade: 4rem;--arrow-direction: normal;--arrow-range: 0 var(--arrow-fade)}.carousel__arrows{position:absolute;inset:0;opacity:0;pointer-events:none;transition:opacity .2s ease-out}.post:is(:hover,:focus-within) .carousel__arrows{opacity:1}.post:is(:hover,:focus-within) .carousel__arrow:not(:disabled){pointer-events:auto}.carousel__arrow{position:absolute;top:50%;z-index:3;width:2rem;aspect-ratio:1;padding:0;display:grid;place-items:center;border:1px solid rgb(255 255 255 / .1);border-radius:50%;color:#ffffffb8;background-color:#1315195c;box-shadow:0 1px #ffffff1f inset,0 5px 14px #00000029;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);cursor:pointer;translate:0 -50%;transition:background-color .15s ease-out,transform .15s ease-out}.carousel__arrow--previous{left:.75rem}.carousel__arrow--next{right:.75rem;--arrow-direction: reverse;--arrow-range: calc(100% - var(--arrow-fade)) 100%}.carousel__arrow svg{width:1.05rem;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.carousel__arrow:is(:hover,:focus-visible){background-color:#1315198a;transform:scale(1.08)}.carousel__arrow:active{transform:scale(.96)}.carousel__arrow:focus-visible{outline:3px solid #438ee4;outline-offset:3px}.carousel__arrow:disabled{opacity:0;scale:.72}[data-arrows=off] .carousel__arrows,[data-arrows=native] .carousel__arrows{display:none}@supports selector(ul::scroll-button(*)){[data-arrows=native] .carousel>ul::scroll-button(*){position:absolute;top:50%;z-index:3;width:2rem;aspect-ratio:1;border:1px solid rgb(255 255 255 / .1);border-radius:50%;background-color:#1315195c;background-repeat:no-repeat;background-position:center;background-size:1.05rem;box-shadow:0 1px #ffffff1f inset,0 5px 14px #00000029;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);cursor:pointer;pointer-events:none;translate:0 -50%;filter:opacity(0);transition:background-color .15s ease-out,filter .2s ease-out,transform .15s ease-out}.post:is(:hover,:focus-within) .carousel>ul::scroll-button(*){filter:opacity(1)}.post:is(:hover,:focus-within) .carousel>ul::scroll-button(*):not(:disabled){pointer-events:auto}[data-arrows=native] .carousel>ul::scroll-button(*):is(:hover,:focus-visible){background-color:#1315198a;transform:scale(1.08)}[data-arrows=native] .carousel>ul::scroll-button(*):active{transform:scale(.96)}[data-arrows=native] .carousel>ul::scroll-button(*):focus-visible{outline:3px solid #438ee4;outline-offset:3px}[data-arrows=native] .carousel>ul::scroll-button(*):disabled{opacity:0;scale:.72}[data-arrows=native] .carousel>ul::scroll-button(left){content:"";left:.75rem;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-opacity='.72' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5m6-6-6 6 6 6'/%3E%3C/svg%3E")}[data-arrows=native] .carousel>ul::scroll-button(right){content:"";right:.75rem;--arrow-direction: reverse;--arrow-range: calc(100% - var(--arrow-fade)) 100%;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-opacity='.72' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14m-6-6 6 6-6 6'/%3E%3C/svg%3E")}}@supports (animation-timeline: --carousel) and (timeline-scope: --carousel){.carousel__arrow{animation:reveal-arrow linear var(--arrow-direction) both;animation-timeline:--carousel;animation-range:var(--arrow-range)}@supports selector(ul::scroll-button(*)){[data-arrows=native] .carousel>ul::scroll-button(*){animation:reveal-arrow linear var(--arrow-direction) both;animation-timeline:--carousel;animation-range:var(--arrow-range)}}@keyframes reveal-arrow{0%{opacity:0;scale:.72}to{opacity:1;scale:1}}}}@media(prefers-reduced-motion:reduce){.carousel>ul{scroll-behavior:auto}.carousel__arrow,.carousel__arrows,.carousel__fallback button{animation:none;transition:none}@supports selector(li::scroll-marker){.carousel li::scroll-marker{animation:none;transition:none}.carousel li::scroll-marker:target-current{flex:4;opacity:1;filter:saturate(1)}}@supports selector(ul::scroll-button(*)){.carousel>ul::scroll-button(*){animation:none}}}