@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;transform-style:preserve-3d}:root{--blur: 1vmin;--perspective: 2000;--rotate-x: -20;--rotate-y: -45;--plane-height: 50;--plane-width: 50;--dark: 0;--zoomed: 0;--scale: calc(.75 + (var(--zoomed) * 4));--wall-thickness: 4;--cm: calc((var(--plane-height) / 240));--transition: .2s;--floor-shade-one: #8f663d;--floor-shade-two: #c29970;--floor-shade-three: #e0ccb8;--windowsill-shade-one: #bf8a40;--windowsill-shade-two: #996f33;--windowsill-shade-three: #735326;--wall-shade-one: #fafafa;--wall-shade-two: #f2f2f2;--wall-shade-three: #e6e6e6;--wall-shade-four: #d9d9d9;--skirting-one: #ededed;--skirting-two: #e0e0e0;--fade-one: #f7baba;--fade-two: #bae3f7;--fade-three: #e3baf7;--fade-four: #baf7ba;--cube: #f2f2f2;--leg-one: #1a1a1a;--leg-two: #1f1f1f;--leg-three: #242424;--leg-four: #292929;--rug: #0f1924;--peripheral-one: #333;--peripheral-two: #4d4d4d;--peripheral-three: #666;--peripheral-four: #808080;--mac-one: #ccc;--mac-two: #b3b3b3;--blind: #f2e6d9;--mac-three: #999;--pot-one: #bf6a40;--pot-two: #953;--pot-three: #734026;--chair-one: #000;--chair-two: #1a1a1a;--chair-three: #333;--chair-four: #4d4d4d;--chair-accent-one: #f2f2f2;--chair-accent-two: #d65c5c;--bg: #d1e5fa;--light: #ccc;--icon: #69c}audio{display:none}body{min-height:100vh;overflow:hidden}[type=checkbox]{position:absolute;left:100%;opacity:0;height:0;width:0}label{position:fixed;z-index:100;right:1rem;bottom:1rem;border-radius:50%;height:44px;width:44px;cursor:pointer;transform:translateZ(50vmin) translateY(calc((var(--index) * -100%) + (var(--index) * -10px)))}svg{height:28px;width:28px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}path{fill:var(--icon)}[for=spin]{--index: 0}[for=dark]{--index: 1}[for=audio]{--index: 2}[for=zoom]{--index: 3}#spin:checked~.scene__wrapper{--spin: 1}#zoom:checked~.scene__wrapper{--zoomed: 1;--scale: 4.75}#zoom:checked~label:not([for=zoom]){display:none}#zoom:checked+label{background:#fff}#dark:checked~.scene__wrapper .light-cube div,#dark:checked~.scene__wrapper .light-cube:after{animation:fade 10s calc(2 * var(--transition)) infinite linear}@keyframes fade{0%,to{background:var(--fade-one)}25%{background:var(--fade-two)}50%{background:var(--fade-three)}75%{background:var(--fade-four)}}#dark:checked~.scene__wrapper .light-cube:after{filter:blur(var(--blur))}#dark:checked~.scene__wrapper .wall--left div:nth-of-type(3):after{opacity:1}#dark:checked~.scene__wrapper .wall--right-right div:nth-of-type(1):after,#dark:checked~.scene__wrapper .shelf div:nth-of-type(5):after{animation:fade 10s calc(2 * var(--transition)) infinite linear}#dark:checked~.scene__wrapper .jfdi div:nth-of-type(3):after{color:#ccc}#dark:checked~.scene__wrapper .jfdi div:nth-of-type(4):after{transition:transform var(--transition) var(--transition);transform:translate(-8%,-16%)}#dark:checked~.scene__wrapper .windowsill div:nth-of-type(1),#dark:checked~.scene__wrapper .windowsill div:nth-of-type(5),#dark:checked~.scene__wrapper .floor div:nth-of-type(5){filter:brightness(.25)}#dark:checked~.scene__wrapper .plant__plant{filter:brightness(.5)}#dark:checked~.scene__wrapper .chair__back div:nth-of-type(3):after{filter:brightness(.25)}#dark:checked~.scene__wrapper .desk__top div:nth-of-type(1){filter:brightness(.1)}#dark:checked~.scene__wrapper .desk__top div:nth-of-type(3){filter:brightness(.3)}#dark:checked~.scene__wrapper .desk__top div:nth-of-type(5){filter:brightness(.2)}#dark:checked~.scene__wrapper .bear-canvas div{filter:brightness(.35)}#dark:checked~.scene__wrapper .bear-canvas div:nth-of-type(1){filter:brightness(.35) grayscale(1)}#dark:checked~.scene__wrapper .rug div:nth-of-type(5){filter:brightness(.25)}#zoom:checked~.scene__wrapper .scene,#zoom:checked~.scene__wrapper .studio,#zoom:checked~.scene__wrapper .plane{transition:transform var(--transition)}#zoom:checked~.scene__wrapper .chair{transition:opacity var(--transition)}#dark:checked~.scene__wrapper{--dark: 1;--floor-shade-one: #241a0f;--floor-shade-two: #47331f;--floor-shade-three: #6b4d2e;--windowsill-shade-one: #735326;--windowsill-shade-two: #4d3719;--windowsill-shade-three: #261c0d;--wall-shade-one: #616161;--wall-shade-two: #595959;--wall-shade-three: #4d4d4d;--wall-shade-four: #404040;--skirting-one: #545454;--skirting-two: #474747;--fade-one: #f7baba;--fade-two: #bae3f7;--fade-three: #e3baf7;--fade-four: #baf7ba;--leg-one: #0d0d0d;--leg-two: #0f0f0f;--leg-three: #121212;--leg-four: #141414;--rug: #0f1924;--peripheral-one: #1a1a1a;--peripheral-two: #262626;--peripheral-three: #333;--peripheral-four: #404040;--mac-one: #333;--mac-two: #2e2e2e;--mac-three: #262626;--pot-one: #734026;--pot-two: #4d2b19;--blind: #4d3319;--pot-three: #26150d;--chair-one: #000;--chair-two: #0d0d0d;--chair-three: #1a1a1a;--chair-four: #262626;--chair-accent-one: #666;--chair-accent-two: #7a1f1f;--bg: #05192e;--cube: #666;--light: #fff;--icon: #0f4c8a}:checked+label svg:last-of-type{display:block}:checked+label svg:first-of-type{display:none}label svg:last-of-type{display:none}.scene{perspective:calc(var(--perspective, 800) * 1px);transform-style:preserve-3d;height:100vh;width:100vw;display:flex;align-items:center;justify-content:center;transform:scale(var(--scale)) translateZ(50vmin)}.scene__wrapper{transition:background var(--transition);background:var(--bg)}.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) - (var(--zoomed) * var(--rotate-x, -24))) * 1deg)) rotateY(calc(((var(--rotate-y, -24) - (var(--zoomed) * var(--rotate-y, -24))) + (var(--zoomed) * -90)) * 1deg)) rotateX(90deg) translateZ(0)}.plane:before{content:"";background:#00000080;filter:blur(var(--blur));height:112%;width:112%;position:absolute;top:-8%;left:-10%;transform:translateZ(-11vmin);z-index:-1}.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:rotate(calc(var(--starting-rotation, 0) * 1deg)) 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%;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%}.studio{height:100%;width:100%;transform:translateZ(calc((-10 + (var(--zoomed) * -10)) * 1vmin))}.floor{--height: 1;--width: calc(50 + var(--wall-thickness));--depth: calc(50 + var(--wall-thickness));--z: -.5;--y: calc(var(--wall-thickness) * -1);--x: calc(var(--wall-thickness) * -1);transition:background var(--transition)}.floor div:not(.studio__shadow){background:var(--floor-shade-three)}.floor div:nth-of-type(1){background:var(--floor-shade-one)}.floor div:nth-of-type(3){background:var(--floor-shade-two)}.floor div:nth-of-type(5){transition:filter var(--transition);filter:brightness(1)}.floor div:nth-of-type(5):after{content:"";position:absolute;top:0;left:0;height:100%;width:100%;transform:rotate(90deg);background:url(https://images.pexels.com/photos/235994/pexels-photo-235994.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260) 0 0/15vmin 15vmin}.wall{transition:background var(--transition)}.wall--left{--height: calc(220 * var(--cm));--width: var(--wall-thickness);--depth: calc((240 * var(--cm)) + var(--wall-thickness));--z: calc(110 * var(--cm));--x: calc(var(--wall-thickness) * -1);--y: calc(var(--wall-thickness) * -1)}.wall--left div:nth-of-type(1){background:var(--wall-shade-four)}.wall--left div:nth-of-type(2){background:var(--wall-shade-one)}.wall--left div:nth-of-type(3){background:var(--wall-shade-one);overflow:hidden}.wall--left div:nth-of-type(3):before{content:"";position:absolute;top:0;left:0;height:100%;width:100%;overflow:hidden;filter:blur(var(--blur));background:radial-gradient(rgba(0,0,0,.5),transparent 100%) 80% 64%/20% 35% no-repeat,radial-gradient(rgba(0,0,0,.5),transparent 100%) 45% 58%/45% 20% no-repeat,radial-gradient(rgba(0,0,0,.5),transparent 100%) 36% 100%/64% 30% no-repeat}.wall--left div:nth-of-type(3):after{content:"";position:absolute;top:0;left:0;height:80%;width:80%;overflow:hidden;filter:blur(var(--blur));transform:rotate(41deg) translate(-18%,-36%);opacity:0;transition:opacity var(--transition) var(--transition);background:radial-gradient(circle at 50% 100%,rgba(242,236,217,.85),transparent 60%)}.wall--left div:nth-of-type(5){background:var(--wall-shade-three)}.wall--left div:nth-of-type(4),.wall--left div:nth-of-type(6){background:var(--wall-shade-two)}.wall--right-lower{--height: calc(100 * var(--cm));--width: 50;--depth: var(--wall-thickness);--z: calc(50 * var(--cm));--y: calc(var(--wall-thickness) * -1)}.wall--right-lower:after{content:"";height:30%;width:calc((114 * var(--cm)) * 1vmin);top:102%;left:calc((22 * var(--cm)) * 1vmin);filter:blur(calc(.75 * var(--blur)));background:#00000080;position:absolute;transform-origin:50% 0;transform:rotateX(90deg) translateY(calc((44 * var(--cm)) * 1vmin))}.wall--right-lower div{background:var(--wall-shade-four)}.wall--right-lower div:nth-of-type(5){background:var(--wall-shade-three)}.wall--right-lower div:nth-of-type(2),.wall--right-lower div:nth-of-type(3){background:var(--wall-shade-one)}.wall--right-left{--height: calc(220 * var(--cm));--width: calc(22 * var(--cm));--depth: var(--wall-thickness);--z: calc(110 * var(--cm));--y: calc(var(--wall-thickness) * -1)}.wall--right-left div{background:var(--wall-shade-four)}.wall--right-left div:nth-of-type(3){background:var(--wall-shade-two)}.wall--right-left div:nth-of-type(2){background:var(--wall-shade-one)}.wall--right-upper{--height: calc(22 * var(--cm));--width: calc(240 * var(--cm));--depth: var(--wall-thickness);--z: calc(209 * var(--cm));--y: calc(var(--wall-thickness) * -1)}.wall--right-upper div{background:var(--wall-shade-four)}.wall--right-upper div:nth-of-type(2),.wall--right-upper div:nth-of-type(3){background:var(--wall-shade-one)}.wall--right-upper div:nth-of-type(5){background:var(--wall-shade-three)}.wall--right-right{--height: calc(220 * var(--cm));--width: calc((240 - 136) * var(--cm));--depth: var(--wall-thickness);--z: calc(110 * var(--cm));--y: calc(var(--wall-thickness) * -1);--x: calc(136 * var(--cm))}.wall--right-right div{background:var(--wall-shade-four)}.wall--right-right div:nth-of-type(1):after{content:"";position:absolute;height:24%;width:70%;border-radius:50%;background:none;filter:blur(calc(2 * var(--blur)));top:15%;left:15%;opacity:.75}.wall--right-right div:nth-of-type(2),.wall--right-right div:nth-of-type(3){background:var(--wall-shade-one)}.wall--right-right div:nth-of-type(4){background:var(--wall-shade-four)}.wall--right-right div:nth-of-type(5){background:var(--wall-shade-three)}.windowsill{--height: calc(2 * var(--cm));--depth: calc(22 * var(--cm));--width: calc(114 * var(--cm));--z: calc(100 * var(--cm));--x: calc(22 * var(--cm));--y: calc(var(--wall-thickness) * -.8)}.windowsill div{background:var(--windowsill-shade-one)}.windowsill div:nth-of-type(1){transition:filter var(--transition);filter:brightness(.5);background:url(https://images.pexels.com/photos/172276/pexels-photo-172276.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500)}.windowsill div:nth-of-type(2){background:var(--wall-shade-one)}.windowsill div:nth-of-type(5){transition:filter var(--transition);background:url(https://images.pexels.com/photos/172276/pexels-photo-172276.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500)}.windowsill div:nth-of-type(6){background:var(--windowsill-shade-three)}.studio-light{--width: calc(4 * var(--cm));--height: calc(15 * var(--cm));--depth: calc(30 * var(--cm));--z: calc(146 * var(--cm));--rotate-cuboid-z: 20;--rotate-cuboid-x: 30;--rotate-cuboid-y: 45;top:86%;left:15%;margin-top:calc((-15 * var(--cm)) * 1vmin)}.studio-light div{background:var(--peripheral-four);transition:background var(--transition)}.studio-light div:nth-of-type(4){background:var(--light);transition:background var(--transition) var(--transition)}.studio-light div:nth-of-type(5){background:var(--peripheral-two)}.studio-light div:nth-of-type(3){background:var(--peripheral-one)}.studio-light__stand{--width: calc(3 * var(--cm));--depth: calc(3 * var(--cm));--height: calc(80 * var(--cm));--z: calc(100 * var(--cm));top:85%;left:15%}.studio-light__stand div{background:var(--peripheral-four)}.studio-light__stand div:nth-of-type(1){background:var(--peripheral-one)}.studio-light__stand div:nth-of-type(3){background:var(--peripheral-three)}.desk{height:calc((180 * var(--cm)) * 1vmin);width:calc((68 * var(--cm)) * 1vmin);top:calc((30 * var(--cm)) * 1vmin);left:calc((0 * var(--cm)) * 1vmin);position:absolute}.desk__shadow{background:#00000080;filter:blur(var(--blur));position:absolute}.desk__shadow--floor{background:radial-gradient(circle at 0 50%,rgba(0,0,0,.35) 50%,transparent 80%);height:110%;width:80%;top:5%}.desk__leg{--width: calc(8 * var(--cm));--depth: calc(5 * var(--cm));--height: calc(64 * var(--cm));--z: calc(32 * var(--cm));--x: calc(20 * var(--cm))}.desk__leg--right{--y: calc(15 * var(--cm))}.desk__leg--left{--y: calc(160 * var(--cm))}.desk__leg--bottom-right{--width: calc(50 * var(--cm));--height: calc(2 * var(--cm));--y: calc(15 * var(--cm));--x: calc(5 * var(--cm));--z: calc(1 * var(--cm))}.desk__leg--bottom-left{--width: calc(50 * var(--cm));--height: calc(2 * var(--cm));--x: calc(5 * var(--cm));--y: calc(160 * var(--cm));--z: calc(1 * var(--cm))}.desk__leg div{transition:background var(--transition);background:var(--leg-one)}.desk__leg div:nth-of-type(1){background:var(--leg-two)}.desk__top{--height: calc(4 * var(--cm));--width: calc(68 * var(--cm));--depth: calc(180 * var(--cm));--z: calc(64 * var(--cm))}.desk__top div{background:url(https://images.pexels.com/photos/978484/pexels-photo-978484.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940) 0 0/20vmin 30vmin;transition:filter var(--transition),background var(--transition)}.desk__top div:nth-of-type(1){filter:brightness(.25)}.desk__top div:nth-of-type(5){filter:brightness(.5)}.desk__top div:nth-of-type(6){background:var(--floor-shade-three)}.jfdi{--height: calc(40 * var(--cm));--width: calc(2 * var(--cm));--depth: calc(60 * var(--cm));--y: calc(90 * var(--cm));--x: var(--cm);--z: calc(190 * var(--cm))}.jfdi div{background:#000}.jfdi div:nth-of-type(4):after{content:"";background:#00000080;position:absolute;top:8%;left:4%;height:100%;width:100%;transition:transform var(--transition);filter:blur(var(--blur))}.jfdi div:nth-of-type(3){background:#262626}.jfdi div:nth-of-type(3):after{transition:color var(--transition);content:"JFDI";position:absolute;top:0;left:0;height:100%;width:100%;color:#fff;font-weight:700;font-family:sans-serif;font-size:calc((22 * var(--cm)) * 1vmin);text-align:center;line-height:calc((40 * var(--cm) * 1vmin))}.shelf{--height: calc(5 * var(--cm));--depth: calc(26 * var(--cm));--width: calc(60 * var(--cm));--z: calc(144 * var(--cm));--y: var(--cm);--x: calc(170 * var(--cm))}.shelf div{background:var(--wall-shade-three)}.shelf div:nth-of-type(5){background:var(--wall-shade-one);overflow:hidden}.shelf div:nth-of-type(5):after{content:"";height:200%;border-radius:50%;width:100%;position:absolute;left:50%;top:50%;filter:blur(calc(2 * var(--blur)));transform:translate(-80%,-50%)}.shelf div:nth-of-type(3){background:var(--wall-shade-two)}.shelf div:nth-of-type(2):after{content:"";width:100%;height:250%;position:absolute;top:110%;left:4%;background:#00000080;transform-origin:50% 0;transform:skew(-5deg);filter:blur(var(--blur))}.light-cube{--height: calc(15 * var(--cm));--width: calc(15 * var(--cm));--depth: calc(15 * var(--cm));--z: calc(155 * var(--cm));--x: calc(180 * var(--cm));--y: calc(5 * var(--cm));--rotate-cuboid-z: 40}.light-cube div{background:var(--wall-shade-one)}.light-cube div:nth-of-type(1){background:var(--wall-shade-three)}.light-cube div:nth-of-type(3){background:var(--wall-shade-two)}.skirting--left{--height: calc(8 * var(--cm));--width: calc(2 * var(--cm));--depth: calc(240 * var(--cm));--z: calc(4 * var(--cm))}.skirting--left div{background:var(--skirting-one)}.skirting--left div:nth-of-type(3){background:var(--skirting-one)}.skirting--left div:nth-of-type(3):after{content:"";position:absolute;top:0;left:0;height:100%;width:100%;filter:blur(var(--blur));background:radial-gradient(circle at 50% 50%,rgba(0,0,0,.5) 0 75%,transparent) 40% 0/70% 150% no-repeat}.skirting--left div:nth-of-type(5){background:linear-gradient(transparent,rgba(0,0,0,.5),transparent) 0 50%/100% 70% no-repeat,var(--skirting-one)}.skirting--right{--height: calc(8 * var(--cm));--width: calc(240 * var(--cm));--depth: calc(2 * var(--cm));--z: calc(4 * var(--cm))}.skirting--right div{background:var(--skirting-two)}.rug{--height: calc(1 * var(--cm));--width: calc(140 * var(--cm));--depth: calc(140 * var(--cm));--x: calc(80 * var(--cm));--y: calc(50 * var(--cm));--z: calc(.5 * var(--cm))}.rug div{background:var(--rug)}.rug div:nth-of-type(5){transition:filter var(--transition);filter:brightness(1);background:url(https://images.pexels.com/photos/3707669/pexels-photo-3707669.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940);background-size:cover}.monitor--main{--width: calc(3 * var(--cm));--depth: calc(86 * var(--cm));--height: calc(36 * var(--cm));--z: calc(106 * var(--cm));--y: calc(-43 * var(--cm));--x: calc(10 * var(--cm));top:50%}.monitor--portrait{--depth: calc(34 * var(--cm));--width: calc(3 * var(--cm));--height: calc(56 * var(--cm));--z: calc(104 * var(--cm));--x: calc(20 * var(--cm));--rotate-cuboid-z: 30;top:8%}.monitor div{background:var(--peripheral-one)}.monitor div:nth-of-type(3),.monitor div:nth-of-type(5){background:var(--peripheral-four)}.monitor div:nth-of-type(2){background:var(--peripheral-three)}.monitor iframe{position:absolute;height:800%;width:800%;top:50%;left:50%;transform:translate(-50%,-50%) scale(.125)}.monitor__arm{--width: calc(4 * var(--cm));--depth: calc(4 * var(--cm));--height: calc(30 * var(--cm));--z: calc(80 * var(--cm))}.monitor__arm--main{--x: calc(6 * var(--cm));top:65%}.monitor__arm--portrait{--x: calc(20 * var(--cm));--rotate-cuboid-z: 30;top:10%}.monitor__arm div{background:var(--peripheral-four)}.monitor__arm div:nth-of-type(3),.monitor__arm div:nth-of-type(5){background:var(--peripheral-four)}.monitor__arm div:nth-of-type(1){background:var(--peripheral-one)}.mac{--width: calc(20 * var(--cm));--height: calc(5 * var(--cm));--depth: calc(20 * var(--cm));--z: calc(60 * var(--cm));--x: calc(44 * var(--cm));top:10%}.mac div{background:var(--mac-three)}.mac div:nth-of-type(1){background:var(--mac-one)}.mac div:nth-of-type(3){background:var(--mac-two)}.keyboard{--depth: calc(38 * var(--cm));--width: calc(14 * var(--cm));--height: calc(2 * var(--cm));--z: calc(1 * var(--cm))}.keyboard div{background:var(--peripheral-two)}.keyboard div:nth-of-type(1){background:var(--peripheral-one)}.keyboard__keys{--depth: calc(36 * var(--cm));--width: calc(12 * var(--cm));--height: calc(3 * var(--cm));--z: calc(1.5 * var(--cm));--x: calc(1 * var(--cm));--y: calc(1 * var(--cm))}.keyboard__keys div{background:#999}.keyboard__keys div:nth-of-type(5):after{content:"";position:absolute;top:0%;left:0%;transform-origin:0% 0%;width:calc((36 * var(--cm)) * 1vmin);height:calc((12 * var(--cm)) * 1vmin);transform:rotate(270deg) translate(-100%);background:url(https://assets.codepen.io/605876/keychron-keys.png?width=338&height=109&format=auto);background-size:cover}.keyboard__base{transform-style:preserve-3d;height:calc((38 * var(--cm)) * 1vmin);width:calc((14 * var(--cm)) * 1vmin);top:50%;left:60%;position:absolute;transform:translate3d(0,-50%,calc((66 * var(--cm)) * 1vmin))}.mousemat{height:260%;width:200%;background:#000;position:absolute;top:50%;left:50%;transform:translate3d(-50%,-50%,calc(var(--cm) * .1vmin))}.mouse{--depth: calc(6 * var(--cm));--width: calc(10 * var(--cm));--height: calc(4 * var(--cm));--z: calc(2 * var(--cm));top:-40%;left:20%}.mouse div{background:var(--peripheral-three)}.mouse div:nth-of-type(1){background:var(--peripheral-one)}.mouse div:nth-of-type(2),.mouse div:nth-of-type(3){background:var(--peripheral-four)}.mouse div:nth-of-type(5):after{content:"";height:25%;width:30%;background:#80e619;position:absolute;top:50%;left:25%;transform:translate(-50%,-50%)}.bear-canvas{--width: calc(60 * var(--cm));--height: calc(60 * var(--cm));--depth: calc(2 * var(--cm));--z: calc(80 * var(--cm));--x: calc(168 * var(--cm));--y: var(--cm)}.bear-canvas div{background:#f2f2f2;filter:brightness(1);transition:filter var(--transition)}.bear-canvas div:nth-of-type(1){background:linear-gradient(#ffffff40,#ffffff40),url(https://assets.codepen.io/605876/avatar.png),#fafafa;background-size:75%;background-position:center;background-repeat:no-repeat;filter:brightness(1) grayscale(1)}.bear-canvas div:nth-of-type(2):after{content:"";height:100%;width:100%;background:#00000080;filter:blur(var(--blur));position:absolute;top:10%;left:-5%}.window{width:calc((114 * var(--cm)) * 1vmin);background:linear-gradient(40deg,transparent 20%,rgba(255,255,255,.5),transparent 50%),linear-gradient(40deg,transparent 50%,rgba(255,255,255,.25),transparent 60%),#d1f3fa40;height:calc((95 * var(--cm)) * 1vmin);position:absolute;transform:rotateX(90deg) translate3d(calc((22 * var(--cm)) * 1vmin),calc((102 * var(--cm)) * 1vmin),calc((18 * var(--cm)) * 1vmin));transform-origin:50% 0%}.window__frame--top,.window__frame--middle,.window__frame--bottom{--depth: calc(4 * var(--cm));--width: calc(115 * var(--cm));--height: calc(4 * var(--cm))}.window__frame--top div,.window__frame--middle div,.window__frame--bottom div{background:#fafafa}.window__frame--top div:nth-of-type(6),.window__frame--middle div:nth-of-type(6),.window__frame--bottom div:nth-of-type(6){background:#e6e6e6}.window__frame--top{bottom:0}.window__frame--middle{top:60%}.window__frame--left,.window__frame--right{--depth: calc(95 * var(--cm));--width: calc(4 * var(--cm));--height: calc(4 * var(--cm))}.window__frame--left div,.window__frame--right div{background:#fafafa}.window__frame--left div:nth-of-type(6),.window__frame--right div:nth-of-type(6){background:#e6e6e6}.window__frame--right{right:0}.blinds{height:100%;width:100%;position:absolute;top:0;left:0;transform:translateZ(calc((-10 * var(--cm)) * 1vmin)) rotate(180deg)}.blinds:after{content:"";background:#8080801a;height:100%;width:100%;position:absolute;top:0;left:0;transform-origin:50% 0%;transition:transform calc(2 * var(--transition)) var(--transition);transform:scaleY(var(--dark))}.blind{height:10%;width:100%;position:absolute;top:-5%;left:0;background:var(--blind);transform-origin:50% 50%;transition:transform calc(2 * var(--transition)) var(--transition),background var(--transition);transform:translateY(calc((var(--index) * (100 * var(--dark))) * 1%)) rotateX(calc((-85 + (var(--dark) * 83)) * 1deg))}.plant{height:calc((14 * var(--cm)) * 1vmin);width:calc((14 * var(--cm)) * 1vmin);position:absolute;transform:translate3d(calc((208 * var(--cm)) * 1vmin),calc((6 * var(--cm)) * 1vmin),calc((146 * var(--cm)) * 1vmin))}.plant__plant{transition:filter var(--transition);filter:brightness(1);height:calc((50 * var(--cm)) * 1vmin);position:absolute;bottom:50%;left:50%;transform-origin:50% 100%;transform:translate(-50%) rotateX(-90deg) translate3d(0,calc((var(--cm) * 10) * -1vmin),0) rotateY(calc(var(--r, 0) * 1deg))}.plant__plant:nth-of-type(2){--r: 90}.plant__plant:nth-of-type(3){--r: 220}.plant__pot{--height: calc(10 * var(--cm));--width: calc(14 * var(--cm));--depth: calc(14 * var(--cm));--z: calc(6 * var(--cm))}.plant__pot div{background:var(--pot-three)}.plant__pot div:nth-of-type(1){background:var(--pot-two)}.plant__pot div:nth-of-type(3){background:var(--pot-one)}.plant__pot div:nth-of-type(5){background:#111}.chair__base{opacity:calc(1 - var(--zoomed));height:calc((66 * var(--cm)) * 1vmin);width:calc((66 * var(--cm)) * 1vmin);position:absolute;top:50%;left:50%;transform:translate3d(-30%,-70%,calc((2 * var(--cm)) * 1vmin)) rotate(-25deg)}.chair__shadow{background:#000000bf;height:115%;width:115%;border-radius:50%;filter:blur(calc(1.5 * var(--blur)));position:absolute;top:50%;left:50%;transform:translate(-55%,-45%)}.chair__wheel{--height: calc(6 * var(--cm));--width: calc(6 * var(--cm));--depth: calc(6 * var(--cm));--z: calc(3 * var(--cm));--x: calc(30 * var(--cm));top:50%;left:50%;margin-left:calc((-3 * var(--cm)) * 1vmin);margin-top:calc((-3 * var(--cm)) * 1vmin)}.chair__wheel--one{--starting-rotation: 0}.chair__wheel--two{--starting-rotation: 72}.chair__wheel--three{--starting-rotation: 144}.chair__wheel--four{--starting-rotation: 216}.chair__wheel--five{--starting-rotation: 288}.chair__wheel div{background:var(--peripheral-three)}.chair__wheel div:nth-of-type(1),.chair__wheel div:nth-of-type(2){background:#000}.chair__spine{--height: calc(30 * var(--cm));--width: calc(6 * var(--cm));--depth: calc(6 * var(--cm));--z: calc(20 * var(--cm));top:50%;left:50%;margin-left:calc((-3 * var(--cm)) * 1vmin);margin-top:calc((-3 * var(--cm)) * 1vmin)}.chair__spine div{background:#000}.chair__spine div:nth-of-type(1){background:var(--peripheral-four)}.chair__leg{--height: calc(4 * var(--cm));--width: calc(30 * var(--cm));--depth: calc(6 * var(--cm));--z: calc(8 * var(--cm));--x: calc(18 * var(--cm));top:50%;left:50%;margin-left:calc((-15 * var(--cm)) * 1vmin);margin-top:calc((-3 * var(--cm)) * 1vmin)}.chair__leg--one{--starting-rotation: 0}.chair__leg--two{--starting-rotation: 72}.chair__leg--three{--starting-rotation: 144}.chair__leg--four{--starting-rotation: 216}.chair__leg--five{--starting-rotation: 288}.chair__leg div{background:var(--mac-one)}.chair__leg div:nth-of-type(1),.chair__leg div:nth-of-type(2){background:var(--mac-three)}.chair__seat{--height: calc(10 * var(--cm));--width: calc(50 * var(--cm));--depth: calc(40 * var(--cm));--z: calc(32 * var(--cm));top:50%;left:50%;margin-left:calc((-25 * var(--cm)) * 1vmin);margin-top:calc((-20 * var(--cm)) * 1vmin)}.chair__seat div{background:var(--chair-one)}.chair__seat div:nth-of-type(1),.chair__seat div:nth-of-type(2){background:var(--chair-accent-one)}.chair__wing{--height: calc(10 * var(--cm));--width: calc(50 * var(--cm));--depth: calc(16 * var(--cm));--z: calc(34 * var(--cm));top:50%;left:50%;margin-left:calc((-25 * var(--cm)) * 1vmin)}.chair__wing--right{margin-top:calc((-28 * var(--cm)) * 1vmin);--rotate-cuboid-x: -15}.chair__wing--right div:nth-of-type(2){background:var(--chair-accent-one);border:calc((1 * var(--cm)) * 1vmin) solid var(--chair-accent-two)}.chair__wing--left{margin-top:calc((12 * var(--cm)) * 1vmin);--rotate-cuboid-x: 15}.chair__wing--left div:nth-of-type(1){background:var(--chair-accent-one);border:calc((1 * var(--cm)) * 1vmin) solid var(--chair-accent-two)}.chair__wing div{background:var(--chair-two)}.chair__back{--height: calc(66 * var(--cm));--depth: calc(48 * var(--cm));--width: calc(10 * var(--cm));--z: calc(64 * var(--cm));--rotate-cuboid-y: 10;right:0%;top:50%;margin-top:calc((-24 * var(--cm)) * 1vmin)}.chair__back div{background:var(--chair-three)}.chair__back div:nth-of-type(1),.chair__back div:nth-of-type(2){background:var(--chair-two);border:calc((1 * var(--cm)) * 1vmin) solid var(--chair-accent-two)}.chair__back div:nth-of-type(3):after{content:"";position:absolute;top:25%;left:50%;transform:translate(-50%,-50%);height:40%;width:40%;filter:brightness(1);transition:filter var(--transition);background:url(https://assets.codepen.io/605876/avatar.png);background-size:contain;background-repeat:no-repeat}.chair__top{height:100%;width:100%;position:absolute;animation-name:spin;animation-iteration-count:infinite;animation-timing-function:linear;animation-duration:calc(var(--spin, 0) * 1s)}@keyframes spin{to{transform:rotate(360deg)}}.chair__headrest{--height: calc(20 * var(--cm));--depth: calc(40 * var(--cm));--width: calc(10 * var(--cm));--z: calc(100 * var(--cm));top:50%;right:-5%;margin-top:calc((-20 * var(--cm)) * 1vmin)}.chair__headrest div{background:var(--chair-two)}.chair__headrest div:nth-of-type(1),.chair__headrest div:nth-of-type(2){border:calc((1 * var(--cm)) * 1vmin) solid var(--chair-accent-two)}.chair__headrest div:nth-of-type(5){background:var(--chair-three)}.chair__armrest--horizontal{--height: calc(4 * var(--cm));--width: calc(30 * var(--cm));--depth: calc(8 * var(--cm));--z: calc(52 * var(--cm));left:20%}.chair__armrest--horizontal--right{top:-5%}.chair__armrest--horizontal--left{bottom:-5%}.chair__armrest--horizontal div{background:var(--chair-four)}.chair__armrest--horizontal div:nth-of-type(1){background:var(--chair-three)}.chair__armrest--vertical{--height: calc(20 * var(--cm));--depth: calc(6 * var(--cm));--width: calc(6 * var(--cm));--z: calc(40 * var(--cm));left:35%}.chair__armrest--vertical--right{top:-4%}.chair__armrest--vertical--left{bottom:-4%}.chair__armrest--vertical div{background:var(--chair-three)}.chair__armrest--vertical div:nth-of-type(1){background:var(--chair-one)}div.tp-dfwv{z-index:100;transform:translateZ(50vmin)}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}