*{box-sizing:border-box;margin:0;padding:0}input,button,textarea,select{font:inherit}body{font-family:system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol;line-height:1.6;color:#000;font-size:1rem}.spc-button{background:#000;color:#fff;font-weight:600;padding:.6em 1.2em;cursor:pointer;outline:none;border:none;transition:background-color .15s cubic-bezier(.4,0,.2,1);border-radius:4px}.spc-button:hover{background-color:#0d0d0de6}.spc-button:focus-visible{outline:2px solid #000;outline-offset:2px}.spc-page-title{font-size:clamp(1.4rem,1.122rem + 1.391vw,2.2rem);margin:.8em 0;text-align:center;font-weight:900}.spc-title-secondary{font-size:clamp(1.2rem,1.196rem + .522vw,1.5rem);margin-bottom:1.2rem;font-weight:700}.spc-wrapper{max-width:78rem;margin-inline:auto}.spc-flex-center-between{display:flex;justify-content:space-between;align-items:center}.spc-ph-1-5{padding-inline:1.5rem}.spc-ph-1{padding-inline:1rem}.spc-column-2{display:grid;grid-template-columns:repeat(1,1fr)}@media (width > 980px){.spc-column-2{grid-template-columns:repeat(2,1fr)}}.spc-column-3{display:grid;grid-template-columns:repeat(1,1fr)}@media (width > 700px){.spc-column-3{grid-template-columns:repeat(2,1fr)}}@media (width > 980px){.spc-column-3{grid-template-columns:repeat(3,1fr)}}.spc-gap-4{gap:4rem}.spc-gap-3{gap:3rem}.spc-gap-2{gap:2rem}.spc-gap-1{gap:1rem}.spc-mb-3{margin-bottom:3rem}.spc-pb-3{padding-bottom:3rem}.spc-pb-5{padding-bottom:5rem}.spc-text-center{text-align:center}.spc-w-full{width:100%}.spc-m-1{margin:1rem}.spc-h-14{height:14rem}.spc-radius-0-5{border-radius:.5rem}.spc-landing-bg{background-color:#0c0c0c}.spc-cards-section-title{color:#fff;font-weight:900;text-align:center;padding-bottom:2rem;font-size:clamp(1.5rem,1.152rem + 1.739vw,2.5rem)}.spc-comming-soon{height:50vh;display:flex;justify-content:center;align-items:center}.spc-header{background-color:#0c0c0c;border-bottom:2px solid hsl(0,0%,15%)}.spc-logo{display:inline-block;font-weight:800;color:#fff;text-decoration:none;cursor:pointer;font-size:clamp(1.2rem,1.13rem + .348vw,1.4rem);padding:1rem 1.5rem}.spc-logo:focus-visible{outline-offset:-7px}.spc-hero{display:flex;flex-direction:column;padding-block:4rem;gap:1rem;align-items:center;background-image:linear-gradient(90deg,hsl(0,0%,7%) 1px,transparent 1px),linear-gradient(0deg,hsl(0,0%,7%) 1px,transparent 1px);background-size:30px 30px;border-bottom:2px solid hsl(0,0%,15%);margin-bottom:2.5rem}.spc-hero-svg{width:100%;max-width:64rem}.spc-hero-description{color:#8c8c8c;text-align:center;font-size:clamp(1rem,.861rem + .696vw,1.5rem);max-width:85vw;line-height:1.6;width:50ch}.spc-svg-text-group{font-size:10rem;line-height:1;font-weight:900;text-anchor:middle;letter-spacing:-.04em}.spc-hero-svg-stroke{stroke:#ffb770;fill:none;stroke-width:8px}.spc-hero-svg-text{stroke:#000;stroke-width:3px;fill:#fff;paint-order:stroke fill}.spc-card{padding-block:1.8rem;padding-inline:1.5rem;text-decoration:none;border:hsl(0,0%,15%) solid 1px;border-radius:10px;transition:all .25s}.spc-card:hover{transform:scale(1.1)}.spc-card-image-wrapper{max-width:4rem;margin-bottom:.6rem}.spc-card-image{width:100%}.spc-card-heading{font-weight:600;color:#fff;font-size:clamp(1.1rem,1.03rem + .348vw,1.2rem)}.spc-card-description{color:#8c8c8c;margin-top:.2rem}.spc-gen-code-container{letter-spacing:1px;background-color:#1c1c1c;color:#cecfd1;padding:1rem .8rem;border-radius:0 0 .375rem .375rem;line-height:1.8;white-space:pre-wrap;word-wrap:break-word}.spc-gen-code-header{border:solid 1px #cecfd1;display:flex;justify-content:space-between;align-items:center;border-radius:.375rem .375rem 0 0}.spc-gen-code-header h3{font-size:clamp(1rem,2.75vw,1.1rem);padding:.5em}.spc-copy-btn{font-size:clamp(.9rem,2.75vw,1rem);border:none;border-left:1px solid #cecfd1;background:none;padding:.5em;font-weight:500;cursor:pointer}.spc-copy-btn:hover{color:#6f6e73}.spc-gen-preview-section{display:flex;flex-direction:column;order:1;width:100%;justify-content:flex-start;gap:1rem}.spc-gen-preview{display:flex;justify-content:center;align-items:center;height:24rem;width:100%;border:solid 1px #cecfd1;border-radius:.375rem}.spc-gen-container{display:flex;gap:1rem;flex-direction:column;align-items:flex-start;width:100%}@media (min-width: 768px){.spc-gen-container{flex-direction:row}}.spc-gen-options-wrapper{display:flex;flex-direction:column;border:solid 1px #cecfd1;border-radius:.375rem;width:100%;order:2}@media (min-width: 768px){.spc-gen-options-wrapper{width:50%;order:-1}}.spc-input-value,.spc-input-select,.spc-input-text,.spc-color-picker-input{border:none;height:2rem;border-radius:.375rem;background-color:#e5e7eb;padding-inline:.5rem;outline:1px solid #e5e7eb;outline-offset:1px;transition:all .2s ease-in}.spc-input-value:focus-visible,.spc-input-select:focus-visible,.spc-input-text:focus-visible,.spc-color-picker-input:focus-visible{background-color:#fff;outline-offset:2px}.spc-color-picker-input{width:6rem}.spc-input-value{width:7rem}.spc-input-text{width:9rem}.spc-input-select{width:auto}.spc-input-checked{width:1.2rem;height:1.2rem;outline:2px solid #e5e7eb;outline-offset:2px}.spc-input-checked:focus-visible{outline-color:#0006}.spc-input-range{height:1rem;background-color:#edf1f4;-webkit-appearance:none;-moz-appearance:none;appearance:none;border-radius:1rem;outline:2px solid transparent;outline-offset:2px;box-shadow:2px 2px 2px #0000001a,-2px -2px 5px #fff,inset 2px 2px 2px #0000001a;overflow:hidden;cursor:pointer}.spc-input-range:focus-visible{outline:2px solid rgb(0,0,0,.4)}.spc-input-range::-webkit-slider-thumb,.spc-input-range::-moz-range-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#0074cf;height:12px;width:12px;border-radius:50%}.spc-color-picker-spr{position:relative}.spc-color-swatch{width:3rem;height:2.2rem;border-radius:8px;border:3px solid #fff;box-shadow:0 0 0 1px #0000001a,inset 0 0 0 1px #0000001a;cursor:pointer}.spc-color-picker-popover{position:absolute;top:calc(100% + 2px);right:3px;border-radius:7px;box-shadow:0 6px 12px #00000026;z-index:1}.spc-input-wrapper{display:flex;align-items:center;justify-content:space-between;width:100%;gap:.5rem}.spc-input-wrapper--column{display:flex;width:100%;flex-direction:column;gap:.6rem}.spc-accordion-children{display:flex;flex-direction:column;padding-block:.7em;gap:1rem;width:100%;align-items:center}.spc-accordion{display:flex;justify-content:space-between;align-items:center;padding:.3rem 1rem;font-size:1.2rem;font-weight:800;cursor:pointer}.spc-accordion-icon{font-size:1.8rem}.spc-hex-page-wrapper{display:flex;justify-content:center;align-items:center;height:calc(100vh - 4.4rem)}.spc-hex-container{display:flex;flex-direction:column;background-color:#fff;gap:1rem;box-shadow:0 2px 2px 1px #0000001a,-2px 0 2px 1px #0000001a;border-radius:.375rem;padding:1.5rem 2rem}.spc-hex-title{font-weight:600;font-size:clamp(1.1rem,-.6rem + 5vw,1.3rem);text-shadow:1px 1px 1px rgba(0,0,0,.6);text-align:center}.spc-hex-copy-btn{font-size:.8rem;border:none;background:none;padding:.5em;font-weight:600;cursor:pointer}.spc-hex-copy-btn:hover{color:#6b7280}.spc-boxshadow-card{display:flex;justify-content:center;align-items:center;height:150px;border:none;background:none;cursor:pointer;transition:font-weight .2s ease-in}.spc-boxshadow-card:hover{font-weight:900}.spc-gradients-copy-btn{border:none;padding:.5em .8em;border-top-left-radius:8px;font-weight:500;cursor:pointer;background:#fff;box-shadow:1px 1px 1px 2px #0000004d;transition:all .2s ease-in}.spc-gradients-copy-btn:hover{color:#6b7280}.spc-cursors-copy-btn{border:none;background:#fff;padding:1.7em 5em;border-radius:.5em;font-weight:500;box-shadow:1px 1px 3px #0000004d;transition:all .2s ease-in}.spc-cursors-copy-btn:hover{background-color:#f2f1f14d;box-shadow:1px 1px 7px #0000004d}.spc-tab-container{border:2px solid #d8d8d8;border-radius:7px}.spc-tab-buttons-wrapper{background-color:#f3f4f7;border-radius:6px 6px 0 0;display:flex;justify-content:space-between;align-items:center}.spc-tab-preview-btn,.spc-tab-code-btn{background:none;color:#000;border:none;padding:.5rem 1rem;cursor:pointer}.spc-tab-preview-btn{border-top-left-radius:7px}.spc-tab-code{background-color:#1c1c1c;color:#cecfd1;height:100%;width:100%;border-radius:0 0 7px 7px;overflow-x:scroll;padding:1rem;font-size:.9rem;line-height:1.8}.spc-tab-copy-btn{font-size:.9rem;border:none;border-left:1px solid #cecfd1;background:none;padding:.5em .8em;font-weight:500;cursor:pointer}.spc-footer{background-color:#0c0c0c;padding:.75rem 0;text-align:center;color:#8c8c8c;border-top:2px solid hsl(0,0%,15%);font-style:italic}