#app {--page: #FFFFFF; --stage: #EEEAF6; color-scheme: light;}
#app, #app {margin: 0px; background: var(--page);}
#app {font-family: Ubuntu, system-ui, sans-serif; overflow-x: clip;}
#app .mobile-stage {display: flex; justify-content: center; align-items: flex-start; background: var(--page); overflow-x: clip;}
#app .shg-rot {transform-box: view-box; transform-origin: 12px 12px; animation: 3.4s ease 0s infinite normal none running shgRot;}
#app .shg-top {transform-box: view-box; transform-origin: 12px 11.7px; animation: 3.4s ease 0s infinite normal none running shgTop;}
#app .shg-bot {transform-box: view-box; transform-origin: 12px 19.6px; animation: 3.4s ease 0s infinite normal none running shgBot;}
#app .shg-str {animation: 3.4s linear 0s infinite normal none running shgStr;}
@keyframes shgRot { 
  0% { transform: rotate(0deg); }
  76% { transform: rotate(0deg); animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
  100% { transform: rotate(180deg); }
}
@keyframes shgTop { 
  0% { transform: scaleY(1); animation-timing-function: cubic-bezier(0.35, 0, 0.65, 1); }
  73%, 100% { transform: scaleY(0); }
}
@keyframes shgBot { 
  0% { transform: scaleY(0); animation-timing-function: cubic-bezier(0.35, 0, 0.65, 1); }
  73%, 100% { transform: scaleY(1); }
}
@keyframes shgStr { 
  0% { opacity: 0; stroke-dashoffset: 0; }
  4% { opacity: 1; }
  68% { opacity: 1; }
  73% { opacity: 0; stroke-dashoffset: -16; }
  100% { opacity: 0; stroke-dashoffset: -16; }
}
#app {scroll-behavior: smooth;}
#app input[type="range"]:focus-visible::-moz-range-thumb {box-shadow: rgba(91, 75, 209, 0.25) 0px 0px 0px 4px;}
#app .mobile-stage > div {width: 100%; min-width: 0px;}
@media (max-width: 439px) {#app .shopr-v2-phone-art {zoom: 0.9;}}
@media (max-width: 399px) {#app .shopr-v2-phone-art {zoom: 0.8;}}
@media (max-width: 359px) {#app .shopr-v2-phone-art {zoom: 0.7;}}
#app .shopr-v2-menu {position: relative;}
#app .shopr-v2-menu summary {width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; cursor: pointer; list-style: none;}
#app .shopr-v2-menu summary::-webkit-details-marker {display: none;}
#app .shopr-v2-menu nav {position: absolute; right: 0px; top: 48px; z-index: 100; width: 220px; padding: 8px; border: 1px solid rgb(236, 234, 243); border-radius: 8px; background: rgb(255, 255, 255); box-shadow: rgba(30, 27, 58, 0.125) 0px 8px 24px;}
#app .shopr-v2-menu nav a {display: block; padding: 12px; color: rgb(30, 27, 58); text-decoration: none;}
@media (min-width: 761px) and (max-width: 1000px) {#app h1 {font-size: 44px !important;}}
@media (prefers-reduced-motion: reduce) {#app {scroll-behavior: auto;}
#app *, #app ::before, #app ::after {animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;}}
#app button { font-family: inherit; line-height: normal; }
#app { width: 100%; }
#app h1, #app h2, #app h3 { color: inherit; overflow-wrap: anywhere; }
#app .shopr-copy-status { position: absolute; top: 100%; left: 0; color: white; font-size: 13px; padding-top: 4px; }
#app a:focus-visible, #app button:focus-visible { outline: 2px solid #232440; outline-offset: 4px; }