.code-output{width:100%}.macos-window{border-radius:12px;box-shadow:0 0 10px rgba(0,0,0,.2)}.macos-header{padding-left:.5rem;height:30px;display:flex;align-items:center;gap:.4rem;position:relative}.macos-header__title{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}.macos-button{height:12px;width:12px;border-radius:50%;display:inline-block}.macos-button.macos-button-red{background-color:#ff3838}.macos-button.macos-button-yellow{background-color:#ffd325}.macos-button.macos-button-green{background-color:#47ec0b}.copy-button{width:100%;height:40px;border-radius:12px;cursor:pointer;font-weight:500;font-size:1.2rem;border:none}.copy-button,.copy-button:hover{background-color:var(--secondary)}.copy-button:hover{transform:scale(1.02)}.copy-button:active{transform:scale(.98);background-color:var(--secondary)}@media only screen and (min-width:768px){.code-output{max-width:400px}}@media only screen and (min-width:992px){.code-output{max-width:500px}}@media only screen and (min-width:1200px){.code-output{max-width:800px}}.darkmode-switch{font-size:17px;position:relative;display:inline-block;width:3.5em;height:2em}.darkmode-switch input{opacity:0;width:0;height:0}.darkmode-slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:var(--secondary);transition:.5s;border-radius:30px}.darkmode-slider:before{position:absolute;content:"";height:1.4em;width:1.4em;border-radius:50%;left:10%;bottom:15%;box-shadow:inset 8px -4px 0 0 #fff000;background:var(--secondary);transition:.5s}input:checked+.darkmode-slider{background-color:var(--secondary)}input:checked+.darkmode-slider:before{transform:translateX(100%);box-shadow:inset 15px -4px 0 15px #fff000}.header{position:relative;padding:1rem}.header .header-content .header-logo-container{display:flex;align-items:center;gap:.5rem}.header .header-content .header__description{padding:1rem .5rem}.header .header-icons-container{position:absolute;top:1rem;right:.5rem;display:flex;align-items:center;gap:.5rem}.header .header-icons-container .header-icons{display:flex;align-items:center;gap:.5rem;list-style:none}.header .header-icons-container .header-icons li a{text-decoration:none;color:inherit;font-size:1.7rem;display:flex;align-items:center;justify-content:center}.header .header-icons-container .header-icons li a:hover{color:var(--accent)}.theme-icon{width:30px;height:30px;border-radius:50%;border:3px solid transparent;outline:1px solid var(--text);rotate:45deg;overflow:hidden;display:flex;cursor:pointer;transition:all .3s ease-in-out}.theme-icon:hover{rotate:-45deg;outline:2px solid var(--accent);border:1px solid transparent}.theme-icon-inner-1,.theme-icon-inner-2{height:100%;width:100%}.theme-icon-inner-1{background-color:var(--primary)}.theme-icon-inner-2{background-color:var(--secondary)}.theme-switch{position:relative;display:inline-block;width:min-content;height:2em}.theme-list{position:absolute;top:100%;left:50%;transform:translateX(-50%);z-index:1;display:flex;flex-direction:column;gap:.5rem;visibility:hidden;list-style-type:none;padding:.5rem;background-color:rgba(64,64,64,.15);border:1px solid hsla(0,0%,100%,.5);border-radius:12px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);filter:saturate(1.2);box-shadow:0 4px 30px rgba(0,0,0,.1);opacity:0;transition:all .3s ease-in-out}.theme-switch:hover .theme-list{visibility:visible;opacity:1}.theme-list li input[type=radio]{display:none}.theme-list li label{cursor:pointer;position:relative}.theme-list li label:hover:after{content:attr(data-color-name);white-space:nowrap;height:100%;padding:.2rem .4rem;border-radius:12px;border:1px solid var(--primary);background-color:var(--background);display:flex;align-items:center;position:absolute;top:0;right:110%}.preview,.preview-canvas{display:flex;justify-content:center;align-items:center;flex-direction:column;width:100%;height:100%}.preview-canvas{padding:2rem;border:2px solid hsla(0,0%,100%,.5);background-position:50%;background-size:cover;background-repeat:no-repeat;margin:auto}.preview-canvas,.preview-card{border-radius:12px;box-shadow:0 0 10px 0 rgba(0,0,0,.2)}.preview-card{border:1px solid hsla(0,0%,100%,.5);-webkit-backdrop-filter:blur(22px);backdrop-filter:blur(22px);padding:1rem;color:#fefefe;text-shadow:0 0 5px #000000d3;max-width:400px;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:1rem}.preview-avatar{border-radius:50%;padding:.4rem;border:1px solid hsla(0,0%,100%,.5);overflow:hidden;width:120px;height:120px;box-shadow:0 0 5px #000000d3}.preview-avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%}.preview-name{font-size:1.4rem;font-weight:700;text-align:center}.preview-description{text-align:justify}.preview-divider{width:100%;height:1px;background-color:hsla(0,0%,100%,.5)}.preview-button-container{gap:1rem}.preview-button,.preview-button-container{display:flex;justify-content:center;align-items:center}.preview-button{height:40px;width:120px;border-radius:10px;border:none;font-size:1.2rem;font-weight:700;cursor:pointer;color:#eee;gap:.4rem}.preview-button.follow{background-color:#5dbe77}.preview-button.block{background-color:#ff4741}.preview-button:hover{transform:scale(1.05)}.preview-button:active{transform:scale(.95)}.loader{height:75px;width:75px;margin:auto;display:grid;background:radial-gradient(farthest-side,#000 15%,#0000 18%),radial-gradient(50% 100% at 50% 160%,#fff 95%,#0000) top/100% 50%,radial-gradient(50% 100% at 50% -60%,#fff 95%,#0000) bottom/100% 50%;background-repeat:no-repeat}.loader:before{content:"";background:inherit;opacity:.6;animation:l1 1s infinite}@keyframes l1{to{transform:scale(3);opacity:0}}.swatch{border-radius:12px;border:2px solid var(--primary);box-shadow:0 0 0 1px rgba(0,0,0,.1);cursor:pointer;background-color:#fff;margin:auto;display:flex;align-items:center;justify-content:center;width:50px;height:50px;display:inline-block;flex:1 1}.color-container{width:100%;height:100%;border-radius:10px}.popover{position:absolute;z-index:2}.cover{position:fixed;top:0;right:0;bottom:0;left:0}.chrome-picker{background-color:hsla(0,0%,100%,.3)!important;backdrop-filter:blur(10px)!important;-webkit-backdrop-filter:blur(10px)!important;box-shadow:0 4px 30px rgba(0,0,0,.1)!important;filter:saturate(1.2)!important;color:#fff!important;border-radius:0 0 12px 12px!important}.chrome-picker label{color:var(--text)!important}.background-settings-container,.settings{display:flex;flex-direction:column;width:100%}.background-settings-container{align-items:center}.background-type-container,.color-picker-container{display:flex;align-items:center;gap:.6rem;width:100%;height:90px}.color-picker-container{justify-content:center}.background-types{width:100%;height:100%;gap:1rem}.background-types,.background-types .background-type{display:flex;align-items:center;justify-content:center}.background-types .background-type{width:100%!important;height:40px;padding:1rem;border:1px solid var(--primary);border-radius:12px;cursor:pointer}.color-settings-container{display:flex;justify-content:center;align-items:center;gap:.6rem;width:100%}.color-settings-container .swatch{width:46vw}.other-settings-container{display:flex;gap:.6rem;width:100%}.other-settings-container label{flex:1 1}.url-input{width:100%;height:50px;border:2px solid var(--primary);border-radius:12px;padding:0 .5rem;outline:none;background-color:transparent;color:var(--text);font-style:italic}.url-input:focus,.url-input:hover{border:2px solid var(--primary);background-color:hsla(0,0%,100%,.2)}.solid-color-picker-container{display:flex}.solid-color-picker-container .swatch{display:block;width:92vw}.mesh-color-picker-container{display:flex;gap:.6rem}.mesh-color-picker-container .swatch{display:block;width:14vw}.linear-color-picker-container{display:flex;gap:.6rem}.linear-color-picker-container .swatch{display:block;width:46vw}.radial-color-picker-container{display:flex;gap:.6rem}.radial-color-picker-container .swatch{display:block;width:46vw}.background-types input[type=radio]{display:none}.background-types input[type=radio]+label:hover{background-color:hsla(0,0%,100%,.2);scale:1.05}.background-types input[type=radio]+label:active{background-color:hsla(0,0%,100%,.2);scale:.95}.background-types input[type=radio]:checked+label{background-color:hsla(0,0%,100%,.2)}.background-types input[type=radio]:checked+label:hover{background-color:hsla(0,0%,100%,.4)}.other-settings-container .range-input{flex:1 1}.other-settings-container .range-input .range-label .input-name{white-space:nowrap}.other-settings-container .range-input .range-value{padding:0 .5rem;border-radius:12px;width:min-content;color:var(--primary)}.other-settings-container input[type=range]{width:100%;-moz-appearance:none;appearance:none;-webkit-appearance:none;background-color:var(--primary);height:10px;border:none;border-radius:5px;outline:none;margin:0;padding:0;cursor:pointer;position:relative}.other-settings-container input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;background-color:var(--accent);width:20px;height:20px;border-radius:25px;border:none;cursor:pointer}.other-settings-container input[type=range]::-moz-range-thumb{background-color:var(--accent);width:20px;height:20px;border-radius:25px;border:none;cursor:pointer}.other-settings-container input[type=range]::-ms-thumb{background-color:var(--accent);width:20px;height:20px;border-radius:25px;border:none;cursor:pointer}.other-settings-container input[type=range]::-ms-fill-lower,.other-settings-container input[type=range]::-ms-fill-upper{background-color:var(--accent);height:10px;border-radius:5px}.background-types input[type=range]:focus{outline:1px solid var(--accent);background-color:var(--primary)}.other-settings-container input[type=range]:focus::-webkit-slider-thumb{outline:1px solid var(--accent);background-color:var(--accent)}.other-settings-container input[type=range]:focus::-moz-range-thumb{outline:1px solid var(--accent);background-color:var(--accent)}.other-settings-container input[type=range]:focus::-ms-thumb{outline:1px solid var(--accent);background-color:var(--accent)}.input-name{font-weight:100}.disabled{position:relative}.disabled:hover:after{content:"Coming soon!";color:var(--accent);font-style:italic;background-color:#0e0e0e;padding:.5rem;white-space:nowrap;border-radius:8px;box-shadow:0 0 5px 0 rgba(0,0,0,.5);position:absolute;top:-2.5rem}@media only screen and (min-width:1200px){.settings{flex-direction:row}.background-settings-container{max-width:700px}.url-input{width:38.5vw}.color-settings-container{flex-direction:column}.color-settings-container .swatch{width:20vw}.other-settings-container{flex-direction:column}.solid-color-picker-container .swatch{width:38.5vw}.mesh-color-picker-container .swatch{width:5.95vw}.linear-color-picker-container .swatch,.radial-color-picker-container .swatch{width:19vw}}.preview-code-container{display:flex;flex-direction:column;width:100%}@media only screen and (min-width:768px){.preview-code-container{flex-direction:row}}