@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}}*,*:after{box-sizing:border-box;transform-style:preserve-3d;transition:--brightness .1s ease}@property --rotate-y{initial-value: 0; syntax: "<number>"; inherits: true;}@property --brightness{initial-value: 1; syntax: "<number>"; inherits: true;}:root{--perspective: 800;--rotate-x: -15;--rotate-y: -40;--house-height: 12;--scale: .75;--speed: 30;--shine: rgba(255,255,255,.5);--brick: #a34729;--pitch-top: #734026;--door: #a35629;--pitch-under: #81c6e4;--pitch-back: #2481a8;--yellow-one: #f9df6c;--yellow-two: #f7d43b;--yellow-three: #f5ca0a;--pink-one: #f2c0c2;--pink-two: #edabae;--pink-three: #e9969a;--orange-one: #faa96b;--orange-two: #f88c3a;--orange-three: #f67009;--pipe-one: #fcc;--pipe-two: #f99;--pipe-three: #f66;--blue-one: #6ebcdd;--blue-two: #45a9d3;--blue-three: #2c8fba;--green-one: #a9cd65;--green-two: #93c13e;--green-three: #769a32;--windowsill: #e6e6e6;--trim-one: #d1c294;--trim-two: #c2ad70;--trim-three: #b3994d;--step-one: #b3994d;--step-two: #8f7a3d;--step-three: #6b5c2e;--handrail-one: #f0ebdb;--handrail-two: #e8e0c9;--handrail-three: #e0d6b8;--internal-one: #082121;--internal-two: #0f3d3d;--panel-shade: rgba(0,0,0,.25)}#toggle:checked~.scene{--brightness: .4}[for=toggle]{position:fixed;top:50%;left:50%;height:100vmax;aspect-ratio:1;transform:translate3d(-50%,-50%,300vmin);z-index:10}body{min-height:100vh;overflow:hidden;animation:rotate-scene 10s infinite linear reverse}.scene{perspective:calc(var(--perspective, 800) * 1px);transform-style:preserve-3d;height:100vh;width:100vw;display:flex;align-items:center;justify-content:center;transform:translateZ(100vmin) scale(var(--scale))}.scene:after{content:"";position:absolute;inset:-200vmax;transition:background .1s ease;background:hsl(210 100% calc((95 - ((1 - var(--brightness, 1)) * 130)) * 1%));transform:translateZ(-200vmin)}.house{position:absolute;height:100%;width:100%;transform:translate(10%)}.plane{height:calc(var(--plane-height, 30) * 1vmin);width:calc(var(--plane-width, 25) * 1vmin);transform-style:preserve-3d;position:absolute;transform:rotateX(calc(var(--rotate-x, -24) * 1deg)) rotateY(calc(var(--rotate-y, -24) * 1deg)) rotateX(90deg) translateZ(-30vmin)}.balloon-plane{position:absolute;transform-style:preserve-3d;transform:rotateX(calc(var(--rotate-x, -24) * 1deg)) rotateY(calc(var(--rotate-y, -24) * 1deg)) rotateX(90deg) translateZ(-31vmin)}.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%}.house__mini-pitch{--width: 10;--height: 4;--depth: 6;--z: 19;--y: 20;--x: 9}.house__mini-pitch div{--bg: var(--orange-one);background:linear-gradient(transparent 90%,var(--panel-shade)) 0 0/100% 1vmin,var(--bg);filter:brightness(var(--brightness, 1))}.house__mini-pitch div:nth-of-type(4),.house__mini-pitch div:nth-of-type(5),.house__mini-pitch div:nth-of-type(6){display:none}.house__mini-pitch div:nth-of-type(1){--bg: var(--orange-three)}.house__mini-pitch div:nth-of-type(3):after{content:"";height:90%;width:50%;border:.25vmin solid var(--windowsill);background:linear-gradient(var(--pink-one),var(--pink-one)) 0 0/100% .25vmin no-repeat,linear-gradient(var(--pink-one),var(--pink-one)) 0 0/.25vmin 100% no-repeat,linear-gradient(var(--pink-one),var(--pink-one)) 0 48%/100% .25vmin no-repeat,linear-gradient(var(--pink-one),var(--pink-one)) 100% 0/.25vmin 100% no-repeat,linear-gradient(var(--pink-one),var(--pink-one)) 0 100%/100% .25vmin no-repeat,linear-gradient(var(--yellow-three) 0 50%,var(--yellow-three) 50%);position:absolute;bottom:40%;left:50%;transform:translate3d(-50%,0,1px)}.house__mini-pitch-top{--width: 10;--height: 4;--depth: 6;--z: 23;--y: 20;--x: 9}.house__mini-pitch-top div{filter:brightness(var(--brightness, 1));--bg: var(--orange-one);background:linear-gradient(transparent 90%,var(--panel-shade)) 0 0/100% 1vmin,var(--bg)}.house__mini-pitch-top div:nth-of-type(1),.house__mini-pitch-top div:nth-of-type(2),.house__mini-pitch-top div:nth-of-type(4),.house__mini-pitch-top div:nth-of-type(5),.house__mini-pitch-top div:nth-of-type(6){display:none}.house__mini-pitch-top div:nth-of-type(3){clip-path:polygon(0 100%,50% 0,100% 100%)}.house__side{--width: 8;--x: 5;--y: -4;--depth: 4;--height: 10;--z: 7}.house__side div{--bg: var(--pink-one);filter:brightness(var(--brightness, 1));background:linear-gradient(transparent 90%,var(--panel-shade)) 0 0/100% 1vmin,var(--bg)}.house__side div:nth-of-type(1),.house__side div:nth-of-type(5),.house__side div:nth-of-type(6){background:var(--transparent)}.house__side div:nth-of-type(3){--bg: var(--pink-three)}.house__side div:nth-of-type(2):after{content:"";position:absolute;top:10%;left:50%;width:50%;height:60%;transform:translate3d(-50%,0,1px);border:.25vmin solid var(--windowsill);background:linear-gradient(var(--pink-one),var(--pink-one)) 0 0/100% .5vmin no-repeat,linear-gradient(var(--pink-one),var(--pink-one)) 0 0/.5vmin 100% no-repeat,linear-gradient(var(--pink-one),var(--pink-one)) 0 48%/100% .5vmin no-repeat,linear-gradient(var(--pink-one),var(--pink-one)) 100% 0/.5vmin 100% no-repeat,linear-gradient(var(--pink-one),var(--pink-one)) 0 100%/100% .5vmin no-repeat,linear-gradient(var(--internal-one) 0 50%,var(--internal-two) 50%)}.house__side-pitch-body{--width: 8;--x: 5;--y: -4;--depth: 10;--height: 8;--z: 17}.house__side-pitch-body div{background:var(--pink-one);filter:brightness(calc(var(--brightness, 1) * var(--b)))}.house__side-pitch-body div:nth-of-type(3){--b: .5}.house__side-pitch-body div:nth-of-type(2){--b: .95}.house__side-pitch-body div:nth-of-type(1),.house__side-pitch-body div:nth-of-type(5),.house__side-pitch-body div:nth-of-type(6),.house__side-pitch-body div:nth-of-type(1):after,.house__side-pitch-body div:nth-of-type(5):after,.house__side-pitch-body div:nth-of-type(6):after{display:none}.house__side-pitch-body div:after{filter:brightness(var(--brightness, 1));content:"";background:url(https://assets.codepen.io/605876/house-roof-tile--pink.png);position:absolute;height:100%;width:100%;left:0;top:0}.house__side-pitch-pitch{--width: 8;--x: 5;--y: -4;--depth: 10;--height: 10;--z: 25}.house__side-pitch-pitch div{filter:brightness(var(--brightness, 1))}.house__side-pitch-pitch div:nth-of-type(2){clip-path:polygon(0 100%,50% 0,100% 100%);background:var(--pink-one);filter:brightness(calc(var(--brightness, 1) * .95))}.house__side-pitch-pitch div:nth-of-type(2):before{content:"";background:url(https://assets.codepen.io/605876/house-roof-tile--pink.png);position:absolute;height:100%;width:100%;left:0;top:0}.house__side-pitch-pitch div:nth-of-type(1),.house__side-pitch-pitch div:nth-of-type(3),.house__side-pitch-pitch div:nth-of-type(4),.house__side-pitch-pitch div:nth-of-type(5),.house__side-pitch-pitch div:nth-of-type(6){background:transparent}.house__side-trim{--width: 10;--x: 4;--depth: 5;--y: -5;--height: 1.5;--z: 12.25}.house__side-trim div{background:var(--trim-one);filter:brightness(var(--brightness, 1))}.house__side-trim div:nth-of-type(2){background:var(--trim-two)}.house__side-trim div:nth-of-type(3){background:var(--trim-three)}.house__main{--width: 14;--depth: 29;--y: 1;--height: var(--house-height);--z: calc((var(--house-height) / 2) + 2)}.house__main div{--bg: var(--yellow-one);background:linear-gradient(transparent 90%,var(--panel-shade)) 0 0/100% 1vmin,var(--bg);filter:brightness(var(--brightness, 1))}.house__main div:nth-of-type(1):after{content:"";position:absolute;height:38%;width:20%;top:22%;left:10%;transform:translateZ(1px);border:.25vmin solid var(--windowsill);background:linear-gradient(var(--internal-one),var(--internal-two)) .25vmin 83%/72% 36% no-repeat,linear-gradient(var(--internal-one),var(--internal-two)) .25vmin .25vmin/72% 40% no-repeat,var(--pink-one)}.house__main div:nth-of-type(2){display:none}.house__main div:nth-of-type(3){--bg: var(--orange-three)}.house__main div:nth-of-type(3):after{content:"";position:absolute;bottom:0;height:70%;width:20%;left:28%;background:radial-gradient(var(--windowsill) 50%,transparent 50%) 94% 50%/1vmin 1vmin no-repeat,var(--pitch-top);border:.5vmin solid var(--windowsill);border-bottom:0;transform:translateZ(1px)}.house__main div:nth-of-type(3):before{content:"";position:absolute;bottom:26%;height:36%;width:10%;left:6%;background:linear-gradient(var(--pink-one),var(--pink-one)) 0 0/100% .5vmin no-repeat,linear-gradient(var(--pink-one),var(--pink-one)) 0 0/.5vmin 100% no-repeat,linear-gradient(var(--pink-one),var(--pink-one)) 0 48%/100% .5vmin no-repeat,linear-gradient(var(--pink-one),var(--pink-one)) 100% 0/.5vmin 100% no-repeat,linear-gradient(var(--pink-one),var(--pink-one)) 0 100%/100% .5vmin no-repeat,linear-gradient(var(--internal-two) 0 50%,var(--internal-one) 50%);border:.5vmin solid var(--windowsill);transform:translateZ(1px)}.house__main div:nth-of-type(4){--bg: var(--blue-one)}.house__main div:nth-of-type(4):after{content:"";position:absolute;bottom:0;height:70%;width:20%;right:31%;background:radial-gradient(var(--windowsill) 50%,transparent 50%) 94% 50%/1vmin 1vmin no-repeat,var(--door);border:.5vmin solid var(--windowsill);border-bottom:0;transform:translateZ(1px)}.house__main div:nth-of-type(4):before{content:"";position:absolute;bottom:24%;height:36%;width:24%;right:2%;background:linear-gradient(var(--pink-one),var(--pink-one)) 0 0/100% .5vmin no-repeat,linear-gradient(var(--pink-one),var(--pink-one)) 0 0/.5vmin 100% no-repeat,linear-gradient(var(--pink-one),var(--pink-one)) 48% 0/.5vmin 100% no-repeat,linear-gradient(var(--pink-one),var(--pink-one)) 100% 0/.5vmin 100% no-repeat,linear-gradient(var(--pink-one),var(--pink-one)) 0 100%/100% .5vmin no-repeat,linear-gradient(var(--yellow-three) 0 50%,var(--internal-one) 50%);border:.5vmin solid var(--windowsill);transform:translateZ(1px)}.house__main div:nth-of-type(5),.house__main div:nth-of-type(6){display:none}.house__top{--width: 20;--depth: 30;--height: 2;--z: calc(var(--house-height) + 2)}.house__top div{--bg: var(--yellow-one);background:linear-gradient(transparent 90%,var(--panel-shade)) 0 0/100% 1vmin,var(--bg);filter:brightness(var(--brightness, 1))}.house__top div:nth-of-type(1):after{content:"";position:absolute;bottom:250%;left:50%;transform:translate3d(-50%,0,1px);width:15%;height:270%;background:linear-gradient(var(--pink-one),var(--pink-one)) 0 0/100% .5vmin no-repeat,linear-gradient(var(--pink-one),var(--pink-one)) 0 0/.5vmin 100% no-repeat,linear-gradient(var(--pink-one),var(--pink-one)) 0 48%/100% .5vmin no-repeat,linear-gradient(var(--pink-one),var(--pink-one)) 100% 0/.5vmin 100% no-repeat,linear-gradient(var(--pink-one),var(--pink-one)) 0 100%/100% .5vmin no-repeat,linear-gradient(var(--yellow-three) 0 50%,var(--internal-one) 50%);border:.25vmin solid var(--windowsill)}.house__top div:nth-of-type(2),.house__top div:nth-of-type(5),.house__top div:nth-of-type(6){display:none}.house__top div:nth-of-type(3){--bg: var(--blue-two)}.house__top div:nth-of-type(4){--bg: var(--blue-one)}.house__front{--width: 22;--height: calc(var(--house-height) + 1);--depth: 15;--z: calc((var(--house-height) / 2) + 2.5);--x: -2}.house__front div{--bg: var(--orange-one);background:linear-gradient(transparent 90%,var(--panel-shade)) 0 0/100% 1vmin,var(--bg);filter:brightness(var(--brightness, 1))}.house__front div:nth-of-type(1){--bg: var(--orange-two)}.house__front div:nth-of-type(2){--bg: var(--orange-one)}.house__front div:nth-of-type(2):after,.house__front div:nth-of-type(2):before{content:"";position:absolute;top:34%;background:linear-gradient(var(--pink-one),var(--pink-one)) 0 0/100% .5vmin no-repeat,linear-gradient(var(--pink-one),var(--pink-one)) 0 0/.5vmin 100% no-repeat,linear-gradient(var(--pink-one),var(--pink-one)) 0 48%/100% .5vmin no-repeat,linear-gradient(var(--pink-one),var(--pink-one)) 100% 0/.5vmin 100% no-repeat,linear-gradient(var(--pink-one),var(--pink-one)) 0 100%/100% .5vmin no-repeat,linear-gradient(var(--internal-two) 0 50%,var(--internal-two) 50%);border:.25vmin solid var(--windowsill);transform:translateZ(1px)}.house__front div:nth-of-type(2):after{right:15%;height:32%;width:10%}.house__front div:nth-of-type(2):before{height:20%;left:10%;width:15%;background:linear-gradient(var(--pink-one),var(--pink-one)) 0 0/100% .5vmin no-repeat,linear-gradient(var(--pink-one),var(--pink-one)) 0 0/.5vmin 100% no-repeat,linear-gradient(var(--pink-one),var(--pink-one)) 100% 0/.5vmin 100% no-repeat,linear-gradient(var(--pink-one),var(--pink-one)) 0 100%/100% .5vmin no-repeat,linear-gradient(var(--internal-two) 0 50%,var(--internal-two) 50%)}.house__front div:nth-of-type(3){--bg: var(--orange-three)}.house__front div:nth-of-type(4){--bg: var(--pink-one)}.house__front div:nth-of-type(4):after{content:"";position:absolute;bottom:50%;height:100%;left:0;right:0;background:var(--pink-one)}.house__front div:nth-of-type(5),.house__front div:nth-of-type(6){display:none}.house__front-slant{--width: 5;--depth: 16;--height: 4;--z: 15;--x: 20;--y: -.5}.house__front-slant div:nth-of-type(1):after,.house__front-slant div:nth-of-type(1):before{--clip: polygon(50% 0, 100% 100%, 0 100%, 0 0);filter:brightness(var(--brightness, 1))}.house__front-slant div:nth-of-type(2):after,.house__front-slant div:nth-of-type(2):before{--clip: polygon(100% 0%, 100% 100%, 0 100%, 50% 0);filter:brightness(calc(var(--brightness, 1) * 1.2))}.house__front-slant div:nth-of-type(1):after,.house__front-slant div:nth-of-type(2):after,.house__front-slant div:nth-of-type(1):before,.house__front-slant div:nth-of-type(2):before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;transform-origin:50% 100%;transform:rotateX(13deg);background:url(https://assets.codepen.io/605876/house-roof-tile--yellow.png);clip-path:var(--clip);filter:brightness(var(--brightness, 1))}.house__front-slant div:nth-of-type(1):before,.house__front-slant div:nth-of-type(2):before{background:var(--yellow-one);filter:brightness(var(--brightness, 1))}.house__front-slant div:nth-of-type(3):after,.house__front-slant div:nth-of-type(3):before{content:"";background:url(https://assets.codepen.io/605876/house-roof-tile--yellow.png);position:absolute;height:100%;width:100%;top:0;left:0;transform-origin:50% 100%;transform:rotateX(30deg);clip-path:polygon(0 100%,5% 0,95% 0,100% 100%);filter:brightness(var(--brightness, 1))}.house__front-slant div:nth-of-type(3):before{background:var(--yellow-two)}.house__pitch-main-body{--width: 25;--depth: 15;--height: 8;--z: 16;--x: -2}.house__pitch-main-body div{--bg: var(--yellow-two);background:linear-gradient(transparent 90%,var(--panel-shade)) 0 0/100% 1vmin,var(--bg)}.house__pitch-main-body div:nth-of-type(1){--bg: var(--orange-two);filter:brightness(var(--brightness, 1))}.house__pitch-main-body div:nth-of-type(2){--bg: var(--orange-one);filter:brightness(var(--brightness, 1))}.house__pitch-main-body div:nth-of-type(3){background:var(--yellow-two)}.house__pitch-main-body div:nth-of-type(3):after{filter:brightness(calc(var(--brightness, 1) * 1.3));content:"";position:absolute;top:0;left:0;height:100%;width:100%;background:url(https://assets.codepen.io/605876/house-roof-tile--yellow.png)}.house__pitch-main-body div:nth-of-type(3):before,.house__pitch-main-body div:nth-of-type(4):before{content:"";position:absolute;bottom:75%;left:50%;height:100%;width:30%;background:#000;filter:brightness(var(--brightness, 1));transform:translate3d(-50%,0,1px);border:.25vmin solid var(--windowsill);background:linear-gradient(var(--pink-one),var(--pink-one)) 0 0/100% .5vmin no-repeat,linear-gradient(var(--pink-one),var(--pink-one)) 0 0/.5vmin 100% no-repeat,linear-gradient(var(--pink-one),var(--pink-one)) 0 48%/100% .5vmin no-repeat,linear-gradient(var(--pink-one),var(--pink-one)) 100% 0/.5vmin 100% no-repeat,linear-gradient(var(--pink-one),var(--pink-one)) 0 100%/100% .5vmin no-repeat,linear-gradient(var(--bg, var(--yellow-three)) 0 50%,var(--bg, var(--yellow-three)) 50%)}.house__pitch-main-body div:nth-of-type(4):before{--bg: var(--internal-one);width:15%;bottom:150%;height:60%}.house__pitch-main-body div:nth-of-type(4){--bg: transparent}.house__pitch-main-body div:nth-of-type(5){background:var(--yellow-two)}.house__pitch-main-body div:nth-of-type(6){display:none}.house__pitch-main-pitch{--width: 25;--depth: 15;--height: 15;--z: 27.5;--x: -2}.house__pitch-main-pitch div{--bg: var(--pink-one);background:linear-gradient(transparent 90%,var(--panel-shade)) 0 0/100% 1vmin,var(--bg);filter:brightness(var(--brightness, 1))}.house__pitch-main-pitch div:nth-of-type(1),.house__pitch-main-pitch div:nth-of-type(2),.house__pitch-main-pitch div:nth-of-type(5),.house__pitch-main-pitch div:nth-of-type(6){background:transparent}.house__pitch-main-pitch div:nth-of-type(3),.house__pitch-main-pitch div:nth-of-type(4){clip-path:polygon(0 100%,50% 0,100% 100%)}.house__pitch-main-pitch div:nth-of-type(3){--bg: var(--yellow-one);filter:brightness(calc(var(--brightness, 1) * 1.3))}.house__pitch-main-pitch div:nth-of-type(3):after{content:"";position:absolute;top:0;left:0;height:100%;width:100%;background:url(https://assets.codepen.io/605876/house-roof-tile--yellow.png);transform:translateZ(1px);clip-path:polygon(0 100%,50% 0,100% 100%)}.house__pitch-left{--width: 20;--depth: 20;--height: var(--house-height);--z: calc(var(--house-height) + (var(--house-height) / 2) + 3);--y: 10}.house__pitch-left div{background:transparent}.house__pitch-left div:nth-of-type(1){clip-path:polygon(0 100%,50% 0,100% 100%);--bg: var(--yellow-one);background:linear-gradient(transparent 90%,var(--panel-shade)) 0 0/100% 1vmin,var(--bg);filter:brightness(var(--brightness, 1))}.pitch{position:absolute}.pitch--side{height:12vmin;width:8vmin;left:5vmin;top:-4vmin;transform:translateZ(30vmin);filter:brightness(var(--brightness, 1))}.pitch--side .cuboid{--depth: 10;--height: 1;--width: 12.5;--y: -1}.pitch--side-front{transform-origin:0% 0%;transform:translate3d(50%,0,30vmin) rotateY(68deg) translate(-.25vmin)}.pitch--side-back{transform-origin:100% 0%;transform:translate3d(-50%,0,30vmin) rotateY(-68deg) translate(.25vmin)}.pitch--side-back .cuboid{right:0}.pitch--main{height:15vmin;width:27vmin;left:-3vmin}.pitch--main .cuboid{--depth: 23;--width: 27;--height: 2;--z: .25}.pitch--main-left{transform-origin:50% 0;transform:translate3d(0,50%,35vmin) rotateX(-67deg) translateY(-.5vmin)}.pitch--main-left .cuboid{top:0}.pitch--main-right{transform-origin:50% 100%;transform:translate3d(0,-50%,35vmin) rotateX(67deg) translateY(.5vmin)}.pitch--main-right .cuboid{bottom:0}.pitch--mini{height:6vmin;width:10vmin;top:20vmin;transform:translateZ(25vmin);left:9vmin}.pitch--mini .cuboid{--height: .5;--width: 10;--depth: 6}.pitch--mini-left{transform-origin:50% 0;transform:translate3d(.5vmin,50%,25vmin) rotateX(-54deg) translateY(-.2vmin)}.pitch--mini-right{transform-origin:50% 100%;transform:translate3d(.5vmin,-50%,25vmin) rotateX(54deg) translateY(.2vmin)}.pitch--left{height:20vmin;width:17vmin;position:absolute;transform:translateZ(27vmin);top:11vmin}.pitch--left-front{transform-origin:0% 50%;transform:translate3d(10vmin,0,27vmin) rotateY(50deg) translate(-1vmin)}.pitch--left-back{transform-origin:100% 50%;transform:translate3d(-7vmin,0,27vmin) rotateY(-50deg) translate(1vmin)}.pitch--left .cuboid{--width: 17;--height: 1;--depth: 20;--y: 0;--z: .5}.bay-window{--height: 10;--width: 5;--depth: 15;--x: 20;--z: 7}.bay-window div:before{--bg: var(--green-one);background:linear-gradient(transparent 90%,var(--panel-shade)) 0 0/100% 1vmin,var(--bg);filter:brightness(var(--brightness, 1))}.bay-window div:nth-of-type(3){clip-path:inset(0 25% 0 25%);--bg: var(--green-one);filter:brightness(var(--brightness, 1));background:linear-gradient(transparent 90%,var(--panel-shade)) 0 0/100% 1vmin,var(--bg)}.bay-window div:nth-of-type(3):after{content:"";position:absolute;border:.5vmin solid var(--windowsill);width:35%;height:75%;top:15%;left:50%;filter:brightness(var(--brightness, 1));transform:translate3d(-50%,0,1px);background:linear-gradient(var(--pink-one),var(--pink-one)) 0 0/100% .5vmin no-repeat,linear-gradient(var(--pink-one),var(--pink-one)) 0 0/.5vmin 100% no-repeat,linear-gradient(var(--pink-one),var(--pink-one)) 0 48%/100% .5vmin no-repeat,linear-gradient(var(--pink-one),var(--pink-one)) 100% 0/.5vmin 100% no-repeat,linear-gradient(var(--pink-one),var(--pink-one)) 0 100%/100% .5vmin no-repeat,linear-gradient(var(--internal-two) 0 50%,var(--internal-two) 50%)}.bay-window div:nth-of-type(1),.bay-window div:nth-of-type(2),.bay-window div:nth-of-type(5),.bay-window div:nth-of-type(6){background-color:transparent}.bay-window div:nth-of-type(1):after,.bay-window div:nth-of-type(2):after,.bay-window div:nth-of-type(1):before,.bay-window div:nth-of-type(2):before{content:"";position:absolute;top:0;width:126%;height:100%;filter:brightness(var(--brightness, 1))}.bay-window div:nth-of-type(1):after,.bay-window div:nth-of-type(1):before{--bg: var(--green-three);left:0;transform-origin:0 50%;transform:rotateY(37deg);filter:brightness(var(--brightness, 1))}.bay-window div:nth-of-type(2):after,.bay-window div:nth-of-type(2):before{--bg: var(--green-two);right:0;transform-origin:100% 50%;transform:rotateY(-37deg)}.bay-window div:nth-of-type(1):after,.bay-window div:nth-of-type(2):after{background:linear-gradient(var(--pink-one),var(--pink-one)) 0 0/100% .5vmin no-repeat,linear-gradient(var(--pink-one),var(--pink-one)) 0 0/.5vmin 100% no-repeat,linear-gradient(var(--pink-one),var(--pink-one)) 0 48%/100% .5vmin no-repeat,linear-gradient(var(--pink-one),var(--pink-one)) 100% 0/.5vmin 100% no-repeat,linear-gradient(var(--pink-one),var(--pink-one)) 0 100%/100% .5vmin no-repeat,linear-gradient(var(--internal-two) 0 50%,var(--internal-two) 50%);border:.5vmin solid var(--windowsill);width:80%;height:75%;top:15%;filter:brightness(var(--brightness, 1))}.bay-window div:nth-of-type(1):after{transform:rotateY(37deg) translate3d(25%,0,1px);filter:brightness(var(--brightness, 1))}.bay-window div:nth-of-type(2):after{transform:rotateY(-37deg) translate3d(-25%,0,1px);filter:brightness(var(--brightness, 1))}.bay-trim{--height: 1.5;--width: 6;--depth: 17;--y: -1;--x: 20;--z: calc((var(--house-height) + .25))}.bay-trim div{background:var(--trim-one);filter:brightness(var(--brightness, 1))}.bay-trim div:nth-of-type(1){background:var(--trim-three)}.bay-trim div:nth-of-type(3){background:var(--trim-two)}.base--main{--height: 2;--width: 20;--depth: 30;--z: 1}.base--main div:after{content:"";position:absolute;height:100%;width:100%;border:.5vmin solid var(--border, var(--yellow-one));filter:brightness(var(--brightness, 1))}.base--main div:nth-of-type(1){--border: var(--yellow-two)}.base--main div:nth-of-type(2),.base--main div:nth-of-type(3){--border: var(--orange-two)}.base--main div:nth-of-type(4){--border: var(--blue-two)}.base--main div:nth-of-type(5):after,.base--main div:nth-of-type(6):after{display:none}.base div{background:var(--trim-two)}.base div:before{content:"";position:absolute;top:0;height:100%;width:100%;filter:brightness(var(--brightness, 1));background:url(https://assets.codepen.io/605876/wood-grain.png)}.base--back{--depth: 15;--width: 2;--height: 2;--x: -2;--z: 1}.base--back div:nth-of-type(1):after,.base--back div:nth-of-type(2):after,.base--back div:nth-of-type(4):after{content:"";position:absolute;height:100%;width:100%;top:0;left:0;border:.5vmin solid var(--pink-two);filter:brightness(var(--brightness, 1))}.base--back div:nth-of-type(2):after{border-color:var(--orange-two);filter:brightness(var(--brightness, 1))}.base--front{--x: 20;--z: 1;--height: 2;--width: 5;--depth: 15}.base--front div:nth-of-type(3){clip-path:inset(0 25% 0 25%)}.base--front div:nth-of-type(1),.base--front div:nth-of-type(2){background:transparent}.base--front div:nth-of-type(5),.base--front div:nth-of-type(6),.base--front div:nth-of-type(5):after,.base--front div:nth-of-type(6):after{display:none}.base--front div:nth-of-type(1):before,.base--front div:nth-of-type(1):after{content:"";position:absolute;left:0;top:0;transform-origin:0 50%;width:126%;height:100%;filter:brightness(var(--brightness, 1));background:url(https://assets.codepen.io/605876/wood-grain.png);transform:rotateY(37deg)}.base--front div:nth-of-type(2):before,.base--front div:nth-of-type(2):after{content:"";position:absolute;right:0;top:0;transform-origin:100% 50%;width:126%;height:100%;background:url(https://assets.codepen.io/605876/wood-grain.png);transform:rotateY(-37deg);filter:brightness(var(--brightness, 1))}.base--front div:nth-of-type(3):after{content:"";height:100%;width:100%;position:absolute;top:0;left:0}.base--front div:nth-of-type(1):after,.base--front div:nth-of-type(2):after,.base--front div:nth-of-type(3):after{border:.5vmin solid var(--green-two);filter:brightness(var(--brightness, 1))}.base--side{--z: 1;--height: 2;--width: 8;--depth: 4;--y: -4;--x: 5}.base--side div:after{content:"";position:absolute;height:100%;width:100%;top:0;left:0;border:.5vmin solid var(--pink-two);filter:brightness(var(--brightness, 1))}.chimney{--width: 6;--height: 16;--depth: 4;--z: 32;--x: 7;--y: 13}.chimney div{background:var(--brick);filter:brightness(var(--brightness, 1))}.chimney div:nth-of-type(1){filter:brightness(calc(var(--brightness, 1) * .5))}.chimney div:nth-of-type(3){filter:brightness(calc(var(--brightness, 1) * .75))}.chimney div:nth-of-type(5){border:1vmin solid var(--pitch-top);background:#111}.chimney div:nth-of-type(5):after{display:none}.chimney div:after{content:"";position:absolute;height:100%;width:100%;top:0;left:0;background:url(https://assets.codepen.io/605876/bricks.png)}.chimney__skirt{--width: 7;--height: 1;--depth: 5;--z: 37;--x: 6.5;--y: 12.5}.chimney__skirt div{background:var(--brick)}.chimney__skirt div:after{content:"";position:absolute;height:100%;width:100%;top:0;left:0;background:url(https://assets.codepen.io/605876/bricks.png);filter:brightness(calc(var(--brightness, 1) * .5))}.post--left{--depth: 1;--width: 1;--height: 12;--y: 29;--x: 19;--z: 8}.post--right{--depth: 1;--width: 1;--height: 12;--y: 23;--x: 19;--z: 8}.post--back{--depth: 1;--width: 1;--height: 12;--y: 29;--x: 14;--z: 8}.post--front-top{--depth: 15;--width: 1;--height: 1;--y: 15;--x: 19;--z: 13}.post--front-side{--depth: 1;--width: 6;--height: 1;--y: 29;--x: 14;--z: 13}.post--top-support{--depth: 15;--width: .5;--height: .5;--y: 15;--x: 19.5;--z: 11.5}.post--top-side-support{--depth: .5;--width: 5;--height: .5;--y: 29.5;--x: 15;--z: 11.5}.post--bottom-side-support{--depth: .5;--width: 5;--height: .5;--y: 29.5;--x: 15;--z: 6}.post--bottom-support{--depth: 7;--width: .5;--height: .5;--y: 23;--x: 19.5;--z: 6}.post--stair{--depth: 1;--width: 1;--height: 4;--x: 24;--y: 23;--z: 2}.post--handrail{--depth: 1;--height: 1;--width: 6;--rotate-cuboid-y: 30;--x: 19;--y: 23;--z: 5}.post div{background:var(--handrail-one);filter:brightness(var(--brightness, 1))}.post div:nth-of-type(1){background:var(--handrail-three);filter:brightness(var(--brightness, 1))}.post div:nth-of-type(3){background:var(--handrail-two);filter:brightness(var(--brightness, 1))}.steps{position:absolute}.steps--front{top:15vmin;left:20vmin;width:5vmin;height:8vmin}.steps--front>div:nth-of-type(1){--height: 1.5;--width: calc(5 / 3);--depth: 8;--z: .75}.steps--front>div:nth-of-type(2){--height: 1;--width: calc(5 / 3);--depth: 8;--z: .5;--x: calc(5 / 3)}.steps--front>div:nth-of-type(3){--height: .5;--width: calc(5 / 3);--depth: 8;--z: .25;--x: calc((5 / 3) * 2)}.steps--front>div div{background-color:var(--step-one);filter:brightness(var(--brightness, 1))}.steps--front>div div:nth-of-type(1){background-color:var(--step-two);filter:brightness(var(--brightness, 1))}.steps--front>div div:nth-of-type(3){background-color:var(--step-three);filter:brightness(var(--brightness, 1))}.steps--back{top:15vmin;left:-2vmin;height:8vmin;width:2vmin}.steps--back>div{--height: 1;--width: 2;--depth: 8;--z: .5}.steps--back>div div{background-color:var(--step-three);filter:brightness(var(--brightness, 1))}.steps--back>div div:nth-of-type(1){background-color:var(--step-two)}.steps--back>div div:nth-of-type(5){background-color:var(--step-one)}.rafter{--z: 36;--x: -3;--y: 6.5;--width: 27;--height: 1;--depth: 2}.rafter div{background:var(--pitch-top);filter:brightness(var(--brightness, 1))}.fence{position:absolute}.fence--front-top{background:linear-gradient(transparent 50%,var(--handrail-three) 50%) 0 0/100% 1vmin;width:1.5vmin;height:15vmin;top:15vmin;left:19vmin;transform:translateZ(12.5vmin) rotateY(90deg);filter:brightness(var(--brightness, 1))}.fence--side-top{background:linear-gradient(transparent 50%,var(--handrail-three) 50%) 0 0/100% 1vmin;width:1.5vmin;height:6vmin;top:27vmin;left:19vmin;filter:brightness(var(--brightness, 1));transform:translateZ(12.5vmin) rotateY(90deg) rotateX(90deg) translateY(-50%)}.fence--side-bottom{background:linear-gradient(90deg,transparent 50%,var(--handrail-three) 50%) 0 0/1vmin 100%;width:5vmin;height:4vmin;top:25.5vmin;left:14.5vmin;transform-origin:50% 100%;filter:brightness(var(--brightness, 1));transform:translateZ(2vmin) rotateX(-90deg)}.fence--front-bottom{background:linear-gradient(transparent 50%,var(--handrail-three) 50%) 0 0/100% 1vmin;width:4vmin;height:6vmin;top:23.5vmin;left:19.5vmin;transform-origin:0% 50%;filter:brightness(var(--brightness, 1));transform:translateZ(2vmin) rotateY(-90deg)}.fence--handrail{height:8vmin;width:5vmin;top:23.5vmin;left:20vmin;filter:brightness(var(--brightness, 1));background:linear-gradient(90deg,transparent 50%,var(--handrail-three) 50%) 0 0/1vmin 100%;transform-origin:50% 0;transform:rotateX(90deg);clip-path:polygon(0 0,0 80%,100% 40%,100% 0%)}.pipe div{background-color:var(--pipe-one);filter:brightness(var(--brightness, 1))}.pipe div:nth-of-type(1){background-color:var(--pink-three)}.pipe div:nth-of-type(4){background-color:var(--pink-two)}.pipe--vertical{--depth: .5;--width: .5;--height: 18;--z: 11;--x: -2.5;--y: 13}.pipe--horizontal{--depth: 12;--width: .5;--height: .5;--z: 16;--x: -2.5;--y: 2;--rotate-cuboid-x: -15}.pitch .cuboid div{background:var(--pitch-under);overflow:hidden;filter:brightness(var(--brightness, 1))}.pitch .cuboid div:nth-of-type(1),.pitch .cuboid div:nth-of-type(2){background:var(--pitch-top)}.pitch .cuboid div:nth-of-type(6){background:var(--pitch-back)}.pitch .cuboid div:nth-of-type(5){filter:brightness(var(--brightness, 1))}.pitch .cuboid div:nth-of-type(5):after{content:"";position:absolute;top:50%;left:50%;width:200%;height:200%;transform:translate(-50%,-50%) rotate(calc(var(--r, 0) * 1deg));background:url(https://assets.codepen.io/605876/house-roof-tile.png)}.pitch--left .cuboid div,.pitch--side .cuboid div{filter:brightness(var(--brightness, 1))}.pitch--left .cuboid div:nth-of-type(1),.pitch--side .cuboid div:nth-of-type(1),.pitch--left .cuboid div:nth-of-type(2),.pitch--side .cuboid div:nth-of-type(2){background:var(--pitch-under)}.pitch--left .cuboid div:nth-of-type(3),.pitch--side .cuboid div:nth-of-type(3),.pitch--left .cuboid div:nth-of-type(4),.pitch--side .cuboid div:nth-of-type(4){background:var(--pitch-top)}.pitch--mini-left{--b: .5}.pitch--mini-right{--r: 180}.pitch--left-front{--b: .75;--r: -90}.pitch--left-back{--r: 90}.pitch--main-left{--b: .5}.pitch--main-right{--r: 180;--b: .75}.pitch--side-front{--b: .5;--r: -90}.pitch--side-back{--r: 90}.window{position:absolute;background:var(--internal)}.window--side{width:3.5vmin;height:7vmin;left:7.25vmin;top:-4.1vmin;transform-origin:50% 0;transform:rotateX(90deg) translateY(17vmin);border:.25vmin solid var(--windowsill);background:linear-gradient(var(--pink-one),var(--pink-one)) 0 0/100% .5vmin no-repeat,linear-gradient(var(--pink-one),var(--pink-one)) 0 0/.5vmin 100% no-repeat,linear-gradient(var(--pink-one),var(--pink-one)) 0 48%/100% .5vmin no-repeat,linear-gradient(var(--pink-one),var(--pink-one)) 100% 0/.5vmin 100% no-repeat,linear-gradient(var(--pink-one),var(--pink-one)) 0 100%/100% .5vmin no-repeat,linear-gradient(var(--yellow-three) 0 50%,var(--yellow-three) 50%)}.balloons{position:absolute;top:49%;left:42%;transform:translate3d(-50%,-50%,40vmin)}.balloon__string{width:.25vmin;height:calc(var(--length) * 1vmin);position:absolute;background:#40404040;bottom:50%;left:50%;transform-origin:50% 100%;transform:translate(-50%) rotateX(-90deg) rotateY(calc(var(--rotate) * 1deg)) rotateX(calc(var(--tilt) * 1deg))}.balloon{height:calc(var(--size, 10) * 1.2vmin);width:calc(var(--size, 10) * 1vmin);background:hsla(var(--hue, 0),90%,50%,.75);border-radius:50%/45% 45% 55% 55%;position:absolute;bottom:50%;left:50%;transform-origin:50% 100%;filter:brightness(var(--brightness, 1));transform:translate(-50%) rotateX(-90deg) rotateY(calc(var(--rotate) * 1deg)) rotateX(calc(var(--tilt) * 1deg)) translateY(calc(var(--length) * -1vmin)) rotateY(calc((var(--rotate) + var(--rotate-y)) * -1deg)) rotateX(calc(var(--tilt) * 1deg))}.balloon:before{content:"";position:absolute;width:20%;height:30%;background:#00f;top:8%;left:16%;border-radius:50%;transform:rotate(40deg);background:var(--shine)}@keyframes rotate-scene{0%{--rotate-y: 0}to{--rotate-y: 360}}@keyframes rotate{0%{transform:rotateX(calc(var(--rotate-x, -24) * 1deg)) rotateY(calc(var(--rotate-y, -24) * 1deg)) rotateX(90deg) translateZ(-30vmin) rotate(0)}to{transform:rotateX(calc(var(--rotate-x, -24) * 1deg)) rotateY(calc(var(--rotate-y, -24) * 1deg)) rotateX(90deg) translateZ(-30vmin) rotate(360deg)}}div.tp-dfwv{z-index:9999;transform:translateZ(400vmin)}div.tp-dfwv .tp-rotv{max-height:calc(100vh - 16px);overflow:auto;border-radius:var(--bs-br)}div.tp-dfwv .tp-rotv>.tp-rotv_b{position:sticky;top:0;z-index:2;background:#45474c}