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}:root{--step: .25s;--dark-mode: 0;--surface: hsl( 210 calc((17 - var(--dark-mode) * 6) * 1%) calc((98 - var(--dark-mode) * 83) * 1%) );--color: hsl( 210 calc((9 + var(--dark-mode) * 5) * 1%) calc((31 + var(--dark-mode) * 52) *1%) );--hover: hsl( 210 calc((16 - var(--dark-mode) * 6) * 1%) calc((93 - var(--dark-mode) * 60) * 1%) );--text-1: #212529;--text-2: #343a40;--visual-depth: 0vmin;--zoom-speed: .5;--rotate-speed: .5;--rotation: 0deg;--perspective: 100vmin;--fade-transition: --content calc(var(--zoom-speed) * 1s) calc(var(--zoom-speed) * 3s), --content-appear calc(var(--zoom-speed) * 1s);--content-transition: transform calc(var(--zoom-speed) * 1s), clip-path 0s;--fake-transition: transform calc(var(--zoom-speed) * 1s) calc((var(--zoom-speed) + (2 * var(--rotate-speed))) * 1s)}@property --content{inherits: true; syntax: "<number>"; initial-value: 1;}@property --content-appear{inherits: true; syntax: "<number>"; initial-value: 0;}*{box-sizing:border-box;transform-style:preserve-3d}body{background:#bfbfbf;min-height:100vh;perspective:var(--perspective);font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;overflow-x:hidden;display:grid;place-items:center;transition:color calc(var(--zoom-speed) * 1s) calc(var(--zoom-speed) * 1s)}:where(body,h1,p){transition:color calc(var(--zoom-speed) * 1s) calc(var(--zoom-speed) * 1s)}h1{margin:0;line-height:1.1}h1 span{display:block;text-align:left}h1 span:first-of-type{font-size:max(1rem,min(4vw,1.5rem));font-weight:600}h1 span:last-of-type{font-size:max(2rem,min(9vw,3.5rem));font-weight:900}main{display:grid;place-items:center;margin:0 auto;opacity:calc(var(--content-appear) + var(--content));transition:var(--fade-transition)}:where(main){max-inline-size:60ch}:where(p){line-height:1}:where(svg,p,h1){color:var(--text-1)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}button{--size: 48px ;--distance: calc(1 - var(--dark-mode, 0));--position: calc((40 + (var(--dark-mode, 0) * 70)) * 1%);--ray-position: calc(var(--dark-mode, 0) * 150%) 0;--step: .25s;--bg: var(--surface);position:fixed;z-index:2;top:1rem;right:1rem;display:grid;place-items:center;background:var(--bg);width:var(--size);aspect-ratio:1;padding:2px;border-radius:calc(var(--size) * .2);border:1px solid hsl(0 0% 50%);overflow:hidden;transition:transform var(--step) cubic-bezier(.5,1.75,.75,1.25),box-shadow var(--step) cubic-bezier(.5,1.75,.75,1.25),background var(--step);transform:translateY(var(--elevate, 0)) scale(var(--scale, 1))}button:focus-visible{outline-color:gray;transition:transform var(--step) cubic-bezier(.5,1.75,.75,1.25),box-shadow var(--step) cubic-bezier(.5,1.75,.75,1.25),background var(--step)}button:hover{background:var(--hover)}button:active{--shadow: 0;--elevate: 5%;--scale: .9;--shadow-x: 0;--shadow-y: 0}[aria-pressed=true],[aria-pressed=true]:is(:hover,:active){--shadow: 0;--elevate: 5%;--scale: .9;--shadow-x: 0;--shadow-y: 0}button span{display:inline-block}.sun-and-moon{height:100%;width:100%;display:grid;place-items:center;position:relative}.body{height:40%;aspect-ratio:1;background:var(--color);border-radius:50%;mask:radial-gradient(circle at right center,transparent 25%,#000 25.5%) var(--position, 40% 50%) / 200% 200% no-repeat;-webkit-mask:radial-gradient(circle at right center,transparent 25%,#000 25.5%) var(--position, 40% 50%) / 200% 200% no-repeat;transition:all var(--step);transform:rotate(-45deg) scale(calc(1.5 - (var(--distance, 1) * .5)))}.star{width:10%;aspect-ratio:1;background:var(--color);border-radius:50%;position:absolute;top:20%;left:55%;transition:transform var(--step) cubic-bezier(.5,1.75,.75,1.25);transform:translate(-50%,-50%) translate(calc(var(--index) * 250%),calc(var(--index) * 220%)) scale(calc((1 + (var(--index) * 1)) * (1 - var(--distance, 1))))}.rays{position:absolute;inset:0;transition:all var(--step);transform:rotate(-45deg);-webkit-mask:linear-gradient(90deg,#000 50%,transparent 75%) var(--ray-position, 0 0) / 200% 200% no-repeat;mask:linear-gradient(90deg,#000 50%,transparent 75%) var(--ray-position, 0 0) / 200% 200% no-repeat}.ray{width:10%;aspect-ratio:1;background:var(--color);border-radius:50%;position:absolute;top:50%;left:50%;transition:transform var(--step) calc((var(--step) * .5) + ((var(--entry) * var(--step)) * .25)) cubic-bezier(.5,1.75,.75,1.25);transform:translate(-50%,-50%) rotate(calc((360 / 8) * var(--index) * 1deg)) translate(calc(var(--distance, 1) * 350%))}[aria-pressed=true] .ray{transition:transform 0s var(--step)}[aria-pressed=true] .star{transition:transform var(--step) calc(var(--step) + (var(--index) * var(--step))) cubic-bezier(.5,1.75,.75,1.25)}header{display:grid;gap:.25rem;grid-auto-flow:column;margin-bottom:5rem;width:100%}p+p{margin-top:1.25rem}.deep-fake{transform:translateZ(calc(var(--visual-depth) * -1));transition:var(--fake-transition)}.content-wrapper{transform:translateZ(calc(var(--visual-depth) * 1));transition:var(--content-transition);width:100vw;height:100vh;position:relative}.content-wrapper:not(.fixed){overflow:auto;clip-path:inset(-100% -100% -100% -100%);display:grid;place-items:center}[type=checkbox]{position:fixed;top:1rem;right:1rem;z-index:20}.visual-swing{position:fixed;inset:0;transition:var(--fake-transition);transform:translateZ(calc(var(--visual-depth) * -1))}.dark-side{height:100%;width:100%;color:red;position:fixed;inset:0;--depth: 100vw;transform:translateZ(calc((var(--visual-depth) * 1) - (var(--depth) * .5)));transition:var(--content-transition)}.cuboid__side:nth-of-type(4){--brightness: 1;background:#933;filter:none}.brand-logo{position:absolute;width:20%;height:auto;bottom:5%;left:5%}[data-has-a-dark-side=true] .toggle path:nth-of-type(1){display:block}[data-has-a-dark-side=true] .toggle path:nth-of-type(2){display:none}[data-has-a-dark-side=true]{--text-1: #f1f3f5;--text-2: #f1f3f5;--visual-depth: -300vmin;--content: 0;--content-appear: 1;--content-transition: transform calc(var(--zoom-speed) * 1s) calc((var(--zoom-speed) + (2 * var(--rotate-speed))) * 1s), clip-path 0s calc((var(--zoom-speed) + (2 * var(--rotate-speed))) * 1s);--fake-transition: transform calc(var(--zoom-speed) * 1s);--rotation: 90deg;--fade-transition: --content calc(var(--zoom-speed) * 1s), --content-appear calc(var(--zoom-speed) * 1s) calc(var(--zoom-speed) * 3s)}[data-has-a-dark-side=true] .content-wrapper{transform:translateZ(calc(var(--visual-depth) * -1))}[data-has-a-dark-side=true] .content-wrapper:not(.fixed){clip-path:inset(0 0 0 0)}[data-has-a-dark-side=true] .deep-fake,[data-has-a-dark-side=true] .visual-swing{transform:translateZ(calc(var(--visual-depth) * 1))}[data-has-a-dark-side=true] .dark-side{transform:translateZ(calc((var(--visual-depth) * -1) - (var(--depth) * .5)))}@supports (selector(:has(*))){:root:has([aria-pressed=true]) .toggle path:nth-of-type(1){display:block}:root:has([aria-pressed=true]) .toggle path:nth-of-type(2){display:none}:root:has([aria-pressed=true]){--dark-mode: 1;--text-1: #f8f9fa;--text-2: #f1f3f5;--visual-depth: -300vmin;--content: 0;--content-appear: 1;--content-transition: transform calc(var(--zoom-speed) * 1s) calc((var(--zoom-speed) + (2 * var(--rotate-speed))) * 1s), clip-path 0s calc((var(--zoom-speed) + (2 * var(--rotate-speed))) * 1s);--fake-transition: transform calc(var(--zoom-speed) * 1s);--rotation: 90deg;--fade-transition: --content calc(var(--zoom-speed) * 1s), --content-appear calc(var(--zoom-speed) * 1s) calc(var(--zoom-speed) * 3s)}:root:has([aria-pressed=true]) .content-wrapper{transform:translateZ(calc(var(--visual-depth) * -1))}:root:has([aria-pressed=true]) .content-wrapper:not(.fixed){clip-path:inset(0 0 0 0)}:root:has([aria-pressed=true]) .deep-fake,:root:has([aria-pressed=true]) .visual-swing{transform:translateZ(calc(var(--visual-depth) * 1))}:root:has([aria-pressed=true]) .dark-side{transform:translateZ(calc((var(--visual-depth) * -1) - (var(--depth) * .5)))}}.cuboid-wrapper{height:100%;width:100%;transform:rotateY(var(--rotation, 0deg));transition:transform calc(var(--zoom-speed) * 1s) calc(var(--zoom-speed) * 2s)}.cuboid{height:100%;width:100%;position:relative;transform:rotateY(var(--rotation, 0deg));transition:transform calc(var(--zoom-speed) * 1s) calc(var(--zoom-speed) * 1s)}.cuboid span{color:#000;font-size:25vmin}.cuboid__side{background:currentColor;position:absolute;height:100%;width:100%;filter:brightness(var(--brightness, 1))}.cuboid__side:nth-of-type(1){--brightness: .8;top:0;height:var(--depth, 50vmin);transform:translateY(-50%) rotateX(-90deg)}.cuboid__side:nth-of-type(2){--brightness: .6;top:50%;right:0;width:var(--depth, 50vmin);transform:translate(50%,-50%) rotateY(90deg)}.cuboid__side:nth-of-type(3){--brightness: 1.3;bottom:0;height:var(--depth, 50vmin);transform:translateY(50%) rotateX(90deg)}.cuboid__side:nth-of-type(4){--brightness: .6;top:50%;width:var(--depth, 50vmin);transform:translate(-50%,-50%) rotateY(90deg)}.cuboid__side:nth-of-type(5){--brightness: .75;transform:translateZ(calc(var(--depth, 50vmin) / -2))}.cuboid__side:nth-of-type(6){--brightness: 1;transform:translateZ(calc(var(--depth, 50vmin) / 2)) rotateY(180deg)}.cuboid__side:nth-of-type(6){background-color:#f1f3f5}.cuboid__side:nth-of-type(5){background-color:#212529}