.svelte-imm2o9,.svelte-imm2o9:before,.svelte-imm2o9:after{box-sizing:border-box}.svelte-imm2o9{margin:0}svg.svelte-imm2o9{display:block;max-width:100%}input.svelte-imm2o9,button.svelte-imm2o9{font:inherit}p.svelte-imm2o9,h2.svelte-imm2o9,h3.svelte-imm2o9{overflow-wrap:break-word}p.svelte-imm2o9{text-wrap:pretty}h2.svelte-imm2o9,h3.svelte-imm2o9{text-wrap:balance}:root{--clr-white: white;--lime: lime;--_sudo-private-property-example: red;--pastel-cream: #F0EBD5;--pastel-yellow: #FCF3A4;--pastel-orange: #FFD79F;--pastel-pink: #FFC9C9;--pastel-rose: #FFA3B6;--pastel-purple: #8f172e;--pastel-blue: #CCDFFD;--pastel-aqua: #B8DFE6;--pastel-mint: #D1E2CF;--pastel-lime: #D6F1BB;--link-color: var(--text);--link-bg: rgba(184, 223, 230, 1);--link-bg-hover: rgba(184, 223, 230, .6);--black: #222;--black50: #22222250;--black80: #222222a6;--grid-color: #FF060020;--background-color: #FFF;--text: #222;--textLight: rgba(34, 34, 34, .2);--table-bg: #ffffff;--table-row-bg: #f1f1f1;--code-background: #f5f5f5;--code-border-color: #e1e1e1;--grey-text: #ccc;--orange: #756144;--post-width: 40.125rem;--post-l-width: 64rem;--step--2: clamp(.7813rem, .7747rem + .0326vi, .8rem);--step--1: clamp(.9375rem, .9158rem + .1087vi, 1rem);--step-0: clamp(1.125rem, 1.0815rem + .2174vi, 1.25rem);--step-1: clamp(1.35rem, 1.2761rem + .3696vi, 1.5625rem);--step-2: clamp(1.62rem, 1.5041rem + .5793vi, 1.9531rem);--step-3: clamp(1.944rem, 1.771rem + .8651vi, 2.4414rem);--step-4: clamp(2.3328rem, 2.0827rem + 1.2504vi, 3.0518rem);--step-5: clamp(2.7994rem, 2.4462rem + 1.7658vi, 3.8147rem);--ff-family: Blanco,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;--ff-code: Consolas, Menlo, Monaco, "Andale Mono", "Ubuntu Mono", monospace}h2.svelte-imm2o9{font-size:var(--step-3);margin-top:2rem}input[type=range].svelte-imm2o9{cursor:pointer}:is(.example5.svelte-imm2o9,.example6.svelte-imm2o9,.flex.svelte-imm2o9){margin:1rem 0}input[type=range][orient=horizontal].svelte-imm2o9{-webkit-appearance:slider-horizontal;-moz-appearance:slider-horizontal;appearance:slider-horizontal;width:175px;height:8px}input[type=range][orient=vertical].svelte-imm2o9{-webkit-appearance:slider-vertical;-moz-appearance:slider-vertical;appearance:slider-vertical;width:8px;height:175px}.active.svelte-imm2o9{color:var(--pastel-purple)}code.svelte-imm2o9 span:where(.svelte-imm2o9){font-size:.8rem}figure.svelte-imm2o9{position:relative;width:100%;margin:0;border:1px solid var(--pastel-blue);color:var(--text-light);height:250px}.fullWidth.svelte-imm2o9{margin:1rem 0}.fullWidth.svelte-imm2o9>:where(.svelte-imm2o9){width:100%}.toggle.svelte-imm2o9{height:40px;display:flex;align-items:center}.toggle.svelte-imm2o9 input[type=checkbox]:where(.svelte-imm2o9){display:none}.toggle.svelte-imm2o9 label:where(.svelte-imm2o9){position:relative;margin-left:80px;cursor:pointer}.toggle.svelte-imm2o9 input[type=checkbox]:where(.svelte-imm2o9)+label:where(.svelte-imm2o9):before{content:" ";display:block;height:18px;width:45px;border:1px solid var(--pastel-blue);border-radius:9px;position:absolute;top:4px;left:-65px;background:var(--pastel-blue)}.toggle.svelte-imm2o9 input[type=checkbox]:where(.svelte-imm2o9)+label:where(.svelte-imm2o9):after{content:" ";display:block;height:30px;width:30px;border:1px solid var(--pastel-purple);border-radius:50%;position:absolute;top:-2px;left:-75px;background:var(--pastel-purple);transition:all .3s ease-in}.toggle.svelte-imm2o9 input[type=checkbox]:where(.svelte-imm2o9):checked+label:where(.svelte-imm2o9):after{left:-40px;transition:all .3s ease-in}.example1.svelte-imm2o9{margin-top:3rem}.example1.svelte-imm2o9 figure:where(.svelte-imm2o9){border:1px solid var(--code-border-color);background-color:var(--background-color);background-image:linear-gradient(to right,rgba(203,213,225,.5) 1px,transparent 1px),linear-gradient(to bottom,rgba(203,213,225,.5) 1px,transparent 1px);background-size:48px 48px;background-position:-1px -1px}.example1.svelte-imm2o9 input:where(.svelte-imm2o9){margin:0}.example1.svelte-imm2o9 label:where(.svelte-imm2o9){display:flex;justify-content:center;align-items:center;gap:8px;margin:0;flex-wrap:wrap}.example1.svelte-imm2o9 label:where(.svelte-imm2o9) span:where(.svelte-imm2o9){display:block}.example1.svelte-imm2o9 .horizontal:where(.svelte-imm2o9) .value:where(.svelte-imm2o9){width:60px;text-align:right;color:var(--pastel-purple)}.example1.svelte-imm2o9 .vertical:where(.svelte-imm2o9){display:flex}.example1.svelte-imm2o9 .vertical:where(.svelte-imm2o9) .value:where(.svelte-imm2o9){color:var(--pastel-purple);position:absolute;bottom:0;height:24px}.example1.svelte-imm2o9 .vertical:where(.svelte-imm2o9) label:where(.svelte-imm2o9){transform:rotate(180deg);writing-mode:vertical-lr;margin-bottom:-30px}.example1.svelte-imm2o9 .vertical:where(.svelte-imm2o9) input:where(.svelte-imm2o9){height:140px}.example1.svelte-imm2o9 #circleEx1:where(.svelte-imm2o9){position:absolute;top:0;left:0;border:2px solid var(--pastel-purple);background:var(--pastel-blue);width:48px;height:48px;border-radius:50%;transition:transform .3s}.ex2Wrap.svelte-imm2o9{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap}.ex2Wrap.svelte-imm2o9 label:where(.svelte-imm2o9){display:flex;align-items:center;position:relative;margin:1rem 0}.ex2Wrap.svelte-imm2o9 label:where(.svelte-imm2o9) input:where(.svelte-imm2o9){margin:0}.example2.svelte-imm2o9 figure:where(.svelte-imm2o9){display:flex;justify-content:center;align-items:center;background-color:var(--background-color);background-image:linear-gradient(to right,rgba(203,213,225,.5) 1px,transparent 1px),linear-gradient(to bottom,rgba(203,213,225,.5) 1px,transparent 1px);background-size:50% 50%;background-position:-1px -1px}.example2.svelte-imm2o9 div.movable:where(.svelte-imm2o9){border:1px solid var(--pastel-blue);transform:translate(0);padding:1rem;background:#0003}.example2.svelte-imm2o9 div.shadow:where(.svelte-imm2o9){border:1px dotted var(--pastel-blue);position:absolute;padding:1rem;opacity:.5}.example3.svelte-imm2o9 figure:where(.svelte-imm2o9){display:flex;justify-content:center;align-items:center;margin-top:2rem}.example3.svelte-imm2o9 .flex:where(.svelte-imm2o9){--min: 30ch;--gap: 1rem;display:grid;grid-gap:var(--gap);grid-template-columns:repeat(auto-fit,minmax(min(100%,var(--min)),1fr));margin-top:3rem}.example3.svelte-imm2o9 .transformable:where(.svelte-imm2o9){position:relative;height:100px;width:100px;border:1px solid var(--pastel-blue);background-image:linear-gradient(to right,rgba(203,213,225,.5) 1px,transparent 1px),linear-gradient(to bottom,rgba(203,213,225,.5) 1px,transparent 1px);background-size:10px 10px;background-position:-1px -1px}.example3.svelte-imm2o9 .transformable:where(.svelte-imm2o9):before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(0deg,#d81b6066,#4989ed66)}.example4.svelte-imm2o9 figure:where(.svelte-imm2o9){display:flex;justify-content:center;align-items:center;gap:.5rem;margin-top:2rem}.example4.svelte-imm2o9 .panel:where(.svelte-imm2o9){position:relative;height:200px;width:200px}.example4.svelte-imm2o9 .panel:where(.svelte-imm2o9) .face:where(.svelte-imm2o9){position:absolute;display:flex;flex-direction:column;justify-content:center;align-items:center;top:0;right:0;bottom:0;left:0;color:var(--accent-bg);border:1px solid gold;backface-visibility:hidden;transition:transform 1s}.example4.svelte-imm2o9 .panel:where(.svelte-imm2o9) .front:where(.svelte-imm2o9){transform:perspective(400px) rotateY(0);background:var(--pastel-blue)}.example4.svelte-imm2o9 .panel:where(.svelte-imm2o9) .back:where(.svelte-imm2o9){transform:perspective(400px) rotateY(179.9deg);background:var(--pastel-purple)}.example4.svelte-imm2o9 .panel:where(.svelte-imm2o9) .back:where(.svelte-imm2o9) h3:where(.svelte-imm2o9){margin:1rem 0;font-size:1.4rem;font-weight:700}.example4.svelte-imm2o9 .panel:where(.svelte-imm2o9) .back:where(.svelte-imm2o9) p:where(.svelte-imm2o9){margin:0;padding:0 8px;text-align:left;width:100%;font-size:.8rem}.example4.svelte-imm2o9 .panel:where(.svelte-imm2o9):hover .front:where(.svelte-imm2o9),.example4.svelte-imm2o9 .panel:where(.svelte-imm2o9):focus .front:where(.svelte-imm2o9){transform:rotateY(-179.9deg)}.example4.svelte-imm2o9 .panel:where(.svelte-imm2o9):hover .back:where(.svelte-imm2o9),.example4.svelte-imm2o9 .panel:where(.svelte-imm2o9):focus .back:where(.svelte-imm2o9){transform:rotateY(0)}.example5.svelte-imm2o9 figure:where(.svelte-imm2o9){display:flex;justify-content:center;align-items:center}.example5.svelte-imm2o9 .transformable:where(.svelte-imm2o9){width:100px;height:100px;border:1px solid purple;transform-style:preserve-3d;transition:transform .2s linear;background:var(--pastel-purple)}.example6.svelte-imm2o9 figure:where(.svelte-imm2o9){display:flex;justify-content:center;align-items:center;perspective:500px}.example6.svelte-imm2o9 .cube:where(.svelte-imm2o9){position:relative;width:100px;height:100px;transform-style:preserve-3d;transition:transform .2s linear}.example6.svelte-imm2o9 .face:where(.svelte-imm2o9){display:flex;justify-content:center;align-items:center;position:absolute;width:100px;height:100px;background-image:repeating-linear-gradient(0deg,rgba(70,70,70,.2) 0px,rgba(70,70,70,.2) 1px,transparent 1px,transparent 21px),repeating-linear-gradient(90deg,rgba(70,70,70,.2) 0px,rgba(70,70,70,.2) 1px,transparent 1px,transparent 21px),linear-gradient(90deg,#fff,#fff);font-size:3rem;color:var(--pastel-purple);border:1px solid purple}.example6.svelte-imm2o9 .top:where(.svelte-imm2o9){transform:rotateX(90deg) translateZ(50px)}.example6.svelte-imm2o9 .bottom:where(.svelte-imm2o9){transform:rotateX(-90deg) translateZ(50px)}.example6.svelte-imm2o9 .right:where(.svelte-imm2o9){transform:rotateY(90deg) translateZ(50px)}.example6.svelte-imm2o9 .left:where(.svelte-imm2o9){transform:rotateY(-90deg) translateZ(50px)}.example6.svelte-imm2o9 .front:where(.svelte-imm2o9){transform:rotateX(0) translateZ(50px)}.example6.svelte-imm2o9 .back:where(.svelte-imm2o9){transform:rotateX(-180deg) translateZ(50px)}.demo.svelte-imm2o9 p:where(.svelte-imm2o9){margin-top:2rem}.demo.svelte-imm2o9 .panel1:where(.svelte-imm2o9){display:flex;justify-content:center;align-items:center;transform:perspective(500px) translateZ(-50px) rotateX(35deg);height:200px;width:200px;margin:1rem auto 0;background:#fff;border-radius:1rem;border:2px solid var(--pastel-blue);box-shadow:0 30px 20px -10px var(--shadow);transition:transform 1s}.demo.svelte-imm2o9 .panel1:where(.svelte-imm2o9):hover,.demo.svelte-imm2o9 .panel1:where(.svelte-imm2o9):focus{transform:translateZ(0)}.demo.svelte-imm2o9 .panel2:where(.svelte-imm2o9){position:relative;display:flex;align-items:center;height:300px;max-width:400px;margin:1rem auto 0;border-radius:1rem;border:2px solid var(--pastel-purple);perspective:500px;background-color:silver;color:#000;background-image:radial-gradient(circle at 100% 150%,silver 24%,white 24%,white 28%,silver 28%,silver 36%,white 36%,white 40%,transparent 40%,transparent),radial-gradient(circle at 0 150%,silver 24%,white 24%,white 28%,silver 28%,silver 36%,white 36%,white 40%,transparent 40%,transparent),radial-gradient(circle at 50% 100%,white 10%,silver 10%,silver 23%,white 23%,white 30%,silver 30%,silver 43%,white 43%,white 50%,silver 50%,silver 63%,white 63%,white 71%,transparent 71%,transparent),radial-gradient(circle at 100% 50%,white 5%,silver 5%,silver 15%,white 15%,white 20%,silver 20%,silver 29%,white 29%,white 34%,silver 34%,silver 44%,white 44%,white 49%,transparent 49%,transparent),radial-gradient(circle at 0 50%,white 5%,silver 5%,silver 15%,white 15%,white 20%,silver 20%,silver 29%,white 29%,white 34%,silver 34%,silver 44%,white 44%,white 49%,transparent 49%,transparent);background-size:100px 50px;background-position:50%}.demo.svelte-imm2o9 .panel2:where(.svelte-imm2o9) span:where(.svelte-imm2o9){position:relative;display:block;margin:0;width:100px;color:purple;transform:translate(clamp(25%,4vw,50%)) rotate(45deg);line-height:2rem;text-align:center;font-weight:700;font-size:clamp(1rem,4vw,2rem);z-index:-1}.demo.svelte-imm2o9 .panel2:where(.svelte-imm2o9):before{position:absolute;content:"";width:50%;left:50%;height:100%;transform-origin:top left;transform:rotateY(-180deg);transition:transform 1s;border-radius:0 1rem 1rem 0;background-color:silver;background-image:radial-gradient(circle at 100% 150%,silver 24%,white 24%,white 28%,silver 28%,silver 36%,white 36%,white 40%,transparent 40%,transparent),radial-gradient(circle at 0 150%,silver 24%,white 24%,white 28%,silver 28%,silver 36%,white 36%,white 40%,transparent 40%,transparent),radial-gradient(circle at 50% 100%,white 10%,silver 10%,silver 23%,white 23%,white 30%,silver 30%,silver 43%,white 43%,white 50%,silver 50%,silver 63%,white 63%,white 71%,transparent 71%,transparent),radial-gradient(circle at 100% 50%,white 5%,silver 5%,silver 15%,white 15%,white 20%,silver 20%,silver 29%,white 29%,white 34%,silver 34%,silver 44%,white 44%,white 49%,transparent 49%,transparent),radial-gradient(circle at 0 50%,white 5%,silver 5%,silver 15%,white 15%,white 20%,silver 20%,silver 29%,white 29%,white 34%,silver 34%,silver 44%,white 44%,white 49%,transparent 49%,transparent);background-size:100px 50px;background-position:50%;outline:1px solid var(--pastel-purple)}.demo.svelte-imm2o9 .panel2:where(.svelte-imm2o9):hover:before,.demo.svelte-imm2o9 .panel2:where(.svelte-imm2o9):focus:before{transform:rotateY(0)}.demo.svelte-imm2o9 .demo3:where(.svelte-imm2o9){display:block;margin:0 auto;padding:2ch 4ch;border:1px solid grey;color:#282828;transition:box-shadow .3s;border-radius:2rem;background-image:linear-gradient(to top,#d3d3d5,#fff 80%,#f8f6f6);box-shadow:0 4px 3px 1px #fcfcfc,0 6px 8px #d6d7d9,0 -4px 4px #cecfd1,0 -6px 4px #fefefe,inset 0 0 3px #cecfd1;font-size:.8rem;cursor:pointer}.demo.svelte-imm2o9 .demo3:where(.svelte-imm2o9):hover{background-image:linear-gradient(to top,#d3d3d5,#fff 80%,#f8f6f6);box-shadow:0 4px 3px 1px #fcfcfc,0 6px 8px #d6d7d9,0 -4px 4px #cecfd1,0 -6px 4px #fefefe,inset 0 0 3px 3px #cecfd1;filter:none}.demo.svelte-imm2o9 .demo3:where(.svelte-imm2o9):active{box-shadow:0 4px 3px 1px #fcfcfc,0 6px 8px #d6d7d9,0 -4px 4px #cecfd1,0 -6px 4px #fefefe,inset 0 0 4px 3px #999,inset 0 0 20px #bbb}.panel3.svelte-imm2o9 div:where(.svelte-imm2o9){margin:1rem auto 0}