:root{--shadow-text: 0 2px 4px rgba(0, 0, 0, .8);--shadow-strong: 0 3px 8px rgba(0, 0, 0, .9);--shadow-card: 0 4px 12px rgba(0, 0, 0, .3);--transition-none: none;--menu-height: 6.25rem;--submenu-height: 5rem;--color-menu-height: 5rem;--spacing-xs: .25rem;--spacing-sm: .5rem;--spacing-md: .75rem;--spacing-lg: 1rem;--spacing-xl: 1.25rem;--text-xs: .625rem;--text-sm: .75rem;--text-base: 1rem;--text-lg: 1.125rem;--text-xl: 1.75rem;--text-2xl: 2.25rem;--nav-item-size: 2.813rem;--color-swatch-size: 2.8rem;--submenu-item-size: 2.8rem}@media screen and (max-width: 480px){:root{--menu-height: 5.625rem;--submenu-height: 4.375rem;--color-menu-height: 4.375rem}}.mobile-ui{position:fixed;top:0;left:0;right:0;bottom:0;width:100vw;height:calc(var(--vh, 1vh) * 100);display:flex;flex-direction:column;background:transparent;overflow:hidden;z-index:100;pointer-events:none;padding:env(safe-area-inset-top,0) env(safe-area-inset-right,0) env(safe-area-inset-bottom,0) env(safe-area-inset-left,0);box-sizing:border-box;transform:translateZ(0);-webkit-transform:translateZ(0)}.content-overlay{position:absolute;top:calc(var(--spacing-xl) * 2 + env(safe-area-inset-top,0));left:calc(var(--spacing-xl) + env(safe-area-inset-left,0));right:calc(var(--spacing-xl) + env(safe-area-inset-right,0));z-index:101;pointer-events:none;box-sizing:border-box}.title{color:var(--white);font-size:var(--text-xl);font-weight:700;margin-bottom:var(--spacing-md);text-shadow:var(--shadow-strong);line-height:1.2;background:var(--primary);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);padding:var(--spacing-sm) var(--spacing-lg);border-radius:var(--spacing-md);display:inline-block;border:2px solid var(--border);position:relative;z-index:102;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.active-option{color:var(--secondary);font-size:var(--text-lg);font-weight:600;opacity:1;margin-bottom:var(--spacing-sm);line-height:1.3;text-shadow:var(--shadow-text);background:var(--primary);padding:var(--spacing-xs) var(--spacing-md);border-radius:var(--spacing-sm);display:inline-block;border:1px solid var(--border);position:relative;z-index:102}.mobile-menu{height:calc(var(--menu-height) + env(safe-area-inset-bottom,0));min-height:calc(var(--menu-height) + env(safe-area-inset-bottom,0));background:var(--primary);border-top:2px solid var(--border);display:flex;align-items:center;position:fixed;bottom:0;left:0;right:0;overflow:visible;box-shadow:0 -.5rem 1.5rem #0009;z-index:1000;pointer-events:auto;width:100vw;box-sizing:border-box;padding:var(--spacing-sm) env(safe-area-inset-right,0) env(safe-area-inset-bottom,0) env(safe-area-inset-left,0)}.nav-scroll-container{display:flex;align-items:center;overflow-x:auto;overflow-y:hidden;scroll-behavior:auto;scrollbar-width:none;-ms-overflow-style:none;padding:0 var(--spacing-md);gap:var(--spacing-sm);width:100%;height:var(--menu-height);cursor:grab;-webkit-overflow-scrolling:auto;box-sizing:border-box;transform:translateZ(0);margin-top:0}.nav-scroll-container::-webkit-scrollbar{display:none}.nav-scroll-container:active{cursor:grabbing}.nav-item{flex-shrink:0;background:none;border:none;font-size:var(--text-sm);padding:var(--spacing-md);border-radius:1.25rem;position:relative;cursor:pointer;white-space:nowrap;min-width:5rem;text-align:center;-webkit-tap-highlight-color:transparent;outline:none;transition:var(--transition-none);touch-action:manipulation;-moz-user-select:none;user-select:none;-webkit-user-select:none;font-weight:400;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;gap:var(--spacing-xs);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.nav-item:focus{outline:none}.nav-item.inactive{color:var(--gray);font-weight:400;opacity:.8}.nav-item.inactive .nav-icon{opacity:.6}.nav-item.inactive:hover,.nav-item.inactive:active{color:var(--gray);opacity:1;background:#fff0}.nav-item.inactive:hover .nav-icon{opacity:.8}.nav-item.active{color:var(--secondary);font-weight:600;opacity:1;text-decoration:none}.nav-item.active .nav-icon{opacity:1;color:var(--secondary)}.nav-item.active:hover,.nav-item.active:active{color:var(--secondary);text-decoration:none}.nav-item.active:hover .nav-icon{color:var(--secondary)}.nav-icon{opacity:.8;transition:opacity .2s ease;flex-shrink:0}.nav-label{display:block;position:relative;z-index:2;font-size:var(--text-xs);font-weight:200;line-height:1}.active-indicator{position:absolute;bottom:var(--spacing-xs);left:50%;transform:translate(-50%);width:1.25rem;height:2px;background:var(--secondary);border-radius:2px;opacity:0}.submenu-container{position:fixed;bottom:calc(var(--menu-height) + env(safe-area-inset-bottom,0) + var(--spacing-xs));left:0;right:0;height:var(--submenu-height);background:none;border:none;display:flex;align-items:center;z-index:1001;overflow:hidden;padding:0 calc(var(--spacing-sm) + env(safe-area-inset-left,0)) 0 calc(var(--spacing-sm) + env(safe-area-inset-right,0));pointer-events:auto;width:100vw;box-sizing:border-box}.color-menu-container{position:fixed;bottom:calc(var(--menu-height) + var(--submenu-height) + env(safe-area-inset-bottom,0) + var(--spacing-lg));left:0;right:0;height:var(--color-menu-height);background:none;border:none;display:flex;align-items:center;z-index:1002;overflow:hidden;padding:0 calc(var(--spacing-sm) + env(safe-area-inset-left,0)) 0 calc(var(--spacing-sm) + env(safe-area-inset-right,0));pointer-events:auto;width:100vw;box-sizing:border-box}.color-menu-scroll{display:flex;align-items:center;gap:var(--spacing-xs);overflow-x:auto;overflow-y:hidden;scroll-behavior:auto;scrollbar-width:none;-ms-overflow-style:none;padding:0 var(--spacing-sm);height:100%;cursor:grab;width:100%;justify-content:flex-start;-webkit-overflow-scrolling:auto;transform:translateZ(0)}.color-menu-scroll::-webkit-scrollbar{display:none}.color-menu-scroll:active{cursor:grabbing}.color-menu-scroll[data-scrollable=false]{justify-content:center}.color-swatch-wrapper{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-xs);flex-shrink:0;min-width:calc(var(--color-swatch-size) + .5rem);width:calc(var(--color-swatch-size) + .5rem);margin:0 var(--spacing-xs)}.color-swatch{width:var(--color-swatch-size);height:var(--color-swatch-size);border-radius:50%;background:transparent;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;-webkit-tap-highlight-color:transparent;outline:none;transition:var(--transition-none);flex-shrink:0;position:relative;touch-action:manipulation;-moz-user-select:none;user-select:none;-webkit-user-select:none;box-shadow:none;padding:0;aspect-ratio:1}.color-swatch .color-icon{width:var(--color-swatch-size)!important;height:var(--color-swatch-size)!important;min-width:var(--color-swatch-size)!important;min-height:var(--color-swatch-size)!important;max-width:var(--color-swatch-size)!important;max-height:var(--color-swatch-size)!important;border-radius:50%!important;border:2px solid var(--border);box-shadow:var(--shadow-card);flex-shrink:0;aspect-ratio:1;-o-object-fit:cover;object-fit:cover;display:block}.color-swatch:focus{outline:none}.color-swatch.selected{opacity:1;border:1px solid var(--border-selected)}.color-swatch.selected .color-icon{border:3px solid var(--border-selected);box-shadow:0 0 0 2px #ffeb3b4d,var(--shadow-card)}.color-swatch:not(.selected){background:transparent;transform:scale(.9)}.color-swatch:not(.selected) .color-icon{border:2px solid var(--border)}.color-swatch:hover,.color-swatch:active{background:transparent;transform:scale(1.05)}.color-swatch:hover .color-icon,.color-swatch:active .color-icon{border:2px solid var(--border)}.color-swatch.selected:hover,.color-swatch.selected:active{background:transparent;transform:scale(1.15)}.color-swatch.selected:hover .color-icon,.color-swatch.selected:active .color-icon{border:3px solid var(--border-selected)}.color-swatch-label{color:#fff;font-size:var(--text-xs);font-weight:500;text-align:center;min-height:.75rem;line-height:1.2;white-space:nowrap;max-width:calc(var(--color-swatch-size) + .5rem);overflow:hidden;text-overflow:ellipsis;text-shadow:var(--shadow-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.pattern-swatch-wrapper{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-xs);flex-shrink:0;min-width:calc(var(--color-swatch-size) + .5rem);width:calc(var(--color-swatch-size) + .5rem);margin:0 var(--spacing-xs)}.pattern-swatch{width:var(--color-swatch-size);height:var(--color-swatch-size);border-radius:50%;background:var(--black);border:2px solid var(--border);cursor:pointer;display:flex;align-items:center;justify-content:center;-webkit-tap-highlight-color:transparent;outline:none;transition:var(--transition-none);flex-shrink:0;position:relative;touch-action:manipulation;-moz-user-select:none;user-select:none;-webkit-user-select:none;padding:0;aspect-ratio:1;overflow:hidden}.pattern-swatch .pattern-icon{width:100%!important;height:100%!important;min-width:100%!important;min-height:100%!important;max-width:100%!important;max-height:100%!important;border-radius:50%!important;border:none;box-shadow:none;flex-shrink:0;aspect-ratio:1;-o-object-fit:cover;object-fit:cover;display:block}.pattern-swatch:focus{outline:none}.pattern-swatch.selected{opacity:1;border:1px solid var(--border-selected)}.pattern-swatch.selected .color-icon{border:3px solid var(--border-selected);box-shadow:0 0 0 2px #ffeb3b4d,var(--shadow-card)}.pattern-swatch:not(.selected){background:var(--darkgray);transform:scale(.9)}.pattern-swatch:not(.selected) .pattern-icon{border:2px solid var(--border)}.pattern-swatch:hover,.pattern-swatch:active{background:var(--black);transform:scale(1.05)}.pattern-swatch:hover .color-icon,.pattern-swatch:active .pattern-icon{border:2px solid var(--border)}.pattern-swatch.selected:hover,.pattern-swatch.selected:active{background:var(--black);transform:scale(1.15)}.pattern-swatch.selected:hover .pattern-icon,.pattern-swatch.selected:active .pattern-icon{border:3px solid var(--border-selected)}.pattern-swatch-label{color:#fff;font-size:var(--text-xs);font-weight:500;text-align:center;min-height:.75rem;line-height:1.2;white-space:nowrap;max-width:calc(var(--color-swatch-size) + .5rem);overflow:visible;text-overflow:ellipsis;text-shadow:var(--shadow-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.color-menu-container:before,.color-menu-container:after{content:"";position:absolute;top:0;bottom:0;width:1.5rem;pointer-events:none;z-index:1003;opacity:0}.color-menu-container:before{left:0;background:linear-gradient(to right,var(--gray),transparent)}.color-menu-container:after{right:0;background:linear-gradient(to left,var(--gray),transparent)}.color-menu-container[data-can-scroll-left=true]:before{opacity:1}.color-menu-container[data-can-scroll-right=true]:after{opacity:1}.submenu-scroll{display:flex;align-items:center;gap:var(--spacing-xs);overflow-x:auto;overflow-y:hidden;scroll-behavior:auto;scrollbar-width:none;-ms-overflow-style:none;padding:0 var(--spacing-sm);height:100%;cursor:grab;width:100%;justify-content:flex-start;-webkit-overflow-scrolling:auto;transform:translateZ(0)}.submenu-scroll::-webkit-scrollbar{display:none}.submenu-scroll:active{cursor:grabbing}.submenu-scroll[data-scrollable=false]{justify-content:center}.submenu-item-wrapper{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:80%;gap:var(--spacing-xs);flex-shrink:0;min-width:3.125rem;margin:0 var(--spacing-xs)}.submenu-item{width:var(--submenu-item-size);height:var(--submenu-item-size);border-radius:50%;background:var(--black);opacity:90%;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;-webkit-tap-highlight-color:transparent;outline:none;transition:var(--transition-none);flex-shrink:0;position:relative;touch-action:manipulation;-moz-user-select:none;user-select:none;-webkit-user-select:none;box-shadow:var(--shadow-card)}.submenu-item:focus{outline:none}.submenu-item.active{color:var(--primary);background:var(--secondary);transform:scale(1.1)}.submenu-item.inactive{color:var(--gray);transform:scale(1)}.submenu-item.color{background-color:#ffffff20;box-shadow:none;transform:scale(1)}.submenu-item.toggled{opacity:1;background:var(--secondary);transform:scale(1.1)}.submenu-item.toggled .submenu-icon{color:var(--black)}.submenu-item.untoggled{opacity:.4;background:var(--white);transform:scale(.9)}.submenu-item.untoggled .submenu-icon{color:var(--black)}.submenu-item:hover,.submenu-item:active{background:#f5f5f5;transform:scale(1.05)}.submenu-item.toggled:hover,.submenu-item.toggled:active{background:var(--secondary);transform:scale(1.15)}.submenu-item.untoggled:hover,.submenu-item.untoggled:active{background:#f5f5f5;opacity:.6;transform:scale(.95)}.submenu-icon{color:#000;display:flex;align-items:center;justify-content:center;flex-shrink:0;width:2rem;height:2rem}.submenu-label{color:#fff;font-size:var(--text-xs);font-weight:500;text-align:center;min-height:.75rem;line-height:1.2;white-space:normal;word-break:break-word;overflow:visible;text-overflow:unset;max-width:3.438rem;text-shadow:var(--shadow-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.submenu-container:before,.submenu-container:after{content:"";position:absolute;top:0;bottom:0;width:1.25rem;pointer-events:none;z-index:1002;opacity:0}.submenu-container:before{left:0;background:linear-gradient(to right,var(--primary),transparent)}.submenu-container:after{right:0;background:linear-gradient(to left,var(--primary),transparent)}.submenu-container[data-can-scroll-left=true]:before{opacity:.5}.submenu-container[data-can-scroll-right=true]:after{opacity:.5}.submenu-scroll-arrow{position:absolute;top:60%;transform:translateY(-50%);width:2rem;height:2rem;border-radius:50%;background:#0000;border:0px;color:var(--white);cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:1003;transition:all .2s ease;opacity:0;pointer-events:none;-webkit-tap-highlight-color:transparent;outline:none;touch-action:manipulation;-moz-user-select:none;user-select:none;-webkit-user-select:none}.submenu-scroll-arrow-left{left:-.313rem}.submenu-scroll-arrow-right{right:-.313rem}.submenu-container[data-can-scroll-left=true] .submenu-scroll-arrow-left,.submenu-container[data-can-scroll-right=true] .submenu-scroll-arrow-right{opacity:.8;pointer-events:auto}.submenu-scroll-arrow:hover{border:0px;opacity:1!important;transform:translateY(-50%) scale(1.2)}.submenu-scroll-arrow:active{border:0px;transform:translateY(-50%) scale(.9);background:#0000}.submenu-scroll-arrow:focus{border:0px;outline:none;box-shadow:0 0 0 2px #cfcdc74d}.mobile-ui,.mobile-menu,.submenu-container,.color-menu-container{-webkit-user-select:none;-moz-user-select:none;user-select:none}@media (hover: none) and (pointer: coarse){.nav-item:hover,.submenu-item:hover,.color-swatch:hover{transform:none}.nav-item:active{background-color:#ffffff1a;transform:scale(.98)}.submenu-item:active,.color-swatch:active{transform:scale(.95)}}@media (prefers-color-scheme: dark){.title{text-shadow:0 .25rem .75rem rgba(0,0,0,1)}}@media screen and (max-width: 360px){:root{--menu-height: 5rem;--submenu-height: 4rem;--color-menu-height: 4rem;--submenu-item-size: 2.5rem;--color-swatch-size: 1.5rem}.content-overlay{top:calc(var(--spacing-lg) + env(safe-area-inset-top,0));left:calc(var(--spacing-md) + env(safe-area-inset-left,0));right:calc(var(--spacing-md) + env(safe-area-inset-right,0))}.title{font-size:1.375rem;padding:var(--spacing-xs) var(--spacing-md)}.nav-item{min-width:3.5rem;padding:var(--spacing-xs);font-size:.6875rem}}@media screen and (min-width: 361px) and (max-width: 480px){:root{--menu-height: 5.625rem;--submenu-height: 4.375rem;--color-menu-height: 4.375rem}.content-overlay{top:calc(var(--spacing-xl) + env(safe-area-inset-top,0));left:calc(var(--spacing-lg) + env(safe-area-inset-left,0));right:calc(var(--spacing-lg) + env(safe-area-inset-right,0))}.title{font-size:1.625rem;margin-bottom:var(--spacing-sm);padding:var(--spacing-sm) .875rem}.active-option{font-size:1.063rem;margin-bottom:var(--spacing-xs);padding:.313rem var(--spacing-md)}.nav-item{padding:.313rem var(--spacing-sm);font-size:.813rem;min-width:3.75rem}}@media screen and (min-width: 768px){.content-overlay{top:calc(3.75rem + env(safe-area-inset-top,0));left:calc(2rem + env(safe-area-inset-left,0));right:calc(2rem + env(safe-area-inset-right,0))}.title{font-size:var(--text-2xl);margin-bottom:var(--spacing-lg);padding:var(--spacing-md) 1.5rem}.active-option{font-size:1.375rem;margin-bottom:var(--spacing-sm);padding:var(--spacing-sm) 1.125rem}.nav-item{padding:var(--spacing-sm) .875rem;font-size:.875rem;min-width:5rem}.nav-label{font-size:var(--text-sm);font-weight:100}}@media screen and (orientation: landscape) and (max-height: 500px){:root{--menu-height: 4.375rem;--submenu-height: 3.75rem;--color-menu-height: 3.75rem;--submenu-item-size: 2.25rem;--color-swatch-size: 1.5rem}.content-overlay{top:calc(var(--spacing-md) + env(safe-area-inset-top,0))}.title{font-size:1.375rem;margin-bottom:var(--spacing-xs);padding:var(--spacing-xs) var(--spacing-md)}.active-option{font-size:.9375rem;margin-bottom:var(--spacing-xs);padding:var(--spacing-xs) var(--spacing-sm)}.nav-item{font-size:.6875rem;padding:var(--spacing-xs)}.nav-label{font-size:.5rem}.submenu-icon{width:1.5rem;height:1.5rem}.submenu-label,.color-swatch-label{font-size:var(--text-xs)}}@media screen and (device-width: 393px) and (device-height: 852px),screen and (device-width: 430px) and (device-height: 932px){:root{--menu-height: 5.5rem;--submenu-height: 4.5rem;--color-menu-height: 4.5rem}.mobile-menu{height:calc(var(--menu-height) + env(safe-area-inset-bottom,0));min-height:calc(var(--menu-height) + env(safe-area-inset-bottom,0))}}.desktop-menu{width:100%;height:100%;background:linear-gradient(135deg,var(--primary) 0%,var(--primary) 100%);border-left:2px solid var(--border);display:flex;flex-direction:column;overflow-y:auto;position:relative;box-shadow:-4px 0 20px #0000004d}.desktop-menu-header{padding:32px 24px 24px;border-bottom:1px solid var(--border);background:#0003}.desktop-menu-title{color:var(--secondary);font-size:24px;font-weight:700;margin:0 0 8px;line-height:1.2}.desktop-menu-subtitle{color:var(--white);font-size:14px;margin:0;line-height:1.4}.desktop-menu-content{flex:1;padding:16px 0;display:flex;flex-direction:column;gap:4px}.desktop-menu-item{position:relative;margin:0 16px}.desktop-menu-button{width:100%;background:transparent;border:1px solid var(--border);border-radius:4px;padding:12px 16px;cursor:pointer;display:flex;align-items:center;justify-content:space-between;transition:all .2s ease;color:var(--white);font-size:15px;font-weight:500;outline:none;position:relative;overflow:hidden;min-height:44px}.desktop-menu-button:hover{background:#ffffff0d;border-color:var(--border);transform:translateY(-1px);box-shadow:0 4px 12px #0003}.desktop-menu-button.expanded{background:var(--gray);border-bottom-left-radius:0;border-bottom-right-radius:0;border:1px solid var(--border-expanded)}.desktop-menu-button:disabled{opacity:.5;cursor:not-allowed;transform:none}.desktop-menu-button:disabled:hover{background:transparent;border-color:var(--border);transform:none;box-shadow:none}.desktop-menu-button-content{display:flex;align-items:center;gap:8px;flex:1;white-space:nowrap;overflow:hidden}.desktop-menu-button-main{display:flex;align-items:center;gap:8px;flex-shrink:0}.desktop-menu-icon{opacity:.8;transition:opacity .2s ease;flex-shrink:0}.desktop-menu-button-label{font-weight:600;line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.desktop-menu-button-selected{font-size:12px;color:var(--secondary);font-weight:500;opacity:.9;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:120px}.desktop-menu-chevron{transition:transform .2s ease;flex-shrink:0;opacity:.7}.desktop-menu-chevron.rotated{transform:rotate(180deg)}.desktop-submenu{border:1px solid var(--border-expanded);border-top:none;border-radius:0 0 4px 4px;background:var(--primary);overflow:visible;animation:expandSubmenu .2s ease-out}.desktop-submenu-content{padding:16px;overflow:visible}.desktop-submenu-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(60px,1fr));gap:12px;justify-items:center;overflow:visible}.desktop-submenu-item{background:transparent;border:1px solid var(--border);border-radius:6px;width:50px;height:50px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s ease;color:var(--white);outline:none;position:relative;overflow:visible}.desktop-submenu-item:hover{background:#ffffff1a;border-color:#777;transform:translateY(-2px);box-shadow:0 4px 16px #0000004d}.desktop-submenu-item.selected,.desktop-submenu-item.toggled{background:var(--secondary);border-color:var(--primary);color:var(--primary)}.desktop-submenu-item.untoggled{opacity:.6;background:#ffffff0d}.desktop-submenu-item-icon{display:flex;align-items:center;justify-content:center;width:50px;height:50px;flex-shrink:0;transition:opacity .2s ease;position:relative;transform:scale(1.4);z-index:1001}.desktop-submenu-item-tooltip{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;background:#0009;color:var(--white);font-size:10px;font-weight:700;white-space:nowrap;z-index:1100;pointer-events:none;opacity:0;transition:opacity .2s ease;text-align:center;line-height:1;text-shadow:none;padding:4px;box-sizing:border-box;border-radius:6px}.desktop-submenu-item:hover .desktop-submenu-item-tooltip{opacity:1}.desktop-selected-indicator{position:absolute;top:-4px;right:-4px;width:16px;height:16px;border-radius:50%;color:var(--black);display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;z-index:1002}.desktop-menu-footer{padding:20px 24px;border-top:1px solid var(--border);background:#0003}.desktop-menu-info{color:#888;font-size:12px;margin:0;line-height:1.4;text-align:center}@keyframes expandSubmenu{0%{opacity:0;max-height:0}to{opacity:1;max-height:500px}}.desktop-menu::-webkit-scrollbar{width:6px}.desktop-menu::-webkit-scrollbar-track{background:#1a1a1a}.desktop-menu::-webkit-scrollbar-thumb{background:#555;border-radius:3px}.desktop-menu::-webkit-scrollbar-thumb:hover{background:#777}@media (max-width: 1200px){.desktop-menu-header{padding:24px 20px 20px}.desktop-menu-title{font-size:22px}.desktop-menu-subtitle{font-size:13px}.desktop-menu-button{padding:10px 14px;font-size:14px;min-height:40px}.desktop-submenu-content{padding:12px}.desktop-submenu-grid{grid-template-columns:repeat(auto-fill,minmax(50px,1fr));gap:10px}.desktop-submenu-item{width:50px;height:50px}.desktop-submenu-item-icon{width:20px;height:20px}.desktop-submenu-item-tooltip{font-size:9px}}@media (max-width: 1000px){.desktop-menu-button{padding:8px 12px;font-size:13px;min-height:36px}.desktop-menu-button-selected{font-size:11px;max-width:100px}.desktop-submenu-grid{grid-template-columns:repeat(auto-fill,minmax(45px,1fr));gap:8px}.desktop-submenu-item{width:45px;height:45px}.desktop-submenu-item-icon{width:18px;height:18px}.desktop-submenu-item-tooltip{font-size:8px}}@media (prefers-contrast: high){.desktop-menu{border-left-color:var(--white)}.desktop-menu-button,.desktop-submenu,.desktop-submenu-item{border-color:var(--white)}}@media (prefers-reduced-motion: reduce){.desktop-menu-button,.desktop-menu-chevron,.desktop-submenu-item,.desktop-submenu-item-tooltip{transition:none}.desktop-submenu{animation:none}}.desktop-menu-button:focus-visible,.desktop-submenu-item:focus-visible{outline:2px solid var(--primary);outline-offset:2px}.desktop-menu,.desktop-submenu,.desktop-submenu-item-tooltip{transform:translateZ(0);-webkit-transform:translateZ(0);will-change:transform}.desktop-color-menu-item{position:relative;grid-column:1 / -1;width:100%;margin:0}.desktop-color-menu-button{width:100%;background:transparent;border:1px solid var(--border);border-radius:3px;padding:8px 0;cursor:pointer;display:flex;align-items:center;justify-content:space-between;transition:all .2s ease;color:var(--white);font-size:13px;font-weight:400;outline:none;position:relative;overflow:hidden;min-height:36px;margin:0}.desktop-color-menu-button:hover{background:#ffffff0d;border-color:var(--border);transform:translateY(-1px);box-shadow:0 4px 12px #0003}.desktop-color-menu-button.expanded{border-bottom-left-radius:0;border-bottom-right-radius:0;background:var(--gray);border:1px solid var(--border-expanded)}.desktop-color-menu-button-content{display:flex;align-items:center;gap:8px;flex:1;white-space:nowrap;overflow:hidden}.desktop-color-menu-button-main{display:flex;align-items:center;gap:8px;flex-shrink:0}.desktop-color-menu-button-label{font-weight:500;line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left}.desktop-color-menu-button-selected{font-size:11px;color:var(--secondary);font-weight:400;opacity:.9;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:120px}.desktop-color-submenu{border:1px solid var(--border-expanded);border-top:none;border-radius:0 0 3px 3px;background:var(--primary);overflow:visible;animation:expandSubmenu .2s ease-out;margin:0}.desktop-color-submenu-content{padding:12px;overflow:visible}.desktop-color-submenu-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(50px,1fr));gap:10px;justify-items:center;overflow:visible}.desktop-color-swatch{background:transparent;border:1px solid #666;border-radius:5px;width:50px;height:50px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s ease;color:var(--primary);outline:none;position:relative;overflow:visible}.desktop-color-swatch:hover{background:#ffffff1a;border-color:#888;transform:translateY(-2px);box-shadow:0 4px 16px #0000004d}.desktop-color-swatch.selected{background:var(--secondary);border-color:var(--primary);color:var(--primary)}.desktop-color-swatch-icon{display:flex;align-items:center;justify-content:center;width:20px;height:20px;flex-shrink:0;transition:opacity .2s ease;position:relative;z-index:1001;transform:scale(1.4)}.desktop-color-swatch .color-icon{width:20px!important;height:20px!important;border-radius:50%;border:1px solid rgba(255,255,255,.2);box-shadow:0 2px 4px #0003}.desktop-color-swatch.selected .color-icon{border:2px solid var(--primary);box-shadow:0 0 0 1px #5858584d,0 2px 4px #0003}.desktop-color-swatch-tooltip{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;background:#0009;color:#fff;font-size:9px;font-weight:700;white-space:nowrap;z-index:1100;pointer-events:none;opacity:0;transition:opacity .2s ease;text-align:center;line-height:1;text-shadow:none;padding:4px;box-sizing:border-box;border-radius:5px}.desktop-color-swatch:hover .desktop-color-swatch-tooltip{opacity:1}@media (max-width: 1200px){.desktop-color-menu-button{padding:6px 10px;font-size:12px;min-height:32px}.desktop-color-submenu-content{padding:10px}.desktop-color-submenu-grid{grid-template-columns:repeat(auto-fill,minmax(42px,1fr));gap:8px}.desktop-color-swatch{width:42px;height:42px}.desktop-color-swatch-icon{width:18px;height:18px}.desktop-color-swatch .color-icon{width:18px!important;height:18px!important}.desktop-color-swatch-tooltip{font-size:8px}}@media (max-width: 1000px){.desktop-color-menu-button{padding:5px 8px;font-size:11px;min-height:28px}.desktop-color-menu-button-selected{font-size:10px;max-width:100px}.desktop-color-submenu-grid{grid-template-columns:repeat(auto-fill,minmax(38px,1fr));gap:6px}.desktop-color-swatch{width:38px;height:38px}.desktop-color-swatch-icon{width:16px;height:16px}.desktop-color-swatch .color-icon{width:16px!important;height:16px!important}.desktop-color-swatch-tooltip{font-size:7px}}:root{--ui-scale: 1.5}.floating-ui{position:fixed;top:calc(20px + var(--safe-area-inset-top, 0px));z-index:1100;display:flex;flex-direction:column;align-items:center;gap:calc(6px * var(--ui-scale));pointer-events:auto;transition:opacity .3s ease-in-out,transform .3s ease-in-out}.floating-ui.visible{opacity:.6;transform:translateY(0) scale(1);pointer-events:auto}.floating-ui.hidden{opacity:0;transform:translateY(-10px) scale(.95);pointer-events:none}.floating-ui-items{display:flex;flex-direction:column;gap:calc(2px * var(--ui-scale));opacity:1;transform:translateY(0) scale(1);pointer-events:auto;transition:inherit}.floating-ui-item-container{position:relative;display:flex;align-items:center}.floating-ui-item{width:calc(28px * var(--ui-scale));height:calc(28px * var(--ui-scale));border-radius:50%;background:#fff0;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,0);cursor:pointer;display:flex;align-items:center;justify-content:center;-webkit-tap-highlight-color:transparent;outline:none;transition:all .2s cubic-bezier(.4,0,.2,1);touch-action:manipulation;-moz-user-select:none;user-select:none;-webkit-user-select:none;color:#fff}.floating-ui-icon{font-size:calc(16px * var(--ui-scale));opacity:.8;transition:opacity .2s ease}.floating-ui-item:hover{background:#fff6;transform:scale(1.1)}.floating-ui-item:hover .floating-ui-icon{opacity:.4}.floating-ui-item.help-button.active{background:#fff9!important;color:#000!important}.floating-ui-item.help-button.active .floating-ui-icon{opacity:1}.floating-ui-item:active{transform:scale(.95)}.floating-ui-item:focus{outline:none;border-color:#fff;box-shadow:0 0 0 2px #ffffff4d}.tooltip{position:absolute;right:calc(100% + 8px);top:50%;transform:translateY(-50%);background:#000000e6;color:#fff;padding:calc(4px * var(--ui-scale)) calc(8px * var(--ui-scale));border-radius:4px;font-size:calc(10px * var(--ui-scale));white-space:nowrap;z-index:1101;pointer-events:none;opacity:0;animation:fadeInTooltip .2s ease-out forwards}.tooltip:after{content:"";position:absolute;left:100%;top:50%;transform:translateY(-50%);border:3px solid transparent;border-left-color:#000000e6}@keyframes fadeInTooltip{0%{opacity:0;transform:translateY(-50%) translate(-5px)}to{opacity:1;transform:translateY(-50%) translate(0)}}.floating-ui.visible .floating-ui-item:nth-child(1){animation:slideInUp .3s cubic-bezier(.4,0,.2,1) .1s both}.floating-ui.visible .floating-ui-item:nth-child(2){animation:slideInUp .3s cubic-bezier(.4,0,.2,1) .15s both}.floating-ui.visible .floating-ui-item:nth-child(3){animation:slideInUp .3s cubic-bezier(.4,0,.2,1) .2s both}.floating-ui.visible .floating-ui-item:nth-child(4){animation:slideInUp .3s cubic-bezier(.4,0,.2,1) .25s both}@keyframes slideInUp{0%{opacity:0;transform:translateY(10px) scale(.8)}to{opacity:1;transform:translateY(0) scale(1)}}@media (min-width: 1024px){.floating-ui{top:calc(30px + var(--safe-area-inset-top, 0px));gap:calc(2px * var(--ui-scale))}.floating-ui-items{gap:calc(2px * var(--ui-scale))}.floating-ui-item{width:calc(28px * var(--ui-scale));height:calc(28px * var(--ui-scale))}.tooltip{font-size:calc(11px * var(--ui-scale));padding:calc(5px * var(--ui-scale)) calc(9px * var(--ui-scale))}}@media (max-width: 480px){.floating-ui{top:calc(15px + var(--safe-area-inset-top, 0px));gap:calc(2px * var(--ui-scale))}.floating-ui-items{gap:calc(2x * var(--ui-scale))}.floating-ui-item{width:calc(23px * var(--ui-scale));height:calc(23px * var(--ui-scale))}.tooltip{font-size:calc(9px * var(--ui-scale));padding:calc(3px * var(--ui-scale)) calc(6px * var(--ui-scale))}}@media (max-width: 360px){.floating-ui{top:calc(12px + var(--safe-area-inset-top, 0px));gap:calc(2px * var(--ui-scale))}.floating-ui-items{gap:calc(2px * var(--ui-scale))}.floating-ui-item{width:calc(21px * var(--ui-scale));height:calc(21px * var(--ui-scale))}.tooltip{font-size:calc(8px * var(--ui-scale));padding:calc(2px * var(--ui-scale)) calc(5px * var(--ui-scale))}}@media (min-width: 768px) and (max-width: 1023px){.floating-ui{top:calc(25px + var(--safe-area-inset-top, 0px));gap:calc(2px * var(--ui-scale))}.floating-ui-items{gap:calc(2px * var(--ui-scale))}.floating-ui-item{width:calc(26px * var(--ui-scale));height:calc(26px * var(--ui-scale))}.tooltip{font-size:calc(10px * var(--ui-scale));padding:calc(4px * var(--ui-scale)) calc(7px * var(--ui-scale))}}@media (orientation: landscape) and (max-height: 500px){.floating-ui{top:calc(10px + var(--safe-area-inset-top, 0px));gap:calc(2px * var(--ui-scale))}.floating-ui-items{gap:calc(2px * var(--ui-scale))}.floating-ui-item{width:calc(20px * var(--ui-scale));height:calc(20px * var(--ui-scale))}.tooltip{font-size:calc(8px * var(--ui-scale));padding:calc(2px * var(--ui-scale)) calc(4px * var(--ui-scale))}}@media (-webkit-min-device-pixel-ratio: 2),(min-resolution: 192dpi){.floating-ui-item,.tooltip{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}}@media (hover: none) and (pointer: coarse){.floating-ui-item:hover{transform:none}.floating-ui-item:active{background:#ffffffe6;transform:scale(.9)}}.floating-ui,.floating-ui-items,.floating-ui-item,.tooltip{transform:translateZ(0);-webkit-transform:translateZ(0);will-change:transform,opacity}@media screen and (min-width: 390px) and (max-width: 400px) and (min-height: 800px) and (max-height: 900px){.floating-ui{top:calc(25px + var(--safe-area-inset-top, 0px));gap:calc(2px * var(--ui-scale))}.floating-ui-items{gap:calc(2px * var(--ui-scale))}.floating-ui-item{width:calc(26px * var(--ui-scale));height:calc(26px * var(--ui-scale))}.tooltip{font-size:calc(10px * var(--ui-scale));padding:calc(4px * var(--ui-scale)) calc(7px * var(--ui-scale))}}.floating-ui{isolation:isolate}@media (prefers-reduced-motion: reduce){.floating-ui,.floating-ui-items,.floating-ui-item,.tooltip{transition:none;animation:none}.floating-ui.visible{opacity:1;transform:none}.floating-ui.hidden{opacity:0;transform:none}}@media (prefers-reduced-motion: no-preference){.floating-ui-item:focus-visible{outline:2px solid #ffeb3b;outline-offset:1px}}.canvas-lightbox-overlay{background:#000c;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;z-index:10000;padding:0;box-sizing:border-box;animation:overlayFadeIn .3s ease-out}.canvas-lightbox{background:linear-gradient(135deg,var(--primary) 0%,var(--primary) 100%);border-radius:0;border:1px solid #333;box-shadow:0 20px 60px #00000080,inset 0 1px #ffffff1a;height:100%;max-height:100vh;overflow:hidden;animation:lightboxSlideUp .3s ease-out;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;color:#fff;display:flex;flex-direction:column;min-width:100vw}.lightbox-header{display:flex;align-items:center;justify-content:space-between;padding:calc(16px + var(--safe-area-inset-top, 0px)) 16px 12px;border-bottom:1px solid #333;background:#ffffff05;flex-shrink:0}.lightbox-title{display:flex;align-items:center;gap:8px;font-size:16px;font-weight:600;color:#fff}.lightbox-title svg{width:18px;height:18px}.lightbox-close{background:transparent;border:1px solid #555;border-radius:6px;width:36px;height:36px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#ffffffb3;transition:all .2s ease;flex-shrink:0}.lightbox-close svg{width:16px;height:16px}.lightbox-close:hover{background:#ffffff1a;border-color:#777;color:#fff;transform:scale(1.05)}.lightbox-content{flex:1;display:flex;flex-direction:column;overflow:hidden;min-height:0}.screenshot-section{flex:1;display:flex;flex-direction:column;padding:16px 16px 8px;min-height:0}.screenshot-container{position:relative;border-radius:6px;overflow:hidden;background:#000;box-shadow:0 4px 16px #0000004d;width:100%;flex:1;display:flex;align-items:center;justify-content:center;min-height:200px}.screenshot-image{width:100%;height:100%;-o-object-fit:contain;object-fit:contain;display:block}.screenshot-loading{display:flex;flex-direction:column;align-items:center;gap:8px;color:#ffffffb3;font-size:14px}.loading-spinner{width:24px;height:24px;border:2px solid rgba(255,255,255,.3);border-top:2px solid rgba(255,255,255,.8);border-radius:50%;animation:spin 1s linear infinite}.screenshot-placeholder{display:flex;flex-direction:column;align-items:center;gap:8px;color:#ffffff80;text-align:center;font-size:14px}.screenshot-placeholder svg{width:40px;height:40px}.capture-button{background:#ffffff0d;border:1px solid rgba(255,255,255,.1);border-radius:6px;padding:8px 12px;color:#fff;font-size:12px;font-weight:500;cursor:pointer;transition:all .2s ease}.capture-button:hover{background:#ffffff1a;border-color:#fff3;transform:translateY(-1px)}.bottom-section{flex-shrink:0;padding:16px;padding-bottom:calc(16px + var(--safe-area-inset-bottom, 0px));background:#0003;border-top:1px solid #333;display:flex;flex-direction:column;gap:16px}.action-buttons-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}.primary-button{background:var(--secondary);border:1px solid rgba(255,255,255,.1);border-radius:6px;padding:10px 12px;display:flex;align-items:center;justify-content:center;gap:6px;cursor:pointer;color:#fff;transition:all .2s ease;text-align:center;font-size:13px;font-weight:500;min-height:40px}.primary-button svg{width:16px;height:16px;flex-shrink:0}.primary-button:hover{background:var(--secondary);border-color:#fff3;transform:translateY(-1px);box-shadow:0 4px 12px #0000004d}.primary-button:disabled{opacity:.5;cursor:not-allowed;transform:none}.primary-button:disabled:hover{background:var(--secondary);border-color:#ffffff1a;transform:none;box-shadow:none}.share-link-button{background:#ffffff0d;border-color:#ffffff1a;color:#fff}.share-link-button:hover{background:#ffffff1a;border-color:#fff3;color:#fff}.download-button{background:#ffffff0d;border-color:#ffffff1a;color:#fff}.download-button:hover{background:#ffffff1a;border-color:#fff3;color:#fff}.social-section{display:flex;flex-direction:column;gap:8px}.section-title{font-size:14px;font-weight:600;color:#ffffffe6;margin:0}.social-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}.social-button{background:#ffffff0d;border:1px solid rgba(255,255,255,.1);border-radius:50%;padding:8px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#fffc;transition:all .2s ease;aspect-ratio:1;min-height:40px}.social-button svg{width:18px;height:18px}.social-button:hover{background:#ffffff1a;border-color:#fff3;color:#fff;transform:translateY(-1px);box-shadow:0 4px 12px #0003}.social-button.twitter:hover,.social-button.facebook:hover,.social-button.instagram:hover,.social-button.linkedin:hover,.social-button.whatsapp:hover{background:#ffffff1a;border-color:#fff3;color:#fff}.tips-section{display:flex;flex-direction:column;gap:6px;padding:10px;background:#ffffff08;border-radius:6px;border:1px solid rgba(255,255,255,.08)}.tip-item{display:flex;align-items:flex-start;gap:6px;font-size:12px;line-height:1.4}.tip-icon{font-size:14px;flex-shrink:0;margin-top:1px}.tip-text{color:#ffffffb3}@keyframes overlayFadeIn{0%{opacity:0}to{opacity:1}}@keyframes lightboxSlideUp{0%{opacity:0;transform:translateY(40px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media (max-width: 480px){.lightbox-header{padding:calc(12px + var(--safe-area-inset-top, 0px)) 12px 8px}.lightbox-title{font-size:14px}.lightbox-title svg{width:16px;height:16px}.lightbox-close{width:32px;height:32px}.lightbox-close svg{width:14px;height:14px}.screenshot-section{padding:12px 12px 6px}.bottom-section{padding:12px;padding-bottom:calc(12px + var(--safe-area-inset-bottom, 0px));gap:12px}.primary-button{padding:8px 10px;font-size:12px;min-height:36px}.primary-button svg{width:14px;height:14px}.section-title{font-size:13px}.social-button{padding:6px;min-height:36px}.social-button svg{width:16px;height:16px}.tip-item{font-size:11px}.tip-icon{font-size:12px}}@media (min-width: 1024px){.canvas-lightbox-overlay{padding:16px}.canvas-lightbox{border-radius:8px;height:-moz-fit-content;height:fit-content;max-height:85vh;min-width:320px}.lightbox-content{overflow-y:auto}.screenshot-section{flex:none;padding:16px 16px 8px}.screenshot-container{height:180px;flex:none}.bottom-section{background:transparent;border-top:none;padding:8px 16px 16px}.canvas-lightbox-overlay[data-canvas-width=narrow] .canvas-lightbox{min-width:280px}.canvas-lightbox-overlay[data-canvas-width=narrow] .screenshot-container{height:140px}.canvas-lightbox-overlay[data-canvas-width=narrow] .primary-button{font-size:11px;min-height:32px;padding:6px 8px}.canvas-lightbox-overlay[data-canvas-width=narrow] .social-button{min-height:32px;padding:6px}.canvas-lightbox-overlay[data-canvas-width=narrow] .social-button svg{width:14px;height:14px}.canvas-lightbox-overlay[data-canvas-width=wide] .canvas-lightbox{min-width:380px}.canvas-lightbox-overlay[data-canvas-width=wide] .screenshot-container{height:220px}}@media (min-width: 1440px){.canvas-lightbox{min-width:420px}.screenshot-container{height:240px}}@media (prefers-contrast: high){.canvas-lightbox{border-color:#fff;background:#000000f2}.lightbox-header,.bottom-section,.primary-button,.social-button,.tips-section{border-color:#fff}}@media (prefers-reduced-motion: reduce){.canvas-lightbox-overlay,.canvas-lightbox,.primary-button,.social-button,.lightbox-close,.capture-button,.loading-spinner{animation:none;transition:none}.primary-button:hover,.social-button:hover,.lightbox-close:hover,.capture-button:hover{transform:none}}.lightbox-close:focus-visible,.primary-button:focus-visible,.social-button:focus-visible,.capture-button:focus-visible{outline:2px solid #64ffda;outline-offset:2px}@media (min-width: 1024px){.lightbox-content::-webkit-scrollbar{width:4px}.lightbox-content::-webkit-scrollbar-track{background:#ffffff0d}.lightbox-content::-webkit-scrollbar-thumb{background:#fff3;border-radius:2px}.lightbox-content::-webkit-scrollbar-thumb:hover{background:#ffffff4d}}.canvas-lightbox-overlay,.canvas-lightbox,.primary-button,.social-button{transform:translateZ(0);-webkit-transform:translateZ(0);will-change:transform}.screenshot-image-wrapper{position:relative;display:inline-block}.screenshot-hover-overlay{pointer-events:none;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);opacity:0;display:flex;flex-direction:column;align-items:center;transition:opacity .2s}.screenshot-topbar{position:absolute;top:0;left:0;right:0;height:20px;background:#0000001a;display:flex;align-items:center;justify-content:center;z-index:10}.recapture-text{color:#ffffff4d;font-size:10px;font-weight:500;text-align:top;-moz-user-select:none;user-select:none;-webkit-user-select:none}:root{--primary-font: "Poppins";--secondary-font: "Open Sans";--white: #fbfbfb;--black: #000;--primary: #342e2e;--secondary: #cfcdc7;--gray: #817a7a;--darkgray: #444141;--border: #3b3939;--border-expanded: #949494;--border-icon: #ffff00;--border-selected: #ffffff;--border-hover: #ff0000}