*{box-sizing:border-box;margin:0;padding:0}input,button,textarea,select{font:inherit}html{scroll-behavior:smooth}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}.grid-gap-2{display:grid;gap:2rem}.spc-mb-2{margin-bottom:2rem}.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%);height:4rem}@media (max-width: 768px){.spc-header{height:auto;padding:1rem 0}}.spc-nav{display:flex;align-items:center;justify-content:space-between;height:100%;padding-inline:1.5rem}@media (max-width: 768px){.spc-nav{flex-direction:column;gap:.8rem}}.spc-nav-link{position:relative;color:#fff;text-decoration:none;font-weight:500;font-size:clamp(1rem,1.13rem + .348vw,1.1rem)}.spc-nav-link:first-child{margin-right:2rem}.spc-logo{max-width:4.9rem}.spc-nav-link:after{content:"";position:absolute;left:0;bottom:-6px;width:0%;height:2px;background-color:#fff;transform:scale(0);transform-origin:left;transition:all .3s ease}.spc-nav-link:hover:after{transform:scale(1);width:100%}.spc-nav-link:focus-visible,.spc-logo:focus-visible{outline:2px solid #fff;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:69rem}.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-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;padding-left:1rem}.spc-copy-btn{font-size:clamp(.9rem,2.75vw,1rem);border:none;border-left:1px solid #cecfd1;background:none;font-weight:500;cursor:pointer;padding:.5em .8em}.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{padding:.6rem 1rem}.spc-summary{font-weight:800;cursor:pointer;font-size:1.1rem}.spc-summary:hover{color:#000000a6}.spc-accordion-children{display:flex;flex-direction:column;padding-block:.7em;gap:1rem;width:100%;align-items:center}.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-footer{background-color:#0c0c0c;padding:.75rem 0;text-align:center;color:#8c8c8c;border-top:2px solid hsl(0,0%,15%);font-style:italic}.css-code-block{background:#1e1e1e;color:#d4d4d4;padding:1rem;font-family:monospace;font-size:.9rem;border-bottom-left-radius:8px;border-bottom-right-radius:8px;margin-bottom:1rem;letter-spacing:1px;line-height:1.8;white-space:pre-wrap;overflow-x:auto!important;word-wrap:break-word!important}.css-selector{color:#569cd6;font-weight:700}.css-value{color:#ce9178}.css-brace{color:#d4d4d4}.css-comment{color:#ce9178;font-style:italic}code[class*=language-]{white-space:pre-wrap!important;word-wrap:break-word!important;line-height:1.8!important}pre[class*=language-]{scrollbar-color:#888 #1e1e1e!important;scrollbar-width:thin!important}.tabs-container{border:2px solid #d8d8d8;border-radius:7px}.tabs-header{background-color:#f3f4f7;border-radius:6px 6px 0 0;display:flex;justify-content:space-between;align-items:center}.tab-btn{padding:.5rem 1rem;background:none;border:none;outline:none;cursor:pointer;font-size:.9rem;transition:color .2s ease}.tab-btn:hover{color:#333}.tab-btn.active:first-child{border-top-left-radius:7px}.tab-btn.active{color:#000;background-color:#fff;font-weight:600}.tab-content{border-radius:0 0 8px 8px}.tab-panel{animation:fadeIn .3s ease-in-out}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.copy-btn{font-size:.9rem;border:none;border-left:1px solid #cecfd1;background:none;padding:.5em .8em;font-weight:500;cursor:pointer}code[class*=language-],pre[class*=language-]{color:#f8f8f2;background:none;text-shadow:0 1px rgba(0,0,0,.3);font-family:Consolas,Monaco,Andale Mono,Ubuntu Mono,monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}pre[class*=language-]{padding:1em;margin:.5em 0;overflow:auto;border-radius:.3em}:not(pre)>code[class*=language-],pre[class*=language-]{background:#272822}:not(pre)>code[class*=language-]{padding:.1em;border-radius:.3em;white-space:normal}.token.comment,.token.prolog,.token.doctype,.token.cdata{color:#8292a2}.token.punctuation{color:#f8f8f2}.token.namespace{opacity:.7}.token.property,.token.tag,.token.constant,.token.symbol,.token.deleted{color:#f92672}.token.boolean,.token.number{color:#ae81ff}.token.selector,.token.attr-name,.token.string,.token.char,.token.builtin,.token.inserted{color:#a6e22e}.token.operator,.token.entity,.token.url,.language-css .token.string,.style .token.string,.token.variable{color:#f8f8f2}.token.atrule,.token.attr-value,.token.function,.token.class-name{color:#e6db74}.token.keyword{color:#66d9ef}.token.regex,.token.important{color:#fd971f}.token.important,.token.bold{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}.spc-error-page{min-height:100vh;display:flex;align-items:center;justify-content:center;background-color:#0c0c0c;color:#fff;overflow:hidden;padding:4rem 1rem;box-sizing:border-box}.spc-404{font-size:clamp(5rem,12vw,10rem);margin:0;font-weight:900;line-height:1;letter-spacing:-.04em;color:#fff;text-shadow:0 6px 20px rgba(10,20,40,.6),0 0 30px rgba(255,255,255,.06);position:relative}.spc-msg{margin:1rem 0 2rem;font-size:clamp(1rem,2.2vw,1.4rem);color:#ffffffeb;max-width:80ch;margin-left:auto;margin-right:auto}.spc-home-btn{display:inline-block;text-decoration:none;background:#311818;color:#fff;border:1px solid #ff6e6e;padding:.8rem 1.2rem;border-radius:999px;font-weight:700;transition:transform .18s cubic-bezier(.2,.9,.2,1),box-shadow .18s ease,filter .18s ease}.spc-home-btn:hover,.spc-home-btn:focus{transform:translateY(-4px) scale(1.02)}.spc-blink{display:inline-block;margin-left:2px;animation:spc-blink 1s step-start infinite;font-weight:900;color:var(--accent)}@keyframes spc-blink{50%{opacity:0}}