@layer normalize{html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}}*{box-sizing:border-box}:root{--pink: #fea4d7;--pink-bg: #fef5fb;--pink-light: #fee6f4;--pink-dark: #eb60af;--button-bg: #fff;--stroke: #eff0f0;--text: #2e3333;--number: #a9adad;--color: #c3c6c6;--heart-stroke: #c3c6c6;--stroke-active: #26292b;--transition: .2s}body{display:grid;place-items:center;min-height:100vh;font-family:Roboto,sans-serif;background:url(https://assets.codepen.io/605876/heart-outline-bg.svg);background-position:calc(var(--x, 50) * 1%) calc(var(--y, 50) * 1%)}body:after{content:"";position:absolute;opacity:var(--backdrop-opacity, 0);inset:0;z-index:-1;background:url(https://assets.codepen.io/605876/heart-bg.svg),var(--pink-bg);background-position:calc(var(--x, 50) * 1%) calc(var(--y, 50) * 1%)}button{--hovered: 0;cursor:pointer;padding:0;margin:0;border:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;position:relative;display:none}button:hover{--hovered: 1}.stroked{stroke:var(--stroke-active)}.bear-one--light{fill:#a2642a}.bear-one--dark{fill:#5d3918}.bear-two--light{fill:#fff9d7}.bear-two--dark{fill:#fed65d}.bear-pad--light{fill:#d99c73}.bear-pad--dark{fill:#efd4c3}.heart{overflow:visible!important;height:100%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);opacity:calc(1 - var(--hovered, 0))}.heart__outline{stroke:var(--stroke-active);stroke-width:1.25px}.heart__baseline{stroke:var(--color);stroke-width:1.25px}.heart__body{fill:var(--pink)}.heart__shine{fill:var(--pink-light)}.heart__shadow{fill:var(--pink-dark)}.transformer{--font-size: 32px;--border-width: 4px;--border-radius: 10px;--padding-v: 26px;--padding-h: 36px;--padding-t: 10px;--padding-b: 4px;font-size:var(--font-size);position:relative;outline:transparent}.transformer *{display:inline-block}.transformer__container{display:inline-flex;align-items:center;justify-content:center;position:relative;overflow:hidden}.transformer__paws{height:100%;width:80%;position:absolute;border:var(--border-width) solid #ffc0cb;border-left:0;border-right:0;z-index:2}.transformer__front{padding:var(--padding-v) calc(var(--padding-t) + var(--padding-b)) var(--padding-v) var(--padding-h);padding:0 calc(var(--padding-t) + var(--padding-b)) 0 var(--padding-h);border:var(--border-width) solid var(--stroke);border-radius:var(--border-radius) 0 0 var(--border-radius);border-right:0;z-index:2}.transformer__middle{padding:var(--padding-v) var(--padding-t);padding:0 var(--padding-t);border:var(--border-width) solid var(--stroke);border-radius:0;border-left:0;border-right:0}.transformer__back{border:var(--border-width) solid var(--stroke);border-radius:0 var(--border-radius) var(--border-radius) 0;padding:var(--padding-v) var(--padding-h) var(--padding-v) var(--padding-b);padding:0 var(--padding-h) 0 var(--padding-b);border-left:0;z-index:2}.transformer__number{font-size:var(--font-size);height:var(--font-size);color:var(--color);transform:translate(6px)}.transformer__text{color:var(--text);font-size:var(--font-size);line-height:var(--font-size);opacity:calc(1 - var(--hovered, 0));transition:transform var(--transition),opacity var(--transition);transform:translateY(calc(var(--hovered, 0) * 80%))}.transformer__outline{position:absolute;height:100%;width:90%;left:50%;top:0;border:var(--border-width) solid var(--stroke);border-left:0;border-right:0;z-index:10;transform:translate3d(-50%,0,0)}.transformer__segment{background:var(--button-bg);display:flex;align-items:center;justify-content:center;height:92px}.transformer__feature{height:var(--font-size);position:relative;width:var(--font-size);transition:transform var(--transition);transform:translate(-6px) translate(calc(var(--hovered, 0) * 100%))}.number{position:absolute;left:0}.number__place{height:var(--font-size);display:inline-block;position:relative;width:18px}.slap{position:absolute;height:calc(var(--font-size) * 2);width:calc(var(--font-size) * 2);top:50%;left:38%;transform:translate(-50%,-50%);z-index:4;display:none;overflow:visible!important}.paw{height:calc(var(--font-size) * 2);position:absolute;top:0%;left:50%;transform:translate(-50%);width:var(--font-size)}.paw--right{z-index:5;top:125%;left:55%}.bear-paw{position:absolute;height:150%;opacity:var(--hovered, 0);transition:var(--transition);overflow:visible!important;left:50%;top:0;transform:translate(-50%,-14%)}.wiggle{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);height:100px;overflow:visible!important;display:none;z-index:10}.dashed{height:100%;overflow:visible!important}.dashed__container{display:none;top:50%;left:50%;height:100px;position:absolute;transform:translate(-50%,-50%);z-index:11}.geo{height:100%;overflow:visible!important;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.geo__wrap{display:none;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:12;height:20px;width:20px}.burst{display:none;height:30px;width:30px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) rotate(calc(var(--rotate, 0) * 1deg)) translateY(calc(var(--translate, 0) * -1px));z-index:12}.burst__line{position:absolute;height:30px;top:50%;left:50%;transform:translate(-50%,-50%) rotate(calc((-45 + (var(--index) * 30)) * 1deg));transform-origin:50% 100%;overflow:visible!important;z-index:12}