body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif}.app{height:100%;min-height:100vh;padding:3.75vw 0}.app__inner{grid-template-columns:1fr;grid-template-areas:"title""preview""controls";justify-items:center;max-width:1000px;margin:0 auto;padding:20px;display:grid}@media (width>=800px){.app__inner{grid-template-columns:1fr 2fr;grid-template-areas:"title preview""controls controls"}}header{grid-area:title}.logo{max-width:400px}.logo svg{width:100%}.preview-paragraph{width:calc(100% - 2rem);max-width:37.5rem;margin:0 auto 3.75vw;line-height:1.4}.controls{grid-area:controls;grid-template-areas:"color-input-text""color-input-link""color-input-bg""underline-control";justify-content:center;align-items:center;display:grid}@media (width>=800px){.controls{grid-template:"color-input-text color-input-text.result-card-link-text.color-input-link color-input-link"1fr".result-card-text-bg.underline-control.result-card-link-bg."1fr". . .color-input-bg. . ."1fr/.5fr .5fr .5fr 1fr .5fr .5fr .5fr}}.color-input{margin-bottom:.5rem;margin-right:1rem;display:flex}.color-input label{font-weight:700}.color-input label span{display:block}.color-input .color-input__inputs-wrapper{display:flex}.color-input [type=text]{max-width:10rem;padding:.1rem .25rem;font-size:1rem}.color-input--text{grid-area:color-input-text}.color-input--link{grid-area:color-input-link}.color-input--bg{grid-area:color-input-bg}.underline-control{text-align:center;grid-area:underline-control}.Results{border:1px solid #000;max-width:18rem;margin:2rem auto;padding:1rem;list-style-type:none}.Results li{margin-bottom:.5rem}.Results small{display:block}@media (width>=800px){.Results{display:none}}.result-card-wrapper{position:relative}.result-card{z-index:1;display:none;position:relative}@media (width>=800px){.result-card{display:block}}.result-card{clip-path:polygon(0% 0%,100% 0%,50% 100%);text-align:center;background:#d3d3d3;width:150px;margin:0 20px;padding:10px 20px 20px}.result-card h2{margin:0 0 10px;font-size:1.2rem}.result-card h2 span{display:block}.result-card--link-text{grid-area:result-card-link-text}@media (width>=800px){.result-card--link-text:before{content:"";opacity:.5;background-image:url("data:image/svg+xml,%3csvg%20data-name='Layer%201'%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20186%2055.55'%3e%3cpath%20fill='%23202020'%20d='M186%2022.27H32.05V0L0%2027.77l32.05%2027.78V33.27H186'/%3e%3c/svg%3e");background-repeat:no-repeat;background-size:cover;width:110px;height:33px;display:block;position:absolute;top:50%;left:-20px;transform:rotate(0)}.result-card--link-text:after{content:"";z-index:0;opacity:.5;background-image:url("data:image/svg+xml,%3csvg%20data-name='Layer%201'%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20186%2055.55'%3e%3cpath%20fill='%23202020'%20d='M0%2033.27h153.95v22.28L186%2027.78%20153.95%200v22.27H0'/%3e%3c/svg%3e");background-repeat:no-repeat;background-size:cover;width:110px;height:33px;display:block;position:absolute;top:50%;right:20px;transform:rotate(0)}}.result-card--bg-text{grid-area:result-card-text-bg}@media (width>=800px){.result-card--bg-text:before{content:"";opacity:.5;background-image:url("data:image/svg+xml,%3csvg%20data-name='Layer%201'%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20186%2055.55'%3e%3cpath%20fill='%23202020'%20d='M186%2022.27H32.05V0L0%2027.77l32.05%2027.78V33.27H186'/%3e%3c/svg%3e");background-repeat:no-repeat;background-size:cover;width:110px;height:33px;display:block;position:absolute;top:-10px;left:50px;transform:rotate(60deg)}.result-card--bg-text:after{content:"";z-index:0;opacity:.5;background-image:url("data:image/svg+xml,%3csvg%20data-name='Layer%201'%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20186%2055.55'%3e%3cpath%20fill='%23202020'%20d='M0%2033.27h153.95v22.28L186%2027.78%20153.95%200v22.27H0'/%3e%3c/svg%3e");background-repeat:no-repeat;background-size:cover;width:110px;height:33px;display:block;position:absolute;top:110px;right:0;transform:rotate(60deg)}}.result-card--bg-link{grid-area:result-card-link-bg}@media (width>=800px){.result-card--bg-link:before{content:"";opacity:.5;background-image:url("data:image/svg+xml,%3csvg%20data-name='Layer%201'%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20186%2055.55'%3e%3cpath%20fill='%23202020'%20d='M186%2022.27H32.05V0L0%2027.77l32.05%2027.78V33.27H186'/%3e%3c/svg%3e");background-repeat:no-repeat;background-size:cover;width:110px;height:33px;display:block;position:absolute;top:-10px;left:50px;transform:rotate(120deg)}.result-card--bg-link:after{content:"";z-index:0;opacity:.5;background-image:url("data:image/svg+xml,%3csvg%20data-name='Layer%201'%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20186%2055.55'%3e%3cpath%20fill='%23202020'%20d='M0%2033.27h153.95v22.28L186%2027.78%20153.95%200v22.27H0'/%3e%3c/svg%3e");background-repeat:no-repeat;background-size:cover;width:110px;height:33px;display:block;position:absolute;top:110px;right:130px;transform:rotate(120deg)}}.ResultEmoji{cursor:help}.underline-control__toggle{color:#fff;text-align:center;border:0;border-radius:16px;height:32px;padding:4px 16px;font-size:16px;transition:background-color .2s ease-in;position:relative;box-shadow:inset 0 0 1px 2px #0003}.underline-control__toggle:before{content:"";width:28px;height:28px;transition:transform .2s ease-in;display:block;position:absolute;top:2px;left:calc(50% - 16px)}@media (prefers-reduced-motion:reduce){.underline-control__toggle:before{transition-duration:0s}}.underline-control__toggle:before{filter:drop-shadow(0 1px 2px #0000004d);background-color:#d3d3d3;border-radius:50%}.underline-control__toggle .enabled,.underline-control__toggle .disabled{transition:opacity .1s ease-in .1s;position:relative}@media (prefers-reduced-motion:reduce){.underline-control__toggle .enabled,.underline-control__toggle .disabled{transition-duration:0s;transition-delay:0s}}.underline-control__toggle .enabled,.underline-control__toggle .disabled{pointer-events:none;left:0}.underline-control__toggle[aria-checked=true]{background-color:#000}.underline-control__toggle[aria-checked=true]:before{transform:translate(24px)}.underline-control__toggle[aria-checked=true] .enabled{opacity:1}.underline-control__toggle[aria-checked=true] .disabled{opacity:0}.underline-control__toggle[aria-checked=false]{background-color:#666}.underline-control__toggle[aria-checked=false]:before{transform:translate(-20px)}.underline-control__toggle[aria-checked=false] .enabled{opacity:0}.underline-control__toggle[aria-checked=false] .disabled{opacity:1}footer{text-align:center;padding:20px}