@font-face{font-family:Synonym;src:url('./../assets/webfonts/Synonym.woff2') format('woff2'),url('./../assets/webfonts/Synonym.woff') format('woff'),url('./../assets/webfonts/Synonym.ttf') format('truetype');font-weight:200 700;font-display:swap;font-style:normal}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}*,:after,:before{box-sizing:inherit;margin:0;padding:0}ol,ul{list-style:none}html{box-sizing:border-box;scrollbar-color:#000 transparent;scrollbar-width:thin}img{width:auto;max-width:100%;height:auto;display:block}button,input,textarea{color:inherit;font-size:inherit;font-family:inherit}h1,h2,h3,h4,h5,h6{color:var(--headings);font-weight:600;font-family:var(--tipo)}h2{font-size:.9rem;line-height:normal;margin-bottom:0}a,a:visited{font-weight:500;color:var(--links);text-decoration-color:var(--links-border);text-decoration-thickness:.1rem;text-decoration-style:solid;transition:.1s ease-in-out}a:focus,a:hover{color:var(--links);text-decoration-color:var(--links)}:root{--color:#606060;--fondo:#F7F7F7;--headings:#404040;--links:#111;--links-border:#ddd;--borders:#969696;--border-light:#E7E7E7;--escala:.95rem;--inter:1.5;--max-width:660px;--bradius:6px;--tipo:"Synonym",sans-serif}body{color:var(--color);background:var(--fondo);font-size:var(--escala);line-height:var(--inter);font-style:normal;font-weight:400;font-family:var(--tipo)}#main{width:100%;max-width:var(--max-width);margin:4rem auto;padding:0 1rem}.shareThis{top:20px;bottom:0;right:20px;position:fixed}#intro{gap:20px;display:flex;flex-direction:column;align-items:center;text-align:center;margin:calc(1em + 1.5625vw) auto}#intro h1{font-size:1rem;font-weight:600;text-indent:-9999px}#intro .logo{gap:6px;display:flex;align-items:center}#intro .logo img{width:auto;height:35px}#intro p{max-width:350px}#output{width:100%;height:300px;max-width:var(--max-width);padding:8.5em;text-align:center;background:#fff;border:1px solid var(--border-light);border-radius:var(--bradius);display:flex;align-items:center;justify-content:center;position:relative;transition:120ms ease-in-out;overflow:hidden}#output::before{content:"Preview";display:inline-block;color:#fff;font-weight:500;padding:3px 6px;border-radius:4px;font-size:10px;background:rgba(50,50,50,.4);position:absolute;top:10px;right:10px;backdrop-filter:blur(5px)}#preview{cursor:pointer;line-height:normal;position:relative}.shadow-effect{border:1px solid #000}#cssCode{font-size:80%;padding:1.4em;color:var(--border-light);background:#444;font-family:Menlo,Consolas,Monaco,Adwaita Mono,Liberation Mono,Lucida Console,monospace;position:relative;border-radius:var(--bradius);white-space:pre-wrap;overflow-x:hidden;overflow-y:auto;max-height:250px}.finalCode{position:relative;margin-bottom:2rem}#copyAllBtn{z-index:1;display:inline-block;color:#111;font-weight:500;padding:3px 6px;border-radius:4px;font-size:12px;background:#fff;border:none;position:absolute;top:10px;right:10px;cursor:pointer}#copyAllBtn:focus,#copyAllBtn:hover{color:#fff;background:#000}#copyAllBtn:focus{outline:rgba(33,149,243,.6) solid 3px}#copyAllBtn:active{background:#323232}#copyAllBtn.copied{color:#000;background:#10dd81}.setting{padding:1.3rem;background:#fff;border:1px solid var(--border-light);border-radius:var(--bradius);position:relative;height:100%}.setting::after{content:"∘ ∘ ∘";top:1%;right:10px;display:block;color:#ddd;position:absolute}.setting header{margin-bottom:6px}.setting header p{font-size:90%}.grid-doble{width:100%;height:100%;gap:1.5rem;display:grid;grid-template-columns:repeat(1,1fr);margin:calc(1em + 1.5625vw) auto}.grid-doble .columna{width:100%;gap:1.5rem;display:flex;flex-direction:column}input[type=text]{width:100%;border:1px solid var(--borders);padding:8px;border-radius:4px;box-shadow:0 2px 2px 0 rgba(0,0,0,.1) inset}input[type=text]:focus{border-color:var(--headings);outline:rgba(33,149,243,.6) solid 3px}.setting .options{display:flex;gap:5px;flex-direction:column;margin:1rem auto 1.5rem}.style-grid{width:100%;gap:1.2rem;display:flex;flex-wrap:wrap;align-items:center;margin-top:1.5rem;justify-content:flex-start}@media only screen and (min-width:700px){.setting{padding:1.5rem}.grid-doble{grid-template-columns:repeat(2,1fr)}.style-grid{justify-content:space-around}}.setting .load{--button-size:65px;width:var(--button-size);height:var(--button-size);display:flex;align-items:center;flex-direction:column;justify-content:center;position:relative;border-radius:6px;background:#fff;border:1px solid var(--border-light);cursor:pointer}.setting .load span{font-size:8px;font-weight:500;color:#999}.load[aria-pressed=true]{background:#e2f2ff;color:#111!important;border:2px solid #2196f3}.load[aria-pressed=true] span{color:#111}.load[aria-pressed=true] img{filter:saturate(0) brightness(.4) contrast(.9);mix-blend-mode:color-burn}.load:focus-visible{background:#fff;border:2px solid #2196f3;outline:0}.setting .load img{width:auto;height:40px;flex-shrink:0}label{user-select:none}.footprint{opacity:.6;margin-top:.6rem;font-size:.8rem}.container{gap:6px;display:flex;align-items:center;position:relative;cursor:pointer;user-select:none}.container input{position:absolute;clip:rect(1px,1px,1px,1px);padding:0;border:0;height:1px;width:1px;overflow:hidden}.container input:focus+.checkmark{background:#fff;border-color:#2196f3;outline:rgba(33,149,243,.6) solid 3px}.container input:disabled+.checkmark{opacity:.3;background:#eee}.container:hover input:disabled+.checkmark{border-color:#eee;background:#eee}.checkmark{position:relative;top:0;left:0;height:20px;width:20px;background-color:#fff;border:2px solid #ccc;border-radius:4px}.container:hover input~.checkmark{background-color:#ccc}.container input:checked~.checkmark{background-color:#111;border-color:#111}.checkmark:after{content:"";position:absolute;display:none}.container input:checked~.checkmark:after{display:block}.container .checkmark:after{left:6px;top:2px;width:5px;height:10px;border:solid #fff;border-width:0 2px 2px 0;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)}#footer{font-size:90%;margin:calc(1em + 1.5625vw) auto}.tooltip{position:absolute;background-color:#333;color:#fff;padding:6px 10px;border-radius:4px;font-size:14px;pointer-events:none;white-space:nowrap;z-index:1000;opacity:0;transition:opacity .2s ease-in-out}.tooltip.visible{opacity:1}.scaleControls{gap:3px;bottom:5px;right:5px;position:absolute;display:flex;align-items:center;font-size:70%}.scaleControls #scaleData{color:#000;background:#fff;padding:0 5px;border-radius:4px;height:18px}.scaleControls button{width:18px;height:18px;padding:1px;display:flex;font-weight:500;align-items:center;justify-content:center;background:#111;color:#fff;border:0;border-radius:4px;cursor:pointer}.scaleControls button:disabled{opacity:.3}.scaleControls button:hover{filter:brightness(60%)}.scaleControls button:focus-visible{outline:rgba(33,149,243,.6) solid 3px}