@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}}*{box-sizing:border-box}:root{--perspective: 1200;--rotate-x: -15;--rotate-y: -40;--xbox-scale: 4;--xbox-width: calc(5.9 * var(--xbox-scale));--xbox-height: calc(2.5 * var(--xbox-scale));--xbox-depth: calc(10.8 * var(--xbox-scale));--plane-width: var(--xbox-width);--plane-height: var(--xbox-depth);--transition: .1s;--power: 0}body{min-height:100vh;background:#3f9274}.scene{perspective:calc(var(--perspective, 800) * 1px);transform-style:preserve-3d;height:100vh;width:100vw;display:flex;align-items:center;justify-content:center}.plane{height:calc(var(--plane-height, 25) * 1vmin);width:calc(var(--plane-width, 25) * 1vmin);transform-style:preserve-3d;transform:rotateX(calc(var(--rotate-x, -24) * 1deg)) rotateY(calc(var(--rotate-y, -24) * 1deg)) rotateX(90deg) translateZ(calc((var(--xbox-height) * -.5) * 1vmin))}.cuboid{--width: var(--cuboid-width, 15);--height: var(--cuboid-height, 10);--depth: var(--cuboid-depth, 4);height:calc(var(--depth) * 1vmin);width:calc(var(--width) * 1vmin);position:absolute;transform:translate3d(calc(var(--x, 0) * 1vmin),calc(var(--y, 0) * 1vmin),calc(var(--z, 0) * 1vmin)) rotateX(calc(var(--rotate-cuboid-x, 0) * 1deg)) rotateY(calc(var(--rotate-cuboid-y, 0) * 1deg)) rotate(calc(var(--rotate-cuboid-z, 0) * 1deg));transform-style:preserve-3d}.cuboid__side{transform-style:preserve-3d}.cuboid>div:nth-of-type(1){height:calc(var(--height) * 1vmin);width:100%;transform-origin:50% 50%;transform:rotateX(-90deg);position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) rotateX(-90deg) translateZ(calc((var(--depth) / 2) * 1vmin))}.cuboid>div:nth-of-type(2){height:calc(var(--height) * 1vmin);width:100%;transform-origin:50% 50%;transform:translate(-50%,-50%) rotateX(-90deg) rotateY(180deg) translateZ(calc((var(--depth) / 2) * 1vmin));position:absolute;top:50%;left:50%}.cuboid>div:nth-of-type(3){height:calc(var(--height) * 1vmin);width:calc(var(--depth) * 1vmin);transform:translate(-50%,-50%) rotateX(-90deg) rotateY(90deg) translateZ(calc((var(--width) / 2) * 1vmin));position:absolute;top:50%;left:50%}.cuboid>div:nth-of-type(4){height:calc(var(--height) * 1vmin);width:calc(var(--depth) * 1vmin);transform:translate(-50%,-50%) rotateX(-90deg) rotateY(-90deg) translateZ(calc((var(--width) / 2) * 1vmin));position:absolute;top:50%;left:50%}.cuboid>div:nth-of-type(5){height:calc(var(--depth) * 1vmin);width:calc(var(--width) * 1vmin);transform:translate(-50%,-50%) translateZ(calc((var(--height) / 2) * 1vmin));position:absolute;top:50%;left:50%}.cuboid>div:nth-of-type(6){height:calc(var(--depth) * 1vmin);width:calc(var(--width) * 1vmin);transform:translate(-50%,-50%) translateZ(calc((var(--height) / 2) * -1vmin)) rotateX(180deg);position:absolute;top:50%;left:50%}.xbox{--width: var(--xbox-width);--height: var(--xbox-height);--depth: var(--xbox-depth);--z: calc(var(--xbox-height) * .5)}.xbox.xbox--on .xbox__sleep{display:none}.xbox.xbox--on .xbox__mouth{animation:wake-up-mouth 5s}.xbox.xbox--on .xbox__eye{animation:wake-up 5s,eye-blink 5s 5s infinite}.xbox.xbox--on>div:nth-of-type(3) .xbox__logo{animation-name:blink;animation-iteration-count:8;animation-duration:1s;animation-fill-mode:both;animation-timing-function:steps(2,start)}@keyframes blink{to{fill:#fff}}.xbox__face{height:20%;width:20%;left:50%;top:50%;position:absolute;transform:translate3d(-50%,-50%,1px);transform-style:preserve-3d}.xbox__mouth{height:2.5vmin;width:2.5vmin;border-radius:50%;background:#000;position:absolute;bottom:0;left:50%;margin-left:-1.25vmin;clip-path:inset(50% 0 0 0);overflow:hidden;transform-origin:50% 75%;transform:translateY(25%) scale(calc(.1 + (var(--power) * .9)))}.xbox__mouth:after{content:"";position:absolute;bottom:0;right:0;height:50%;width:50%;background:red;border-radius:50%;transform:translateY(50%)}.xbox__sleep{font-weight:700;font-family:sans-serif;font-size:3rem;position:absolute;left:100%;opacity:.75;bottom:100%;color:#1f4738;transform-origin:0% 100%;transform:scale(0) translateZ(0);animation:sleep calc(var(--s, 1) * 1s) calc(var(--d, 0) * 1s) infinite both}.xbox__sleep--one{--x: 200;--y: -300;--d: .2;--s: 1}.xbox__sleep--two{--x: 150;--y: -200;--d: .4;--s: 2}.xbox__sleep--three{--x: 250;--y: -150;--d: .6;--s: 1.8}.xbox__eye{height:1.75vmin;width:1.75vmin;background:#000;position:absolute;top:0;border-radius:50%;transform:scaleY(calc(.1 + (var(--power) * .9)))}.xbox__eye--left{left:0}.xbox__eye--right{right:0}.xbox__eye:after{content:"";position:absolute;top:25%;left:25%;height:20%;width:20%;background:#fff;border-radius:50%}@keyframes eye-blink{0%,49%,51%,to{transform:scaleY(1)}50%{transform:scaleY(.1)}}.xbox>div:nth-of-type(1),.xbox>div:nth-of-type(2){background:#ccc}.xbox>div:nth-of-type(1):after,.xbox>div:nth-of-type(2):after{content:"";position:absolute;background:repeating-radial-gradient(#999 0 50%,transparent 50% 100%) 0 0/6px 6px,#ccc;width:90%;height:90%;left:5%;top:5%}.xbox>div:nth-of-type(3){background:#d9d9d9}.xbox>div:nth-of-type(3):after{content:"";background:#1a1a1a;height:10%;width:5%;position:absolute;bottom:15%;left:4%}.xbox>div:nth-of-type(3):before{content:"";background:#1a1a1a;height:.5vmin;width:.5vmin;border-radius:50%;bottom:15%;left:11%;position:absolute}.xbox>div:nth-of-type(4){background:#f2f2f2}.xbox>div:nth-of-type(4):after{content:"";height:15%;bottom:15%;right:5%;position:absolute;background:repeating-linear-gradient(90deg,#808080 0 90%,transparent 90% 100%) 0 0/20% 100%,transparent;width:55%}.xbox>div:nth-of-type(4):before{content:"";height:20%;bottom:35%;right:7%;position:absolute;width:15%;background:repeating-radial-gradient(#808080 0 50%,transparent 50% 100%) 0 0/.5vmin .5vmin,transparent}.xbox>div:nth-of-type(5){background:#e6e6e6}.xbox>div:nth-of-type(5):after{content:"";background:repeating-radial-gradient(#000 0 50%,transparent 50% 100%) 0 0/.75vmin .75vmin,#262626;position:absolute;border-radius:50%;left:50%;top:calc(var(--xbox-width) * .1vmin);transform:translate(-50%);width:calc(var(--xbox-width) * .9vmin);height:calc(var(--xbox-width) * .9vmin)}.xbox>div:nth-of-type(6){background:#bfbfbf}.xbox>div:nth-of-type(6):after{content:"";position:absolute;background:repeating-radial-gradient(#595959 0 50%,transparent 50% 100%) 0 0/.5vmin .5vmin,#bfbfbf;width:90%;height:15%;left:5%;top:5%}.xbox>div:nth-of-type(5) .xbox__logo{position:absolute;bottom:5%;left:5%;height:4%;transform:rotate(-90deg);fill:#8c8c8c}.xbox__label{font-family:sans-serif;bottom:9%;left:8.5%;font-size:.5rem;position:absolute;transform-origin:0 50%;transform:rotate(-90deg);color:#8c8c8c}.xbox>div:nth-of-type(3) .xbox__logo{height:100%;position:absolute;right:5%;top:10%;height:20%}.xbox__shadow{height:100%;width:100%;background:radial-gradient(circle at 50% 50%,rgba(0,0,0,.5),transparent);filter:blur(5px);position:absolute;transition:transform var(--transition),background var(--transition),filter var(--transition)}.xbox__plane{height:100%;width:100%;transform-style:preserve-3d;transform:translateZ(.5vmin);transform-origin:50% 100%;transition:transform var(--transition)}.xbox__power{height:100%;width:100%;position:absolute;z-index:2;border:0;cursor:pointer;opacity:0}.xbox__leg{--width: 1;--depth: .5;--height: .25;transform:translateZ(calc(var(--height) * .5vmin))}.xbox__leg:nth-of-type(1){top:5%;left:5%}.xbox__leg:nth-of-type(2){top:5%;right:5%}.xbox__leg:nth-of-type(3){bottom:5%;left:5%}.xbox__leg:nth-of-type(4){bottom:5%;right:5%}.xbox__leg>div:nth-of-type(1){background:#ccc}.xbox__leg>div:nth-of-type(2){background:#d4d4d4}.xbox__leg>div:nth-of-type(3){background:#e0e0e0}.xbox__leg>div:nth-of-type(4){background:#d9d9d9}.xbox__leg>div:nth-of-type(5){background:#d9d9d9}.xbox__leg>div:nth-of-type(6){background:#bfbfbf}label{position:absolute;height:100%;width:100%;transform:translateZ(1px);cursor:pointer;opacity:0}.tilter--vertical{display:none}[type=checkbox]{height:0;width:0;opacity:0;position:fixed;left:100%}:checked~.scene .xbox__plane{transform:rotateX(-90deg)}:checked~.scene .tilter--vertical{display:block}:checked~.scene .xbox__shadow{transform-origin:50% 100%;transform:scaleY(1.5);background:radial-gradient(circle at 50% 100%,rgba(0,0,0,.5),transparent 75%);filter:blur(15px)}:checked~.scene .xbox__mouth{--start-scale: .45;--scale: .45;clip-path:inset(0 0 0 0);transform:translateY(25%) scale(.45)}:checked~.scene .xbox__mouth:after{opacity:0}@keyframes wake-up{0%,57%,75%,77%,83%{transform:scaleY(.1)}50%,56%,58%,74%,76%,78%,82%,84%{transform:scaleY(1)}}@keyframes wake-up-mouth{0%{transform:translateY(25%) scale(var(--start-scale, .1))}50%,to{transform:translateY(25%) scale(var(--scale, 1))}}@keyframes sleep{to{transform:scale(1) translate3d(calc(var(--x, 100) * 1%),calc(var(--y, -250) * 1%),0)}}