html {
  scroll-behavior: smooth;
}

/* Aqua Button Styles */
    :root {
      --aqua-anim: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .aqua-btn {
      all: unset;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      position: relative;
      box-sizing: border-box;
      cursor: pointer;
      font-family: 'Inter', -apple-system, sans-serif;
      font-weight: 500;
      font-size: 1rem;
      padding: 0.65em 2em;
      border-radius: 500px;
      transition: transform 0.1s var(--aqua-anim), box-shadow 0.3s ease;
      isolation: isolate;
    }

    .aqua-btn::before {
      content: "";
      position: absolute;
      top: 3.5%;
      left: 10px;
      right: 10px;
      height: 48.5%;
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 100%);
      border-radius: 500px;
      z-index: 10;
      pointer-events: none;
      transition: opacity 0.3s ease, transform 0.1s ease;
    }

    .aqua-btn::after {
      content: "";
      position: absolute;
      inset: 0;
      opacity: 0;
      border-radius: inherit;
      z-index: 1;
      transition: opacity 0.4s ease;
    }

    .aqua-btn span {
      position: relative;
      z-index: 20;
      pointer-events: none;
    }

    .aqua-blue {
      background: linear-gradient(180deg, rgba(90, 145, 215, 0.6) 0%, #A8DEF8 100%);
      color: #1a4a80;
      text-shadow: 0 1px 0 rgba(186, 227, 246, 0.6);
      box-shadow:
        0 0 0 1.5px rgba(75, 130, 210, 0.7),
        0px 3px 9px rgba(0, 128, 161, 0.36),
        0px 1px 1px rgba(14, 97, 192, 0.22),
        0px 3px 2px rgba(14, 97, 192, 0.22),
        inset 0px 0px 12px rgba(255, 255, 255, 0.21);
    }

    .aqua-blue::after {
      background: linear-gradient(180deg, rgba(62, 131, 221, 0.75) 0%, #8ed8ff 100%);
    }

    .aqua-blue:hover {
      box-shadow:
        0 0 0 1.5px rgba(80, 135, 212, 0.75),
        0px 4px 12px rgba(0, 128, 161, 0.38),
        0px 2px 3px rgba(14, 97, 192, 0.2),
        0px 4px 4px rgba(14, 97, 192, 0.18),
        inset 0px 0px 14px rgba(255, 255, 255, 0.28);
    }

    .aqua-white {
      background: linear-gradient(180deg, rgba(220, 220, 220, 0.4) 0%, rgba(255, 255, 255, 0.75) 100%);
      color: #3D3F44;
      text-shadow: 0 0.05em 0 rgba(255, 255, 255, 0.8);
      box-shadow:
        0 0 0 1px rgba(160, 165, 172, 0.4),
        0px 2px 6px rgba(158, 158, 158, 0.28),
        0px 1px 2px rgba(183, 183, 183, 0.16),
        0px 2px 2px rgba(81, 92, 105, 0.14),
        inset 0px 0px 10px rgba(255, 255, 255, 0.35);
    }

    .dark .aqua-white {
      background: linear-gradient(180deg, rgba(39, 39, 42, 0.6) 0%, rgba(24, 24, 27, 0.8) 100%);
      color: #E2E8F0;
      text-shadow: 0 1px 1px rgba(0,0,0,0.2);
      box-shadow:
        0 0 0 1px rgba(82, 82, 91, 0.5),
        0px 4px 12px rgba(0, 0, 0, 0.4),
        inset 0px 0px 10px rgba(255, 255, 255, 0.05);
    }

    .aqua-white::after {
      background: linear-gradient(180deg, rgba(205, 205, 205, 0.7) 0%, #fcfcfc 100%);
    }

    .dark .aqua-white::after {
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.1) 100%);
    }

    .aqua-white:hover {
      box-shadow:
        0 0 0 1px rgba(155, 160, 168, 0.55),
        0px 4px 12px rgba(158, 158, 158, 0.38),
        0px 2px 3px rgba(183, 183, 183, 0.2),
        0px 4px 4px rgba(81, 92, 105, 0.2),
        inset 0px 0px 14px rgba(255, 255, 255, 0.28);
    }

    .dark .aqua-white:hover {
        box-shadow:
            0 0 0 1px rgba(100, 116, 139, 0.6),
            0px 6px 16px rgba(0, 0, 0, 0.5),
            inset 0px 0px 14px rgba(255, 255, 255, 0.08);
    }

    .dark .aqua-white::before {
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0) 100%);
    }

    .aqua-btn:hover::after {
      opacity: 1;
    }

    .aqua-btn:active {
      transform: scale(0.975);
    }

    .aqua-btn:active::before {
      opacity: 0.7;
    }

    /* Heading letter spacing */
    .heading-tight {
      letter-spacing: -0.02em;
    }

    /* Subtle Aqua-style scanlines for hero */
    .aqua-scanlines {
      background-image: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 3px,
        rgba(113, 113, 122, 0.04) 3px,
        rgba(113, 113, 122, 0.04) 6px
      );
      background-size: 100% 4px;
    }
    
    .aqua-bg {
        background: linear-gradient(180deg, rgb(88 148 224) 0%, #8dd7fe 100%);
        box-shadow: 0 0 0 1.5px rgba(80, 135, 212, 0.75),        0px 4px 12px rgba(0, 128, 161, 0.38),        0px 2px 3px rgba(14, 97, 192, 0.2),        0px 4px 4px rgba(14, 97, 192, 0.18),        inset 0px 0px 14px rgba(255, 255, 255, 0.28);
        position: relative;
        color: white;
    }
    /* Product card styling */
    .product-card {
      background: linear-gradient(180deg, rgba(245, 248, 252, 0.5) 0%, #ffffff 100%);
      box-shadow:
        0 0 0 1px rgba(180, 190, 205, 0.4),
        0px 3px 9px rgba(168, 168, 168, 0.25),
        0px 1px 1px rgba(140, 150, 165, 0.15),
        0px 3px 2px rgba(91, 102, 115, 0.12),
        inset 0px 0px 12px rgba(255, 255, 255, 0.4);
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      position: relative;
      overflow: hidden;
    }

    .dark .product-card {
      background: linear-gradient(180deg, rgba(45, 45, 49, 0.5) 0%, rgba(28, 28, 31, 0.8) 100%);
      box-shadow:
        0 0 0 1px rgba(70, 70, 77, 0.55),
        0px 5px 15px rgba(0, 0, 0, 0.32),
        inset 0px 0px 13px rgba(255, 255, 255, 0.045);
    }


    .product-card::before {
      content: "";
      position: absolute;
      top: 2%;
      left: 3%;
      right: 3%;
      height: 30%;
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%);
      border-radius: 16px 16px 50% 50%;
      z-index: 1;
      pointer-events: none;
      /* filter: blur(1px); */
    }

    .dark .product-card::before {
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0) 100%);
    }

    .product-card:hover {
      transform: translateY(-4px);
      box-shadow:
        0 0 0 1px rgba(160, 175, 195, 0.5),
        0px 5px 14px rgba(168, 168, 168, 0.3),
        0px 2px 3px rgba(140, 150, 165, 0.18),
        0px 5px 4px rgba(91, 102, 115, 0.15),
        inset 0px 0px 14px rgba(255, 255, 255, 0.5);
    }

    /* Merch shop */
    .shop-card .aqua-btn {
      justify-content: space-between;
    }

    .shop-type {
      flex-shrink: 0;
      padding: 0.2rem 0.5rem;
      border: 1px solid rgba(161, 161, 170, 0.35);
      border-radius: 999px;
      color: #71717a;
      font-size: 0.68rem;
      line-height: 1;
      text-transform: uppercase;
      letter-spacing: 0.06em;
    }

    .dark .shop-type {
      border-color: rgba(113, 113, 122, 0.5);
      color: #a1a1aa;
    }

    .merch-preview {
      display: block;
      width: 100%;
      aspect-ratio: 1 / 1;
      object-fit: cover;
      height: auto;
      background-color: #d1d1d1;
      cursor: zoom-in;
    }

    .dark .merch-preview,
    .dark .lightbox img {
      background-color: #3D3D3D;
    }

    .carousel-arrow {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      border-radius: 9999px;
      background: rgba(255, 255, 255, 0.92);
      padding: 0.4rem 0.75rem;
      color: #1f2937;
      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
      font-size: 1.5rem;
      line-height: 1;
    }

    .carousel-arrow:focus-visible,
    .carousel-dots button:focus-visible {
      outline: 2px solid #2563eb;
      outline-offset: 2px;
    }

    .carousel-dots {
      position: absolute;
      left: 50%;
      bottom: 0.75rem;
      display: flex;
      transform: translateX(-50%);
      gap: 0.5rem;
    }

    .carousel-dots button {
      width: 0.65rem;
      height: 0.65rem;
      border-radius: 9999px;
      background: rgba(255, 255, 255, 0.65);
      box-shadow: 0 0 0 1px rgba(71, 85, 105, 0.8);
    }

    .carousel-dots button[aria-current="true"] {
      background: #fff;
    }

    .lightbox {
      position: fixed;
      inset: 0;
      z-index: 100;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 2rem;
      background: rgba(0, 0, 0, 0.88);
      opacity: 1;
      transition: opacity 250ms ease;
    }

    .lightbox.hidden {
      display: flex;
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
    }

    .lightbox:not(.hidden) {
      visibility: visible;
    }

    @media (prefers-reduced-motion: reduce) {
      .lightbox {
        transition: none;
      }
    }

    .lightbox img {
      max-width: min(92vw, 72rem);
      max-height: 88vh;
      object-fit: contain;
      background: #d1d1d1;
    }

    .lightbox-close {
      position: absolute;
      top: 1rem;
      right: 1.25rem;
      color: white;
      font-size: 2.5rem;
      line-height: 1;
    }

    .merch-mark {
      display: grid;
      place-items: center;
      width: 2rem;
      height: 2.15rem;
      border: 2px solid #f97316;
      border-radius: 48% 48% 44% 44%;
      color: #f97316;
      font-family: W95FA, monospace;
      font-size: 1.05rem;
      font-weight: 700;
      line-height: 1;
    }

    .merch-hat {
      position: relative;
      z-index: 1;
      display: grid;
      place-items: center;
      width: 8.5rem;
      height: 5.7rem;
      margin-top: 1rem;
      border-radius: 5rem 5rem 1.3rem 1.3rem;
      background: #18181b;
      box-shadow: inset 0 -1rem 1.5rem rgba(0, 0, 0, 0.35), 0 1rem 1.5rem rgba(24, 24, 27, 0.18);
    }

    .merch-hat::after {
      content: "";
      position: absolute;
      right: -3.4rem;
      bottom: -0.25rem;
      width: 6rem;
      height: 1.65rem;
      border-radius: 0 100% 60% 50%;
      background: #27272a;
      transform: rotate(5deg);
      box-shadow: 0 0.45rem 0.7rem rgba(24, 24, 27, 0.2);
    }

    .merch-hoodie {
      position: relative;
      z-index: 1;
      display: grid;
      place-items: center;
      width: 9.5rem;
      height: 10.5rem;
      margin-top: 2.2rem;
      clip-path: polygon(26% 8%, 36% 0, 64% 0, 74% 8%, 100% 25%, 86% 45%, 76% 38%, 76% 100%, 24% 100%, 24% 38%, 14% 45%, 0 25%);
      background: linear-gradient(100deg, #27272a 0%, #3f3f46 48%, #27272a 100%);
      filter: drop-shadow(0 1rem 0.8rem rgba(24, 24, 27, 0.2));
    }

    .merch-hoodie::before {
      content: "";
      position: absolute;
      top: -2.5rem;
      width: 5.7rem;
      height: 5.2rem;
      border: 1rem solid #27272a;
      border-radius: 50% 50% 35% 35%;
    }

    .merch-hoodie .merch-mark {
      margin-top: 1.2rem;
    }

    .merch-tote {
      position: relative;
      z-index: 1;
      display: grid;
      place-items: center;
      width: 9.2rem;
      height: 10.2rem;
      margin-top: 2.8rem;
      background: linear-gradient(100deg, #eee7d7 0%, #fffaf0 48%, #e3dac7 100%);
      box-shadow: 0 1rem 1.5rem rgba(24, 24, 27, 0.18);
    }

    .merch-tote::before {
      content: "";
      position: absolute;
      top: -3.8rem;
      width: 5.5rem;
      height: 5rem;
      border: 0.7rem solid #e8dfcc;
      border-bottom: 0;
      border-radius: 3rem 3rem 0 0;
    }

    /* Screenshot placeholder with Aqua accent */
    .screenshot-placeholder {
      background: linear-gradient(180deg, #f1f5f9 0%, #e2e8f0 100%);
      border: 1px solid rgba(203, 213, 225, 0.6);
      position: relative;
      overflow: hidden;
    }

    .dark .screenshot-placeholder {
      background: linear-gradient(180deg, #303034 0%, #1c1c1f 100%);
      border-color: rgba(70, 70, 77, 0.6);
    }

    .screenshot-placeholder::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 28px;
      background: linear-gradient(180deg, rgba(255,255,255,0.8) 0%, rgba(241,245,249,0.4) 100%);
      border-bottom: 1px solid rgba(203, 213, 225, 0.4);
    }

    .dark .screenshot-placeholder::before {
      background: linear-gradient(180deg, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0.02) 100%);
      border-bottom-color: rgba(82, 82, 91, 0.4);
    }

    .screenshot-placeholder::after {
      content: "";
      position: absolute;
      top: 8px;
      left: 12px;
      width: 44px;
      height: 12px;
      background-image: 
        radial-gradient(circle at center, #ff5f57 5px, transparent 5px),
        radial-gradient(circle at center, #febc2e 5px, transparent 5px),
        radial-gradient(circle at center, #28c840 5px, transparent 5px);
      background-size: 16px 12px;
      background-position: 0 0, 16px 0, 32px 0;
      background-repeat: no-repeat;
    }

    /* Aqua well - inset section with darker bg and subtle scanlines */
    .aqua-well {
      background-color: #eef2f6;
      background-image: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 4px,
        rgba(113, 113, 122, 0.025) 4px,
        rgba(113, 113, 122, 0.025) 8px
      );
    }

    /* Aqua 3D divider between sections */
    .aqua-divider {
      border: none;
      height: 2px;
      background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.06) 0%,
        rgba(0, 0, 0, 0.06) 50%,
        rgba(255, 255, 255, 0.7) 50%,
        rgba(255, 255, 255, 0.7) 100%
      );
    }

    .dark .aqua-divider {
      background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.25) 0%,
        rgba(0, 0, 0, 0.25) 50%,
        rgba(255, 255, 255, 0.05) 50%,
        rgba(255, 255, 255, 0.05) 100%
      );
    }

    /* Aqua-styled badge - lighter glass blob */
    .aqua-badge {
      background: linear-gradient(180deg, rgba(220, 220, 220, 0.4) 0%, rgba(255, 255, 255, 0.75) 100%);
      box-shadow:
        0 0 0 1px rgba(160, 165, 172, 0.4),
        0px 2px 6px rgba(158, 158, 158, 0.28),
        0px 1px 2px rgba(183, 183, 183, 0.16),
        0px 2px 2px rgba(81, 92, 105, 0.14),
        inset 0px 0px 10px rgba(255, 255, 255, 0.35);
      position: relative;
    }

    .dark .aqua-badge {
      background: linear-gradient(180deg, rgba(39, 39, 42, 0.6) 0%, rgba(24, 24, 27, 0.8) 100%);
      box-shadow:
        0 0 0 1px rgba(82, 82, 91, 0.5),
        0px 4px 12px rgba(0, 0, 0, 0.4),
        inset 0px 0px 10px rgba(255, 255, 255, 0.05);
    }

    .aqua-badge::before {
      content: "";
      position: absolute;
      top: 8%;
      left: 2%;
      right: 2%;
      height: 45%;
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 100%);
      border-radius: 100px;
      pointer-events: none;
    }

    .dark .aqua-badge::before {
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 100%);
    }

    /* Subtle glow effect */
    .glow-subtle {
      position: relative;
    }

    .glow-subtle::before {
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 120%;
      height: 120%;
      background: radial-gradient(ellipse at center, rgba(186, 227, 246, 0.15) 0%, transparent 70%);
      pointer-events: none;
      z-index: -1;
    }

    /* Aqua gradient text - 3D glossy material like button */
    .aqua-text {
      background: linear-gradient(180deg,
        #6396d7 0%,
        #5d9ae3 40%,
        #7ab4ed 60%,
        #a8e2fd 100%);

        /* #7ab4ed 0%,
        #a8e2fd 40%,
        #c8f0ff 60%,
        #a8e2fd 100%); */

  /* #5d9ae3 0%,
        #8bd5fd 40%,
        #a8e4ff 60%,
        #8bd5fd 100%); */

      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      text-shadow:
        0 1px 0 rgba(255, 255, 255, 0.25),
        0 -1px 0 rgba(60, 120, 180, 0.3),
        0 4px 6px rgba(0, 100, 150, 0.25),
        0 1px 2px rgba(14, 97, 192, 0.2);
      position: relative;
    }

    /* Aqua Progress Bar */
    .aqua-progress {
      height: 20px;
      background: linear-gradient(180deg, rgba(220, 220, 220, 0.55) 0%, #FFFFFF 100%);
      border-radius: 500px;
      box-shadow:
        0 0 0 1.5px rgba(160, 165, 172, 0.55),
        0px 3px 9px rgba(158, 158, 158, 0.36),
        0px 1px 1px rgba(183, 183, 183, 0.22),
        inset 0px 2px 4px rgba(0, 0, 0, 0.08);
      overflow: hidden;
      position: relative;
    }

    .aqua-progress-fill {
      height: 100%;
      background: linear-gradient(180deg, rgba(90, 145, 215, 0.6) 0%, #A8DEF8 100%);
      border-radius: 500px;
      box-shadow:
        0 0 0 1px rgba(75, 130, 210, 0.5),
        inset 0px 0px 8px rgba(255, 255, 255, 0.3);
      position: relative;
      transition: width 0.3s ease;
    }

    .aqua-progress-fill::before {
      content: "";
      position: absolute;
      top: 10%;
      left: 4px;
      right: 4px;
      height: 40%;
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 100%);
      border-radius: 500px;
      pointer-events: none;
    }

    /* Aqua Progress Bar - Striped Variant (candy cane animation) */
    .aqua-progress-striped .aqua-progress-fill {
      background-color: #A8DEF8;
      background-image:
        linear-gradient(
          -45deg,
          rgba(255, 255, 255, 0.3) 25%,
          transparent 25%,
          transparent 50%,
          rgba(255, 255, 255, 0.3) 50%,
          rgba(255, 255, 255, 0.3) 75%,
          transparent 75%,
          transparent
        ),
        linear-gradient(180deg, rgba(90, 145, 215, 0.7) 0%, #A8DEF8 100%);
      background-size: 24px 24px, 100% 100%;
      animation: aqua-stripes 0.8s linear infinite;
    }

    .aqua-progress-striped .aqua-progress-fill::before {
      z-index: 2;
    }

    @keyframes aqua-stripes {
      from { background-position: 0 0, 0 0; }
      to { background-position: 24px 0, 0 0; }
    }

    /* Aqua Range Slider */
    .aqua-slider {
      -webkit-appearance: none;
      appearance: none;
      height: 20px;
      background: linear-gradient(180deg, rgba(235, 235, 235, 0.6) 0%, #FFFFFF 100%);
      border-radius: 500px;
      box-shadow:
        0 0 0 1.5px rgba(160, 165, 172, 0.45),
        inset 0px 1px 2px rgba(0, 0, 0, 0.04);
      cursor: pointer;
    }

    .aqua-slider::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      width: 22px;
      height: 22px;
      border-radius: 500px;
      /* Gloss baked into background gradient */
      background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 50%),
        linear-gradient(180deg, rgba(90, 145, 215, 0.6) 0%, #A8DEF8 100%);
      box-shadow:
        0 0 0 1.5px rgba(75, 130, 210, 0.7),
        0px 3px 9px rgba(0, 128, 161, 0.36),
        0px 1px 1px rgba(14, 97, 192, 0.22),
        0px 3px 2px rgba(14, 97, 192, 0.22),
        inset 0px 0px 12px rgba(255, 255, 255, 0.21);
      cursor: pointer;
    }

    .aqua-slider::-moz-range-thumb {
      width: 22px;
      height: 22px;
      border: none;
      border-radius: 500px;
      /* Gloss baked into background gradient */
      background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 50%),
        linear-gradient(180deg, rgba(90, 145, 215, 0.6) 0%, #A8DEF8 100%);
      box-shadow:
        0 0 0 1.5px rgba(75, 130, 210, 0.7),
        0px 3px 9px rgba(0, 128, 161, 0.36),
        0px 1px 1px rgba(14, 97, 192, 0.22),
        0px 3px 2px rgba(14, 97, 192, 0.22),
        inset 0px 0px 12px rgba(255, 255, 255, 0.21);
      cursor: pointer;
    }

    .aqua-slider::-webkit-slider-thumb:hover {
      background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0) 50%),
        linear-gradient(180deg, rgba(62, 131, 221, 0.75) 0%, #8ed8ff 100%);
      box-shadow:
        0 0 0 1.5px rgba(80, 135, 212, 0.75),
        0px 4px 12px rgba(0, 128, 161, 0.38),
        0px 2px 3px rgba(14, 97, 192, 0.2),
        0px 4px 4px rgba(14, 97, 192, 0.18),
        inset 0px 0px 14px rgba(255, 255, 255, 0.28);
    }

    .aqua-slider::-moz-range-thumb:hover {
      background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0) 50%),
        linear-gradient(180deg, rgba(62, 131, 221, 0.75) 0%, #8ed8ff 100%);
      box-shadow:
        0 0 0 1.5px rgba(80, 135, 212, 0.75),
        0px 4px 12px rgba(0, 128, 161, 0.38),
        0px 2px 3px rgba(14, 97, 192, 0.2),
        0px 4px 4px rgba(14, 97, 192, 0.18),
        inset 0px 0px 14px rgba(255, 255, 255, 0.28);
    }

    /* Aqua Select/Dropdown */
    .aqua-select, select {
      -webkit-appearance: none;
      appearance: none;
      font-family: inherit;
      font-size: 0.9rem;
      padding: 0.5em 2.2em 0.5em 0.9em;
      border: none;
      border-radius: 6px;
      cursor: pointer;
      background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23475569' d='M2 4l4 4 4-4'/%3E%3C/svg%3E") no-repeat right 0.7em center,
        linear-gradient(180deg, rgba(235, 235, 235, 0.5) 0%, #FFFFFF 100%);
      background-size: 10px, 100%;
      color: #334155;
      box-shadow:
        0 0 0 1.5px rgba(160, 165, 172, 0.55),
        0px 2px 6px rgba(158, 158, 158, 0.3),
        0px 1px 1px rgba(183, 183, 183, 0.2),
        inset 0px 0px 8px rgba(255, 255, 255, 0.3);
      transition: box-shadow 0.2s ease;
    }

    .aqua-select, select:hover {
      box-shadow:
        0 0 0 1.5px rgba(155, 160, 168, 0.6),
        0px 3px 8px rgba(158, 158, 158, 0.35),
        0px 1px 2px rgba(183, 183, 183, 0.22),
        inset 0px 0px 10px rgba(255, 255, 255, 0.35);
    }

    .aqua-select, select:focus {
      outline: none;
      box-shadow:
        0 0 0 1.5px rgba(75, 130, 210, 0.7),
        0px 3px 8px rgba(0, 128, 161, 0.25),
        inset 0px 0px 10px rgba(255, 255, 255, 0.35);
    }

    /* Aqua Checkbox */
    .aqua-checkbox, input[type="checkbox"] {
      -webkit-appearance: none;
      appearance: none;
      width: 16px;
      height: 16px;
      border-radius: 4px;
      cursor: pointer;
      background: linear-gradient(180deg, rgba(235, 235, 235, 0.5) 0%, #FFFFFF 100%);
      box-shadow:
        0 0 0 1.5px rgba(160, 165, 172, 0.55),
        0px 2px 4px rgba(158, 158, 158, 0.25),
        inset 0px 1px 2px rgba(0, 0, 0, 0.05);
      transition: all 0.2s ease;
      position: relative;
    }

    .aqua-checkbox, input[type="checkbox"]:hover {
      box-shadow:
        0 0 0 1.5px rgba(155, 160, 168, 0.65),
        0px 2px 6px rgba(158, 158, 158, 0.3),
        inset 0px 1px 2px rgba(0, 0, 0, 0.05);
    }

    .aqua-checkbox, input[type="checkbox"]:checked {
      background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 50%),
        linear-gradient(180deg, rgba(90, 145, 215, 0.6) 0%, #A8DEF8 100%);
      box-shadow:
        0 0 0 1.5px rgba(75, 130, 210, 0.7),
        0px 2px 6px rgba(0, 128, 161, 0.3),
        inset 0px 0px 8px rgba(255, 255, 255, 0.25);
    }

    .aqua-checkbox, input[type="checkbox"]:checked::after {
      content: "";
      position: absolute;
      top: 2px;
      left: 5px;
      width: 4px;
      height: 8px;
      border: solid #1a4a80;
      border-width: 0 2px 2px 0;
      transform: rotate(45deg);
    }

    /* Aqua Radio */
    .aqua-radio, input[type="radio"] {
      -webkit-appearance: none;
      appearance: none;
      width: 16px;
      height: 16px;
      border-radius: 50%;
      cursor: pointer;
      background: linear-gradient(180deg, rgba(235, 235, 235, 0.5) 0%, #FFFFFF 100%);
      box-shadow:
        0 0 0 1.5px rgba(160, 165, 172, 0.55),
        0px 2px 4px rgba(158, 158, 158, 0.25),
        inset 0px 1px 2px rgba(0, 0, 0, 0.05);
      transition: all 0.2s ease;
      position: relative;
    }

    .aqua-radio, input[type="radio"]:hover {
      box-shadow:
        0 0 0 1.5px rgba(155, 160, 168, 0.65),
        0px 2px 6px rgba(158, 158, 158, 0.3),
        inset 0px 1px 2px rgba(0, 0, 0, 0.05);
    }

    .aqua-radio, input[type="radio"]:checked {
      background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 50%),
        linear-gradient(180deg, rgba(90, 145, 215, 0.6) 0%, #A8DEF8 100%);
      box-shadow:
        0 0 0 1.5px rgba(75, 130, 210, 0.7),
        0px 2px 6px rgba(0, 128, 161, 0.3),
        inset 0px 0px 8px rgba(255, 255, 255, 0.25);
    }

    .aqua-radio, input[type="radio"]:checked::after {
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: #1a4a80;
    }

    /* Aqua Icon Well - for icon/image placeholders */
    .aqua-icon-well {
      background: linear-gradient(180deg, rgba(240, 240, 240, 0.5) 0%, #FFFFFF 100%);
      box-shadow:
        0 0 0 1.5px rgba(160, 165, 172, 0.4),
        inset 0px 1px 3px rgba(0, 0, 0, 0.06);
    }

    .dark .aqua-icon-well {
      background: linear-gradient(180deg, #27272a 0%, #18181b 100%);
      box-shadow:
        0 0 0 1.5px rgba(82, 82, 91, 0.4),
        inset 0px 1px 3px rgba(0, 0, 0, 0.2);
    }

    /* For dropping in images with aqua overlay effect */
    .aqua-icon-well img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: inherit;
      mix-blend-mode: multiply;
      opacity: 0.9;
    }