@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}}.cuboid{width:100%;height:100%;position:relative}.cuboid__side:nth-of-type(1){height:calc(var(--thickness) * 1vmin);width:100%;position:absolute;top:0;transform:translateY(-50%) rotateX(90deg)}.cuboid__side:nth-of-type(2){height:100%;width:calc(var(--thickness) * 1vmin);position:absolute;top:50%;right:0;transform:translate(50%,-50%) rotateY(90deg)}.cuboid__side:nth-of-type(3){width:100%;height:calc(var(--thickness) * 1vmin);position:absolute;bottom:0;transform:translateY(50%) rotateX(90deg)}.cuboid__side:nth-of-type(4){height:100%;width:calc(var(--thickness) * 1vmin);position:absolute;left:0;top:50%;transform:translate(-50%,-50%) rotateY(90deg)}.cuboid__side:nth-of-type(5){height:100%;width:100%;transform:translateZ(calc(var(--thickness) * .5vmin));position:absolute;top:0;left:0}.cuboid__side:nth-of-type(6){height:100%;width:100%;transform:translateZ(calc(var(--thickness) * -.5vmin)) rotateY(180deg);position:absolute;top:0;left:0}*,*:after,*:before{box-sizing:border-box;transform-style:preserve-3d;transition:background .1s ease}body{min-height:100vh;display:grid;background:var(--bg);place-items:center;touch-action:none}:root{--base-size: 1vmin;--base-height: 29.25 ;--base-width: 48.75 ;--speed: .4s;--bg: hsl(210, 80%, calc((15 + (var(--on, 0) * 75)) * 1%));--width: calc(var(--base-width) * var(--base-size));--height: calc(var(--base-height) * var(--base-size));--road-one: hsl(0, 0%, calc((40 + (var(--on, 0) * 35)) * 1%));--road-two: hsl(0, 0%, calc((30 + (var(--on, 0) * 35)) * 1%));--road-three: hsl(0, 0%, calc((20 + (var(--on, 0) * 35)) * 1%));--road-four: hsl(0, 0%, calc((10 + (var(--on, 0) * 35)) * 1%));--road-marking-one: hsl(0, 0%, calc((85 + (var(--on, 0) * 15)) * 1%));--road-marking-two: hsl(0, 0%, calc((80 + (var(--on, 0) * 15)) * 1%));--road-marking-three: hsl(0, 0%, calc((75 + (var(--on, 0) * 15)) * 1%));--white-one: hsl(0, 0%, calc((85 + (var(--on, 0) * 10)) * 1%));--white-two: hsl(0, 0%, calc((80 + (var(--on, 0) * 10)) * 1%));--white-three: hsl(0, 0%, calc((75 + (var(--on, 0) * 10)) * 1%));--glass-one: hsl(210, 80%, calc((85 + (var(--on, 0) * 10)) * 1%));--glass-two: hsl(210, 80%, calc((80 + (var(--on, 0) * 10)) * 1%));--glass-three: hsl(210, 80%, calc((75 + (var(--on, 0) * 10)) * 1%));--glass-four: hsl(210, 80%, calc((70 + (var(--on, 0) * 10)) * 1%));--bumper-one: hsl(0, 0%, calc((80 + (var(--on, 0) * 10)) * 1%));--bumper-two: hsl(0, 0%, calc((75 + (var(--on, 0) * 10)) * 1%));--bumper-three: hsl(0, 0%, calc((70 + (var(--on, 0) * 10)) * 1%));--bumper-four: hsl(0, 0%, calc((65 + (var(--on, 0) * 10)) * 1%));--wheel-one: hsl(0, 0%, calc((15 + (var(--on, 0) * 10)) * 1%));--wheel-two: hsl(0, 0%, calc((10 + (var(--on, 0) * 10)) * 1%));--wheel-three: hsl(0, 0%, calc((5 + (var(--on, 0) * 10)) * 1%));--wheel-four: hsl(0, 0%, calc((0 + (var(--on, 0) * 10)) * 1%));--white-four: hsl(0, 0%, calc((70 + (var(--on, 0) * 10)) * 1%));--black-one: hsl(0, 0%, calc((20 + (var(--on, 0) * 10)) * 1%));--black-two: hsl(0, 0%, calc((15 + (var(--on, 0) * 10)) * 1%));--black-three: hsl(0, 0%, calc((10 + (var(--on, 0) * 10)) * 1%));--black-four: hsl(0, 0%, calc((5 + (var(--on, 0) * 10)) * 1%));--hub: hsl(0, 0%, calc((65 + (var(--on, 0) * 25)) * 1%));--glare: rgba(255,255,255,.25);--siren-red: rgba(242,32,13,.25);--siren-blue: rgba(13,147,242,.25);--lamp: hsl(45, 90%, 90%, calc(.75 - calc(var(--on, 0) * .75)));--headlight: hsl(45, 90%, 100%, calc(1 - calc(var(--on, 0) * .5)));--indicator: hsl(35, 90%, 50%, calc(1 - calc(var(--on, 0) * .5)));--taillight: hsl(0, 90%, 50%, calc(1 - calc(var(--on, 0) * .5)));--shift: calc(var(--height) * .1);--bob: calc(var(--width) * .08);--bob-speed: 2s;--shift-speed: 5s}.scene{position:fixed;height:var(--height);width:var(--width);top:50%;left:50%;transform:translate3d(-50%,-50%,100vmin);transform:translate3d(-50%,-65%,100vmin) rotateX(-24deg) rotateY(44deg) rotateX(calc(var(--rotate-x, 0) * 1deg)) rotateY(calc(var(--rotate-y, 0) * 1deg))}.road{position:absolute;bottom:0;width:100%;height:20%;transform:translate3d(0,1px,0)}.car{position:absolute;height:100%;width:100%;animation:bob var(--bob-speed) infinite linear alternate}.car__bob{position:absolute;left:50%;bottom:20%;height:50%;width:50%;transform:translate3d(-50%,0,0);animation:shift var(--shift-speed) infinite linear alternate}@keyframes shift{0%{transform:translate3d(-50%,0,calc(var(--shift) * -1))}to{transform:translate3d(-50%,0,calc(var(--shift) * 1))}}.car>*{position:absolute}.car__shadow{width:100%;height:calc(var(--height) * .4);background:#00000080;bottom:0;transform:translateY(50%) rotateX(90deg) translateZ(1px) scale(1.05,1.1)}.car__headlights{width:25%;height:calc(var(--height) * .5);bottom:0%;left:0;transform:translate(-125%,50%) rotateX(90deg) translateZ(1px);position:relative}.car__headlights:after,.car__headlights:before{content:"";position:absolute;height:50%;width:100%;background:var(--lamp);border-radius:50%;filter:blur(10px)}.car__headlights:after{top:0}.car__headlights:before{bottom:0}.car__wheel{height:calc(var(--height) * .13);width:calc(var(--height) * .13);bottom:0}.car__wheel--f{left:10%}.car__wheel--r{right:10%}.car__wheel--osf,.car__wheel--osr{transform:translateZ(calc(var(--height) * .2))}.car__wheel--nsf,.car__wheel--nsr{transform:translateZ(calc(var(--height) * -.2))}.car__body--bottom{bottom:5%;width:100%;height:40%}.car__body--top{bottom:44.5%;width:60%;height:40%;left:22%}.car__siren{bottom:85%;height:calc(var(--height) * .0725);width:calc(var(--height) * .0725);left:50%}.car__siren>*{position:absolute;top:0;left:0}.car__mirrors{width:5%;height:13%;left:24%;bottom:40%}.car__mirror{height:100%;position:absolute;width:100%}.car__mirror--left{transform:translateZ(calc((var(--height) * .2325) + 2px))}.car__mirror--right{transform:translateZ(calc((var(--height) * -.2325) - 2px))}.car__bumper{height:calc(var(--height) * .05);width:calc(var(--height) * .05);bottom:4%}.car__bumper--front{left:0;transform:translate(-40%)}.car__bumper--rear{right:0;transform:translate(40%)}@keyframes bob{0%{transform:translate(calc(var(--bob) * -.5))}to{transform:translate(calc(var(--bob) * 1.5))}}.body{--thickness: calc(var(--base-height) * .4)}.body--top div{background:var(--white-two)}.body--top div:nth-of-type(1){background:linear-gradient(90deg,transparent 0 20%,var(--white-one) 20% 80%,transparent 80% 100%)}.body--top div:nth-of-type(2){background:transparent}.body--top div:nth-of-type(2):after{content:"";position:absolute;width:100%;height:112%;background:var(--white-two);bottom:0;left:50%;transform:translate(-50%) rotateX(27deg);transform-origin:50% 100%}.body--top div:nth-of-type(2):before{content:"";position:absolute;width:100%;height:112%;background:linear-gradient(55deg,transparent 0 30%,var(--glare) 30% 40%,transparent 40% 45%,var(--glare) 45% 50%,transparent 50% 100%),var(--glass-two);bottom:0;left:50%;transform:translate(-50%) rotateX(27deg) translateZ(1px);transform-origin:50% 100%;--clip: inset(10% 10% 10% 10%);clip-path:var(--clip)}.body--top div:nth-of-type(3){background:var(--white-four)}.body--top div:nth-of-type(4){background-color:transparent}.body--top div:nth-of-type(4):after{content:"";position:absolute;width:100%;height:112%;background:var(--white-two);bottom:0;left:50%;transform:translate(-50%) rotateX(-27deg);transform-origin:50% 100%}.body--top div:nth-of-type(4):before{content:"";position:absolute;width:100%;height:112%;background:linear-gradient(55deg,transparent 0 30%,var(--glare) 30% 40%,transparent 40% 45%,var(--glare) 45% 50%,transparent 50% 100%),var(--glass-two);bottom:0;left:50%;transform:translate(-50%) rotateX(-27deg) translateZ(-1px);transform-origin:50% 100%;--clip: inset(10% 10% 10% 10%);clip-path:var(--clip)}.body--top div:nth-of-type(5){background:var(--white-three);--clip: polygon(0 100%, 20% 0, 80% 0, 100% 100%);clip-path:var(--clip)}.body--top div:nth-of-type(5):after{content:"";background:linear-gradient(var(--white-three),var(--white-three)) 65% 50%/8% 100% no-repeat;background-color:var(--glass-three);position:absolute;height:90%;width:90%;bottom:0;left:50%;transform:translate(-50%);--clip: polygon(0 100%, 20% 0, 80% 0, 100% 100%);clip-path:var(--clip)}.body--top div:nth-of-type(6){background:var(--white-four);--clip: polygon(0 100%, 20% 0, 80% 0, 100% 100%);clip-path:var(--clip)}.body--top div:nth-of-type(6):after{content:"";background:linear-gradient(var(--white-four),var(--white-four)) 35% 50%/8% 100% no-repeat;background-color:var(--glass-four);position:absolute;height:90%;width:90%;bottom:0;left:50%;transform:translate(-50%);--clip: polygon(0 100%, 20% 0, 80% 0, 100% 100%);clip-path:var(--clip)}.body--bottom div{background:var(--black-two)}.body--bottom div:nth-of-type(1){background:linear-gradient(90deg,var(--black-one) 0 22%,var(--white-one) 22% 82%,var(--black-one) 82% 100%);background-color:var(--black-one)}.body--bottom div:nth-of-type(1):after{content:"";background:var(--black-one);position:absolute;top:50%;left:50%;height:99%;width:101%;transform:translate3d(-50%,-50%,-1px)}.body--bottom div:nth-of-type(1):before{content:"382";font-family:sans-serif;font-weight:700;height:30%;width:40%;text-align:center;overflow:hidden;position:absolute;font-size:calc(var(--height) * .1);color:var(--white-one);right:0;bottom:50%;transform:translate3d(50%,50%,2px) rotate(-90deg) translateY(-50%)}.body--bottom div:nth-of-type(2){background:linear-gradient(var(--indicator),var(--indicator)) 95% 50%/5% 25% no-repeat,linear-gradient(var(--indicator),var(--indicator)) 5% 50%/5% 25% no-repeat,linear-gradient(var(--taillight),var(--taillight)) 10% 50%/15% 25% no-repeat,linear-gradient(var(--taillight),var(--taillight)) 90% 50%/15% 25% no-repeat;background-color:var(--black-two)}.body--bottom div:nth-of-type(3){background-color:var(--black-four)}.body--bottom div:nth-of-type(4){background:repeating-linear-gradient(transparent 0 20%,var(--black-four) 20% 40%) 50% 50%/25% 25% no-repeat,linear-gradient(var(--bumper-one),var(--bumper-one)) 50% 50%/35% 25% no-repeat,linear-gradient(var(--indicator),var(--indicator)) 95% 50%/5% 25% no-repeat,linear-gradient(var(--indicator),var(--indicator)) 5% 50%/5% 25% no-repeat,linear-gradient(var(--headlight),var(--headlight)) 10% 50%/15% 25% no-repeat,linear-gradient(var(--headlight),var(--headlight)) 90% 50%/15% 25% no-repeat;background-color:var(--black-two)}.body--bottom div:nth-of-type(5){background:linear-gradient(90deg,var(--black-three) 0 22%,var(--white-three) 22% 82%,var(--black-three) 82% 100%);background-color:var(--black-three)}.body--bottom div:nth-of-type(5):after{content:"";height:75%;width:35%;background:url(https://assets.codepen.io/605876/bear--gold-badge--large.png);background-repeat:no-repeat;background-size:contain;position:absolute;left:35%;top:50%;transform:translateY(-50%)}.body--bottom div:nth-of-type(6){background:linear-gradient(90deg,var(--black-four) 0 18%,var(--white-four) 18% 78%,var(--black-four) 78% 100%);background-color:var(--black-four)}.body--bottom div:nth-of-type(6):after{content:"";height:75%;width:35%;background:url(https://assets.codepen.io/605876/bear--gold-badge--large.png);background-repeat:no-repeat;background-size:contain;position:absolute;left:45%;top:50%;transform:translateY(-50%)}.scene__road{--thickness: calc(var(--base-height))}.scene__road>div:nth-of-type(1){background-color:var(--road-one)}.scene__road>div:nth-of-type(2){background:var(--road-two)}.scene__road>div:nth-of-type(3){background:var(--road-four)}.scene__road>div:nth-of-type(4){background-color:var(--road-two)}.scene__road>div:nth-of-type(5){background:var(--road-three)}.scene__road>div:nth-of-type(6){background:var(--road-four)}.siren--red{--thickness: calc(var(--base-height) * .1);--alpha: .25;transform:translateZ(calc(var(--height) * -.075));--siren-red: hsla(5, 90%, 50%, var(--alpha));animation:flash var(--siren) infinite}.siren--red div{background:var(--siren-red)}.siren--blue{--alpha: .25;--thickness: calc(var(--base-height) * .1);--siren-blue: hsla(210, 90%, 50%, var(--alpha));transform:translateZ(calc(var(--height) * .075));animation:flash var(--siren) infinite reverse}.siren--blue div{background:var(--siren-blue)}.siren--middle{--thickness: calc(var(--base-height) * .05);transform:translateZ(0)}.siren--middle div{background:var(--white-one)}.siren--middle div:nth-of-type(1){background:var(--white-one)}.siren--middle div:nth-of-type(2){background:var(--white-two)}.siren--middle div:nth-of-type(3){background:var(--white-three)}.siren--middle div:nth-of-type(4),.siren--middle div:nth-of-type(5){background:var(--white-four)}.siren--middle div:nth-of-type(6){background:var(--white-three)}.wheel{--thickness: calc(var(--base-height) * .05)}.wheel div{background:var(--wheel-four)}.wheel div:nth-of-type(1){background:var(--wheel-one)}.wheel div:nth-of-type(2){background:var(--wheel-two)}.wheel div:nth-of-type(3){background:var(--wheel-three)}.wheel div:nth-of-type(4){background:var(--wheel-four)}.wheel div:nth-of-type(5){background:linear-gradient(var(--hub),var(--hub)) 50% 50%/35% 35% no-repeat;background-color:var(--wheel-four)}.wheel div:nth-of-type(6){background:linear-gradient(var(--hub),var(--hub)) 50% 50%/35% 35% no-repeat;background-color:var(--wheel-three)}.bumper{--thickness: calc(var(--base-height) * .45)}.bumper div{background:var(--bumper-one)}.bumper div:nth-of-type(1){background:var(--bumper-one)}.bumper div:nth-of-type(2){background:var(--bumper-two)}.bumper div:nth-of-type(3){background:var(--bumper-three)}.bumper div:nth-of-type(4),.bumper div:nth-of-type(5){background:var(--bumper-four)}.bumper div:nth-of-type(6){background:var(--bumper-three)}.mirror{--thickness: calc(var(--base-height) * .075)}.mirror div{background:var(--black-two)}.mirror div:nth-of-type(1){background-color:var(--black-one)}.mirror div:nth-of-type(2){background:linear-gradient(var(--white-one),var(--white-one)) 50% 50%/75% 75% no-repeat;background-color:var(--black-two)}.mirror div:nth-of-type(3){background:var(--black-four)}.mirror div:nth-of-type(4){background-color:var(--black-two)}.mirror div:nth-of-type(5){background:var(--black-three)}.mirror div:nth-of-type(6){background:var(--black-four)}.road__markings{height:100%;width:100%;overflow:hidden}.road__markings--bottom{transform:translateZ(-1px)}.road__markings--bottom:after{content:"";position:absolute;height:100%;width:calc(var(--width) * 2);background:repeating-linear-gradient(270deg,var(--road-marking-three) 0 10%,transparent 10% 15%) 0 50%/100% 5% no-repeat;bottom:0;left:50%;transform:translate3d(-50%,0,0);animation:roll-bottom var(--speed) infinite linear}.road__markings--front{transform:translateZ(-1px)}.road__markings--front:after{content:"";position:absolute;height:calc(var(--base-height) * 1vmin);width:calc(var(--width) * 2);background:repeating-linear-gradient(270deg,var(--road-marking-two) 0 10%,transparent 10% 15%) 0 50%/100% 5% no-repeat;top:0%;left:50%;transform:translate(-50%,-50%) rotate(-90deg) translate3d(-35%,0,-1px);animation:roll-front var(--speed) infinite linear}@keyframes roll-front{to{transform:translate(-50%,-50%) rotate(-90deg) translate3d(-20%,0,-1px)}}.road__markings--back{transform:translateZ(1px)}.road__markings--back:after{content:"";position:absolute;height:calc(var(--base-height) * 1vmin);width:calc(var(--width) * 2);background:repeating-linear-gradient(270deg,var(--road-marking-two) 0 10%,transparent 10% 15%) 0 50%/100% 5% no-repeat;top:0%;left:50%;transform:translate(-50%,-50%) rotate(-90deg) translate3d(-35%,0,1px);animation:roll-back var(--speed) infinite linear}@keyframes roll-back{to{transform:translate(-50%,-50%) rotate(-90deg) translate3d(-50%,0,1px)}}.road__markings--top{transform:translateZ(1px)}.road__markings--top:after{content:"";position:absolute;height:100%;width:calc(var(--width) * 2);background:repeating-linear-gradient(270deg,var(--road-marking-one) 0 10%,transparent 10% 15%) 0 50%/100% 5% no-repeat;bottom:0;left:50%;transform:translate3d(-50%,0,1px);animation:roll-top var(--speed) infinite linear}@keyframes roll-top{to{transform:translate3d(-35%,0,1px)}}.controls{position:fixed;bottom:1rem;right:1rem;display:flex;flex-direction:column}.controls>*+*{margin-top:1rem}button{height:48px;width:48px;cursor:pointer;transform:translateZ(150vmin);-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;background:transparent;outline:transparent}button>svg{position:absolute;height:100%;width:100%;top:0;left:0}button path{fill:hsl(210,80%,calc((90 - (var(--on, 0) * 75)) * 1%))}button svg:nth-of-type(1),button span:nth-of-type(1){display:none}button span{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}[aria-pressed=true] svg:nth-of-type(1),[aria-pressed=true] span:nth-of-type(1){display:block}[aria-pressed=true] svg:nth-of-type(2),[aria-pressed=true] span:nth-of-type(2){display:none}@keyframes roll-bottom{to{transform:translate3d(-65%,0,0)}}@keyframes flash{50%{--alpha: 1}}div.tp-dfwv{z-index:9999}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}