@property --dialog-opacity{syntax: "<number>"; inherits: true; initial-value: 0;}@property --dialog-blur{syntax: "<length>"; inherits: true; initial-value: 0px;}@property --dialog-scale-y{syntax: "<number>"; inherits: true; initial-value: 1;}@property --dialog-translate-y{syntax: "<percentage>"; inherits: true; initial-value: 0%;}@property --backdrop-opacity{syntax: "<number>"; inherits: true; initial-value: 1;}@property --backdrop-blur{syntax: "<length>"; inherits: true; initial-value: 0px;}@property --grad-color-1{syntax: "<color>"; inherits: true; initial-value: #22223388;}@property --grad-color-1b{syntax: "<color>"; inherits: true; initial-value: #33334477;}@property --grad-centre-x-1{syntax: "<length>"; inherits: true; initial-value: 50vw;}@property --grad-centre-y-1{syntax: "<length>"; inherits: true; initial-value: 25vh;}@property --grad-size-1{syntax: "<length>"; inherits: true; initial-value: 100vmax;}@property --grad-color-2{syntax: "<color>"; inherits: true; initial-value: #33334477;}@property --grad-color-2b{syntax: "<color>"; inherits: true; initial-value: #22223388;}@property --grad-centre-x-2{syntax: "<length>"; inherits: true; initial-value: 50vw;}@property --grad-centre-y-2{syntax: "<length>"; inherits: true; initial-value: 75vh;}@property --grad-size-2{syntax: "<length>"; inherits: true; initial-value: 100vmax;}@property --bodycontent-translate-y{syntax: "<length>"; inherits: true; initial-value: 0;}@property --bodycontent-scale-x{syntax: "<number>"; inherits: true; initial-value: 1;}@property --bodycontent-scale-y{syntax: "<number>"; inherits: true; initial-value: 1;}@property --bodycontent-rotate-x{syntax: "<angle>"; inherits: true; initial-value: 0deg;}@property --bodycontent-rotate-y{syntax: "<angle>"; inherits: true; initial-value: 0deg;}@property --bodycontent-skew-x{syntax: "<angle>"; inherits: true; initial-value: 0deg;}@property --bodycontent-skew-y{syntax: "<angle>"; inherits: true; initial-value: 0deg;}:root{--foreground: #213;--background: #fff;color:var(--foreground);font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif}h1,h2,h3,h4,h5,h6,ul,ol,li{margin:0;padding:0}main,dialog{padding:1em;max-width:40em;margin-inline:auto}dialog>i{font-style:normal;font-size:5em;font-weight:700}.buttonwrap{display:flex;gap:1em;justify-content:center;flex-wrap:wrap}button{margin-top:1em;border:var(--foreground) 2px solid;border-bottom:5px double;background:none;color:var(--foreground);padding:.5em 1em;font-family:inherit;font-size:1em;font-weight:700}button:focus{outline:var(--foreground) 2px solid;outline-offset:1px}button:active{border-top:5px double;border-bottom:2px solid}label{display:flex;justify-content:center;margin-top:1em}label>input{position:absolute;left:-200vw}label>span:before{content:" ";display:inline-block;vertical-align:middle;height:1em;width:1em;margin-right:.5em;border:var(--foreground) solid 2px;border-bottom:5px double}label>input:checked+span:before{box-shadow:inset 0 0 0 .25em var(--foreground)}code{font-weight:700}a{filter:saturate(50%)}@media (orientation: landscape){dialog:open{background:#3334;-webkit-backdrop-filter:blur(1em);backdrop-filter:blur(1em);padding:1.5em 2em 2em}}.red{--grad-color-1: oklch(.2 .5 20 / .65);--grad-color-1b: oklch(.2 .5 20 / .667);--grad-color-2: oklch(.5 1 20 / .667);--grad-color-2b: oklch(.5 1 20 / .65)}.green{--grad-color-1: oklch(.5 .6 150 / .5);--grad-color-1b: oklch(.5 .5 150 / .475);--grad-color-2: oklch(.3 .5 150 / .475);--grad-color-2b: oklch(.3 .4 150 / .5)}.blurple{--grad-color-1: oklch(.3 .6 200 / .5);--grad-color-1b: oklch(.325 .6 200 / .5);--grad-color-2: oklch(.425 .4 320 / .5);--grad-color-2b: oklch(.4 .4 320 / .5)}.sunset{--grad-color-1: oklch(.8 1 0 / .5);--grad-color-1b: oklch(.9 .8 0 / .5);--grad-color-2: oklch(.825 1 100 / .5);--grad-color-2b: oklch(.8 1 100 / .5)}:root{--duration: .8s}main{will-change:transform;transform:perspective(500px) translateY(var(--bodycontent-translate-y)) scale(var(--bodycontent-scale-x),var(--bodycontent-scale-y)) rotateY(var(--bodycontent-rotate-y)) rotateX(var(--bodycontent-rotate-x)) skew(var(--bodycontent-skew-x),var(--bodycontent-skew-y));transform-origin:top center}dialog{opacity:var(--dialog-opacity);transform:scaleY(var(--dialog-scale-y)) translateY(var(--dialog-translate-y));transform-origin:center bottom;border:none;background:none;color:var(--foreground);filter:drop-shadow(0 1px 1px var(--grad-color-1));animation:default-dialog-out var(--duration) both;--foreground: #fff;--background: #213}dialog::backdrop{background-image:radial-gradient(circle 100vmax at var(--grad-centre-x-2) var(--grad-centre-y-2),var(--grad-color-2),var(--grad-color-2b),var(--grad-color-2) calc(var(--grad-size-2) / 5),transparent var(--grad-size-2)),radial-gradient(circle 100vmax at var(--grad-centre-x-1) var(--grad-centre-y-1),var(--grad-color-1),var(--grad-color-1b),var(--grad-color-1) calc(var(--grad-size-1) / 5),transparent var(--grad-size-1));-webkit-backdrop-filter:blur(var(--backdrop-blur));backdrop-filter:blur(var(--backdrop-blur))}dialog:open{--backdrop-blur: 1em;animation:default-dialog-in var(--duration) both}dialog.out{animation:default-dialog-out calc(var(--duration) / 2) both;transform-origin:center top}dialog:open~main{animation:default-main-in var(--duration) both linear}@keyframes default-dialog-in{0%{display:none;--dialog-opacity: 0;--dialog-translate-y: -100%;--dialog-scale-y: 10;--backdrop-blur: 0em;--backdrop-opacity: 1;--grad-centre-x-1: 40vw;--grad-centre-x-2: 70vw;--grad-centre-y-1: -50vh;--grad-centre-y-2: -50vh;--grad-size-1: 33vh;--grad-size-2: 33vh}5%{--backdrop-opacity: 0}25%{--grad-size-2: 55vh}50%{--grad-centre-x-2: 80vw;--grad-centre-y-2: 73vh;--grad-size-1: 55vh}75%{--grad-centre-x-1: 20vw;--grad-centre-y-1: 24vh}90%{--dialog-scale-y: 1}to{display:block;--dialog-opacity: 1;--dialog-translate-y: 0%;--dialog-scale-y: 1;--backdrop-opacity: 1;--backdrop-blur: 1em;--grad-centre-x-1: 20vw;--grad-centre-x-2: 80vw;--grad-centre-y-1: 25vh;--grad-centre-y-2: 75vh;--grad-size-1: 100vh;--grad-size-2: 100vh}}@keyframes default-dialog-out{0%{display:block;--dialog-opacity: 1;--dialog-translate-y: 0%;--dialog-scale-y: 1;--backdrop-opacity: 1;--backdrop-blur: 1em;--grad-centre-x-1: 20vw;--grad-centre-x-2: 80vw;--grad-centre-y-1: 25vh;--grad-centre-y-2: 75vh;--grad-size-1: 100vh;--grad-size-2: 100vh}50%{--backdrop-blur: 0em;--grad-size-1: 25vh}90%{--backdrop-opacity: 1}to{--dialog-translate-y: 100%;--dialog-scale-y: 5;--backdrop-opacity: 0;--backdrop-blur: 0em;--grad-centre-x-1: 50vw;--grad-centre-x-2: 50vw;--grad-centre-y-1: 125vh;--grad-centre-y-2: 150vh;--grad-size-1: 25vh;--grad-size-2: 25vh}}@keyframes default-main-in{0%{--bodycontent-rotate-x: 0deg;--bodycontent-rotate-y: 0deg;--bodycontent-skew-y: 0deg;--bodycontent-scale-x: 1;--bodycontent-scale-y: 1}24%{transform-origin:top center;--bodycontent-rotate-x: 6deg;--bodycontent-rotate-y: -6deg;--bodycontent-skew-y: -3deg;--bodycontent-scale-x: .9;--bodycontent-scale-y: 1.1}30%{--bodycontent-rotate-x: 5deg;--bodycontent-rotate-y: -4deg;--bodycontent-skew-y: -1deg}36%{--bodycontent-rotate-x: 4deg;--bodycontent-rotate-y: -2deg;--bodycontent-skew-y: 1deg}42%{--bodycontent-rotate-x: 2deg}48%{transform-origin:bottom center;--bodycontent-rotate-x: 0deg;--bodycontent-rotate-y: 0deg;--bodycontent-skew-y: 0deg;--bodycontent-scale-x: 1;--bodycontent-scale-y: 1}}