:root{--clr-primary: oklch(55.6% .23 302deg);--clr-accent: oklch(68% .12 184deg);--clr-bg: oklch(15% .02 0deg);--clr-text: oklch(95% .01 0deg);--space-md: 1.5rem;--radius: .75rem;--transition: .4s cubic-bezier(.16, 1, .3, 1);--canvas-opacity: 1}*,*:after,*:before{box-sizing:border-box}*{padding:0;margin:0}html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{min-height:100dvh;overflow-x:hidden;text-rendering:optimizespeed}ul,ol{list-style:none}a{color:inherit;text-decoration:none}img,picture,video,canvas,svg{display:block;max-width:100%;height:auto}button,input,textarea,select{font:inherit;background:none;border:none;outline:none}button{cursor:pointer}@media (prefers-reduced-motion: reduce){html:focus-within{scroll-behavior:auto}*,*:before,*:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}}::selection{color:#12080b;background-color:#8f3fe0;-webkit-background-clip:text;background-clip:text}body{display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:Montserrat,system-ui,-apple-system,sans-serif;font-size:1rem;color:#f5ecee;background:#000}:focus-visible{outline:2px solid oklch(68% .12 184deg);outline-offset:4px;transition:outline-offset .2s ease}@font-face{font-family:Montserrat-Fallback;src:local("Arial");size-adjust:107%;ascent-override:95%}@font-face{font-family:Montserrat;font-style:normal;font-weight:400;src:url(/assets/montserrat-v31-latin-regular-BLhwKU8k.woff2) format("woff2");font-display:swap}@font-face{font-family:Source Code Pro;font-style:normal;font-weight:400;src:url(/assets/source-code-pro-regular-CjP85Q_F.woff2) format("woff2");font-display:swap}h1,h2,h3,h4{margin-bottom:1.5rem;font-family:Gill Sans,Gill Sans MT,sans-serif;font-weight:700;line-height:1.1;color:#f5ecee;letter-spacing:-.02em}h1{font-family:Source Code Pro,monospace;font-size:clamp(.875rem,.8rem + .4vw,1.1rem);color:#8f8f8f;text-transform:uppercase;letter-spacing:.02ch}h2{font-size:clamp(2.44rem,5.5vw,3.5rem)}h3{font-size:clamp(1.75rem,3.5vw,2.5rem)}h4{font-size:clamp(1.25rem,2.5vw,1.75rem)}p{max-width:65ch;margin-bottom:2rem;font-family:Montserrat,system-ui,-apple-system,sans-serif;font-size:1rem;line-height:1.6;text-wrap:balance}.app-container{display:flex;flex-direction:column;width:100vw;height:100dvh;background:#12080b}@media (min-width: 768px){.app-container{flex-direction:row;overflow:hidden}}.order-overlay{display:flex;flex-direction:row;align-items:center;justify-content:center;position:fixed;top:0;right:0;bottom:0;left:0;z-index:500;background:#000000e6}.order-card{padding:2rem;margin:.5rem;text-align:center;background:#12080b;border:1px solid oklch(55.6% .23 302deg);border-radius:.5rem}.order-card h2{color:#8f3fe0}.order-summary{padding:1rem;margin:1.5rem 0;background:#1a1a1a;border-radius:.5rem}.order-summary .summary-item{display:flex;justify-content:space-between;margin-bottom:.5rem;color:#fcfcfc}.color-preview{width:150px;height:20px}.order-card__actions{display:flex;gap:.5rem;margin-top:1.5rem}.order-card__actions button{flex:1}.fade-enter-active,.fade-leave-active{transition:opacity .4s cubic-bezier(.16,1,.3,1)}.fade-enter-from,.fade-leave-to{opacity:0}.header{display:flex;flex-direction:row;align-items:center;justify-content:space-between;width:100%;max-width:1200px;padding-inline:1rem;margin-inline:auto;position:fixed;top:0;z-index:100;min-height:70px;padding:.5rem 1rem 0}.header__logo{width:60px;height:60px;font-size:3rem;line-height:.9;color:#8f3fe0;text-decoration:none;transition:color .4s cubic-bezier(.16,1,.3,1),background .4s cubic-bezier(.16,1,.3,1)}.header__logo:hover,.header__logo:active,.header__logo:focus{color:#fcfcfc}button{padding:1rem;font-weight:700;cursor:pointer;border-radius:.5rem;transition:background .8s cubic-bezier(.16,1,.3,1)}.btn-primary{color:#fcfcfc;background:#8f3fe0;border:none}.btn-primary:hover{background:#04b0a1}.btn-secondary{color:#fcfcfc;background:#8f8f8f;border:none}.controls{display:flex;flex-direction:column;gap:1.5rem;width:100%;padding:1.5rem;background:#222222e6;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.controls h3{margin:0;color:#fcfcfc}.controls h4{margin-bottom:1rem;font-size:.85rem;color:#8f8f8f;text-transform:uppercase}.controls p{margin-bottom:0;font-size:.85rem}.controls__params{display:flex;flex-direction:row;align-items:start;justify-content:space-between;column-gap:2rem;margin-top:0}.controls .field{margin-bottom:1rem}.controls .field__label-group{display:flex;flex-direction:row;align-items:center;justify-content:space-between;margin-bottom:.5rem}.controls .field__label-group label{font-size:.85rem;color:#8f8f8f}.controls .field__label-group input[type=number]{width:60px;padding:.25rem;color:#fcfcfc;text-align:center;background:#12080b;border:1px solid oklch(25% 0 271deg / .9);border-radius:.5rem}.controls .color-grid{display:flex;flex-wrap:wrap;gap:1rem}.controls .color-grid .color-btn{width:32px;height:32px;cursor:pointer;border:2px solid transparent;border-radius:50%;transition:transform .2s cubic-bezier(.4,0,.2,1)}.controls .color-grid .color-btn.is-active{border-color:#fcfcfc;transform:scale(1.2)}.controls .info-box{margin-bottom:1rem}.controls .info-box strong{color:#04b0a1}.controls .btn-primary{width:100%;text-transform:uppercase;letter-spacing:.02ch}@media (min-width: 768px){.controls{width:300px;border-left:1px solid oklch(65% 0 0deg)}.controls__params{display:flex;flex-direction:column;align-items:start;justify-content:space-between;gap:.5rem}.controls h4,.controls p{font-size:1rem}.controls .color-grid{flex-wrap:nowrap}}.viewer{flex:1;width:100%;min-height:30dvh;background:transparent}@media (min-width: 768px){.viewer{height:100%;min-height:400px}}.loader{display:flex;flex-direction:column;align-items:center;justify-content:center;position:fixed;top:0;left:0;z-index:500;width:100%;height:100%;background:#000;transition:opacity .8s cubic-bezier(.16,1,.3,1),visibility .8s cubic-bezier(.16,1,.3,1)}.loader--hidden{visibility:hidden;opacity:0}.loader__text{margin-bottom:1rem;font-family:Source Code Pro,monospace;font-size:1rem;color:#8f8f8f;text-transform:uppercase;letter-spacing:.02ch}.loader__bar{position:relative;width:150px;height:5px;overflow:hidden;background:#ffffff1a;border-radius:.5rem}.loader__bar:before{position:absolute;top:0;left:0;width:100%;height:800%;content:"";background:linear-gradient(transparent,oklch(100% 0 0deg),transparent);opacity:.2;animation:loader 1.5s ease infinite}@keyframes loader{0%{transform:translate(-100%) rotate(-45deg)}to{transform:translate(100%) rotate(-45deg)}}.loader__progress{width:0%;height:100%;background:#8f3fe0;transition:width .4s cubic-bezier(.16,1,.3,1)}.webgl{position:fixed;top:0;left:0;z-index:1;width:100vw;height:100dvh;filter:hue-rotate(60deg) saturate(1.5) contrast(1.2);outline:none}.webgl-overlay{position:fixed;top:0;left:0;z-index:1;width:100%;height:100%;pointer-events:none;background:linear-gradient(200deg,transparent,oklch(55.6% .23 302deg),transparent,oklch(68% .12 184deg),transparent);opacity:.1}.hero{display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;z-index:1;height:100vh;padding:2rem;color:#fff;pointer-events:none}.hero a,.hero button{pointer-events:all}.hero__content{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;max-width:1200px;padding-inline:1rem;margin-inline:auto;row-gap:8rem;padding:0 1rem}@media (min-width: 768px){.hero__content{display:grid;grid-template-columns:repeat(2,1fr);column-gap:4rem;align-items:center}}.hero__title{font-family:Gill Sans,Gill Sans MT,sans-serif;font-size:clamp(3.25rem,8vw,5rem);font-weight:700;line-height:.9;color:#000;text-shadow:-1px -1px 1px oklch(55.6% .23 302deg),-1px 1px 1px oklch(55.6% .23 302deg),1px 1px 1px oklch(99% 0 198deg),1px -1px 1px oklch(99% 0 198deg);text-transform:uppercase}.hero__title span{font-family:Source Code Pro,monospace;color:#fcfcfc;text-shadow:none}.hero__subtitle{width:100%}.hero__subtitle p{max-width:400px;margin:0 auto;line-height:1.2;text-shadow:1px 1px .5rem oklch(0% 0 0deg)}@media (min-width: 768px){.hero__subtitle{justify-items:end}.hero__subtitle p{max-width:300px}}