@font-face{font-family:myfont;src:url(/Melon%20Pop.ttf)}:root{--ink-black: #001219;--dark-teal: #005f73;--dark-cyan: #0a9396;--pearl-aqua: #94d2bd;--vanilla-custard: #e9d8a6;--golden-orange: #ee9b00;--burnt-caramel: #ca6702;--rusty-spice: #bb3e03;--oxidized-iron: #ae2012;--brown-red: #9b2226;--primary-color: var(--golden-orange);--secondary-color: var(--pearl-aqua);--accent-color: var(--dark-teal);--bg-color: var(--ink-black);--text-color: var(--vanilla-custard);--panel-bg: rgba(0, 30, 40, .7);--border-color: rgba(148, 210, 189, .2)}.configurator-container{display:flex;height:100%;height:100dvh;width:100%;position:relative;overflow:hidden;font-family:myfont;box-sizing:border-box}.configurator-container *,.configurator-container *:before,.configurator-container *:after{box-sizing:border-box;margin:0;padding:0}.visualizer{width:100%;height:100%;background:radial-gradient(circle at center,#fff,#e0e0e0);display:flex;justify-content:center;align-items:center;position:relative;overflow:hidden}.canvas-wrapper{width:100%;height:100%;display:flex;justify-content:center;align-items:center}#ring-svg{width:80%;max-width:600px;height:auto;filter:drop-shadow(0 10px 20px rgba(0,0,0,.1));transition:transform .5s ease}#ring-svg.rotating{animation:slowSpin 20s linear infinite}@keyframes slowSpin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media (max-width: 768px){#ring-svg.rotating{animation:slowSpinMobile 20s linear infinite}@keyframes slowSpinMobile{0%{transform:translateY(-10%) rotate(0)}to{transform:translateY(-10%) rotate(360deg)}}}@media (max-width: 480px){#ring-svg.rotating{animation:slowSpinSmall 20s linear infinite}@keyframes slowSpinSmall{0%{transform:translateY(-12%) rotate(0)}to{transform:translateY(-12%) rotate(360deg)}}}.bottom-controls{position:absolute;bottom:20px;left:0;right:0;display:flex;flex-direction:column;align-items:center;width:100%;max-width:800px;margin:0 auto;z-index:0;pointer-events:none;padding:0 20px;box-sizing:border-box}.tabs-wrapper{display:flex;align-items:center;justify-content:center;gap:4px;pointer-events:auto;width:auto;max-width:100%}.tabs-container{display:flex;background:#ffffff40;backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);padding:8px;border-radius:50px;box-shadow:0 8px 32px #0000001f,inset 0 1px 1px #fff6;border:1px solid rgba(255,255,255,.3);pointer-events:auto;gap:6px;flex-shrink:1;min-width:0;max-width:100%}.tab-btn{background:transparent;border:none;padding:12px 14px;border-radius:40px;font-family:Lato,sans-serif;font-size:13px;font-weight:500;font-family:myfont;color:#000000b3;cursor:pointer;transition:all .4s cubic-bezier(.25,.8,.25,1);text-transform:uppercase;letter-spacing:.5px;position:relative;overflow:hidden;opacity:1;-webkit-appearance:none;-moz-appearance:none;appearance:none;touch-action:manipulation;text-shadow:0 1px 2px rgba(255,255,255,.3)}.tab-btn:hover{color:#000000e6;background:#ffffff40}.tab-btn.active{background-color:var(--brown-red);color:#fff;box-shadow:0 4px 15px #bb3e034d;transform:translateY(-1px)}.tab-btn.active:after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(135deg,#fff3,#fff0);pointer-events:none}.options-container{display:inline-flex;gap:8px;margin-bottom:12px;pointer-events:auto;background:#fff3;backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);padding:8px 12px;border-radius:16px;box-shadow:0 8px 32px #0000001a,inset 0 1px 1px #ffffff4d;border:1px solid rgba(255,255,255,.25);justify-content:center;flex-wrap:wrap;max-width:100%;box-sizing:border-box}.option-btn{margin:0;background:transparent;box-shadow:none;border:1px solid transparent;cursor:pointer;transition:all .3s ease;-webkit-appearance:none;-moz-appearance:none;appearance:none;touch-action:manipulation}.option-btn[data-type=shape]{font-family:Playfair Display,serif;font-size:12px;font-family:myfont;color:#555;padding:6px 14px;border-radius:8px;width:auto;min-width:40px;height:auto;text-transform:capitalize}.option-btn.text-opt:hover{background-color:#ffffff4d;color:#000}.option-btn.text-opt.active{background-color:var(--brown-red);color:#fff!important;font-weight:700;box-shadow:0 4px 10px #bb3e034d;border-bottom:none;border-radius:30px}.icon-opt{width:38px;height:38px;padding:8px;border-radius:12px;display:flex;align-items:center;justify-content:center;color:#888;transition:all .3s}.icon-opt svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}.icon-opt:hover{background-color:#ffffff4d;color:#333}.icon-opt.active{background-color:var(--brown-red);color:#fff;box-shadow:0 4px 10px #bb3e034d;transform:scale(1.1)}.option-btn.mixed-opt{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:8px 12px;border-radius:12px;min-width:60px;height:auto;font-family:Playfair Display,serif;font-size:12px;font-family:myfont;font-weight:400;color:#555;transition:all .3s ease}.mixed-opt .opt-icon{width:36px;height:36px;display:flex;align-items:center;justify-content:center}.mixed-opt .opt-icon img{width:100%;height:100%;object-fit:contain}.option-btn.mixed-opt:hover{background-color:#ffffff4d;color:#333}.option-btn.mixed-opt.active{background-color:transparent;color:var(--brown-red);border:1px solid var(--brown-red);box-shadow:none}.option-btn.image-opt{width:44px;height:44px;padding:4px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:transparent;border:3px solid transparent;background-clip:padding-box;transition:all .3s}.option-btn.color-swatch{width:32px;height:32px;padding:0;border-radius:50%;overflow:hidden;border:2px solid rgba(255,255,255,.6);box-shadow:0 2px 8px #00000026;background:transparent}.option-btn.color-swatch .color-fill{display:block;width:100%;height:100%;border-radius:50%}.option-btn.color-swatch:hover{transform:scale(1.15);border-color:#ffffffe6;box-shadow:0 4px 12px #0003}.option-btn.color-swatch.active{box-shadow:0 0 0 2px var(--brown-red),0 4px 12px #00000040;transform:scale(1.15)}.option-btn.image-opt img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 2px 4px rgba(0,0,0,.1))}.option-btn.image-opt:hover{background-color:#0000000d;transform:scale(1.05)}.option-btn.image-opt.active{background-color:#ffffff80;border-color:transparent;box-shadow:0 0 0 1px var(--brown-red),0 4px 12px #0000001a;transform:scale(1.1)}.price-pill{position:absolute;bottom:30px;right:30px;background:#ffffff40;backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);padding:8px 20px;border-radius:30px;font-family:myfont;font-size:16px;box-shadow:0 8px 32px #0000001a,inset 0 1px 1px #fff6;font-weight:500;color:#111;border:1px solid rgba(255,255,255,.3);z-index:0;transition:transform .3s ease}.price-pill:hover{transform:scale(1.05)}.rotation-btn{position:relative;top:auto;right:auto;background:#ffffff40;backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);border:1px solid rgba(255,255,255,.3);box-shadow:0 8px 32px #0000001a,inset 0 1px 1px #fff6;border-radius:50%;width:40px;height:40px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .3s ease;z-index:0;color:#555;padding:8px;margin-left:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;touch-action:manipulation}.rotation-btn svg{width:100%;height:100%;stroke:currentColor;transition:transform .5s ease}.rotation-btn:hover{background:#ffffff59;transform:scale(1.1);color:#000}.rotation-btn.active{background:#ffffff4d;color:var(--brown-red);box-shadow:0 0 0 2px var(--brown-red),0 8px 32px #bb3e0326}.rotation-btn.active svg{animation:spinIcon 4s linear infinite}@keyframes spinIcon{to{transform:rotate(360deg)}}@media (max-width: 768px){#ring-svg{width:50%;max-width:240px;transform:translateY(-10%)}.bottom-controls{bottom:20px;left:16px;right:16px;width:auto;max-width:none;padding:0}.price-pill{top:16px;bottom:auto;right:16px;font-size:16px;padding:10px 16px}.tabs-wrapper{width:100%;justify-content:center;gap:8px}.tabs-container{overflow-x:auto;justify-content:flex-start;scrollbar-width:none;padding:6px;gap:5px}.tabs-container::-webkit-scrollbar{display:none}.tab-btn{padding:10px 12px;font-size:11px;flex-shrink:0;white-space:nowrap}.options-container{display:flex;justify-content:center;flex-wrap:wrap;margin-bottom:12px;padding:10px 12px;gap:10px;border-radius:16px}.option-btn.mixed-opt{padding:8px 10px;min-width:auto;font-size:11px;gap:4px;border-radius:12px}.mixed-opt .opt-icon{width:28px;height:28px}.option-btn.image-opt{width:44px;height:44px;border-radius:10px}.icon-opt{width:40px;height:40px}.rotation-btn{width:40px;height:40px;padding:8px}}@media (max-width: 480px){#ring-svg{width:55%;max-width:200px;transform:translateY(-12%)}.bottom-controls{bottom:16px;left:12px;right:12px}.price-pill{top:14px;right:14px;font-size:15px;padding:8px 14px}.tabs-container{padding:5px;gap:4px}.tab-btn{padding:8px 10px;font-size:10px}.options-container{padding:8px 10px;gap:8px;margin-bottom:10px}.option-btn.mixed-opt{padding:6px 8px;font-size:10px;gap:3px}.mixed-opt .opt-icon{width:24px;height:24px}.option-btn.image-opt{width:40px;height:40px}.icon-opt{width:36px;height:36px}.rotation-btn{width:36px;height:36px;padding:6px}}html,body{width:100%;height:100%}body{background-color:#9b2226}*{box-sizing:border-box}#root{width:100%;height:100%;background-color:#fff;display:flex;justify-content:center;align-items:center}.main{width:100%;height:100%;position:absolute;left:0;top:0;overflow:hidden;background-color:green}.main>div:nth-child(1){background-color:#f8f8f8;border:var(--border)}.main>div:nth-child(2){max-width:50%;background-color:#f8f8f8;border:var(--border)}*{margin:0;padding:0}.shape>div{display:flex;gap:10px}.shape>div>button,.head>button,.head-color>button,.shank>button,.shank-color>button{background-color:#fff;min-width:fit-content;width:5vw;max-width:10vh;height:5vw;border:var(--border)}.shape>div>button:focus,.head button:focus,.head-color button:focus,.shank>button:focus,.shank-color>button:focus{background-color:#f8f8f8;border:2px solid gray}.name{position:absolute;bottom:0;left:50%;transform:translate(-50%);font-family:myfont;text-transform:capitalize;color:#9b2226;font-size:clamp(1vh,1vw,1vw)}.signature-path{stroke-dasharray:1000;stroke-dashoffset:1000;animation:draw-signature 10s ease-in-out forwards}@keyframes draw-signature{to{stroke-dashoffset:0}}.house-part{stroke-dasharray:400;stroke-dashoffset:400;animation:draw 1s ease-in-out forwards}.house-part:nth-child(1){animation-delay:0s}.house-part:nth-child(2){animation-delay:.8s}.house-part:nth-child(3){animation-delay:1.6s}.house-part:nth-child(4){animation-delay:2s}.house-part:nth-child(5){animation-delay:2.4s}.house-part:nth-child(6){animation-delay:3.2s}.house-part:nth-child(7){animation-delay:4s}.house-part:nth-child(8){animation-delay:4.8s}.house-part:nth-child(9){animation-delay:5.6s}@keyframes draw{to{stroke-dashoffset:0}}@keyframes drawLine{to{stroke-dashoffset:10}}.sig-part{stroke-dashoffset:var(--path-length);stroke-dasharray:var(--path-length);fill:none;animation:drawLine var(--duration) forwards;animation-delay:var(--delay)}.loader{background-color:#9b2226;color:#e9d8a6;width:100%;height:100%;position:absolute;top:0;left:0;z-index:10;display:flex;flex-direction:column;justify-content:center;align-items:center;font-family:myfont;overflow:hidden}.loader>svg{min-width:30vh;width:50vw}#counter{position:absolute;bottom:1%;left:50%;transform:translate(-50%);z-index:10;font-family:myfont;color:#e9d8a6}