@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}}*{-webkit-tap-highlight-color:transparent;box-sizing:border-box;outline-color:transparent}body{align-items:center;background:#fafafa;display:flex;justify-content:center;min-height:100vh}:root{--speed: .25;--scale-step: .09;--base-width: 92;--base-height: calc(var(--base-width) * 1.83333333333);--pop-height: 60;--slide-distance: 60;--base-slide: calc(var(--base-width) * 1)}.bears{height:calc(var(--base-height) * 1px);margin:0;position:relative;width:calc(var(--base-width) * 1px)}.bears:after{background:#bfbfbf;content:"";height:4px;left:50%;position:absolute;top:100%;transform:translate(-50%);width:200%}.bear{--bear-color: hsl(25, 80%, calc(var(--lightness) * 1%));--claw-color: hsl(25, 80%, calc((var(--lightness) - 20) * 1%));--shirt-color: hsl(var(--shirt-hue), 50%, 50%);height:100%;position:absolute;width:100%}.bear .bear-body{fill:var(--bear-color)}.bear .bear-shirt{fill:var(--shirt-color)}.bear .bear-claw{fill:var(--claw-color)}.bear .bear-foot{stroke:var(--claw-color)}.bear__half{position:absolute;height:50%;left:0;overflow:hidden;width:100%}.bear__half svg{height:200%;position:absolute;width:100%}.bear__half--top{top:0}.bear__half--top svg{top:0}.bear__half--bottom{bottom:0}.bear__half--bottom svg{bottom:0}.bear__container,.bear__dummy-container{height:100%;left:0;position:absolute;top:0;width:100%}.bear__container{transform:scale(calc(1 - ((var(--bear-index)) * var(--scale-step))));transform-origin:bottom}.bear__dummy{--bear-color: hsl(25, 80%, calc(var(--lightness) * 1%));--claw-color: hsl(25, 80%, calc((var(--lightness) - 20) * 1%));--shirt-color: hsl(var(--shirt-hue), 50%, 50%);height:100%;left:0;position:absolute;top:0;transform:scale(calc(1 - ((var(--bear-index) + 1) * var(--scale-step))));transform-origin:bottom center;width:100%}[type=checkbox],[type=reset]{display:none}label{cursor:pointer;display:none}[for=reset]{display:block;height:44px;position:fixed;right:1rem;top:1rem;transition:transform calc(var(--speed) * 1s) ease;width:44px}[for=reset]:hover{transform:translateY(-5%) scale(1.1)}[for=reset]:hover svg path{fill:#111}[for=reset] svg{height:44px;width:44px}[for=reset] svg path{transition:fill calc(var(--speed) * 1s) ease;fill:#aaa}input:checked+.bear+input+.bear,input:checked+.bear+.bear{display:block;animation:appear 0s calc(var(--speed) * 5s) both}input:checked+.bear,input:checked+.bear+input:checked+.bear{animation:slideLeft calc(var(--speed) * 1s) forwards,slideOut calc(var(--speed) * 1s) calc(var(--speed) * 6s) forwards;pointer-events:none}input:checked+.bear .bear__half--top,input:checked+.bear+input:checked+.bear .bear__half--top{animation:open calc(var(--speed) * 2s) calc(var(--speed) * 1s) forwards}input:checked+.bear .bear__dummy-container,input:checked+.bear+input:checked+.bear .bear__dummy-container{animation:move calc(var(--speed) * 2s) calc(var(--speed) * 3s) forwards,appear 0s calc(var(--speed) * 5s) reverse forwards}@keyframes slideLeft{to{transform:translate(calc((var(--base-slide) * -1px) + var(--slide-distance) * -1%))}}@keyframes open{0%{transform:translate(0)}33.333333333333336%{transform:translateY(-100%)}66.66666666666667%{transform:translate(-100%,-100%)}to{transform:translate(-100%,100%)}}@keyframes move{0%{transform:translate(0) translate(0)}33.333333333333336%{transform:translateY(calc(var(--pop-height) * -1%)) translate(0)}66.66666666666667%{transform:translateY(calc(var(--pop-height) * -1%)) translate(calc((var(--base-slide) * 1px) + var(--slide-distance) * 1%))}to{transform:translateY(calc(var(--pop-height) * -1%)) translate(calc((var(--base-slide) * 1px) + var(--slide-distance) * 1%),calc(var(--pop-height) * 1%))}}@keyframes slideOut{0%{transform:translate(calc((var(--base-slide) * -1px) + var(--slide-distance) * -1%))}to{opacity:0;transform:translate(calc((var(--base-slide) * -1px) + var(--slide-distance) * -2%))}}@keyframes appear{0%{transform:scale(0)}}