::-webkit-scrollbar { width: 6px; height: 6px; }
    ::-webkit-scrollbar-track { background: #0A0A0E; }
    ::-webkit-scrollbar-thumb { background: #222230; border-radius: 9999px; }
    ::-webkit-scrollbar-thumb:hover { background: #FF2E55; }
    
    .glow-accent {
      box-shadow: 0 0 25px -5px var(--accent-color, #FF2E55);
    }

    .studio-page-shell {
      padding-top: calc(1rem + env(safe-area-inset-top, 0px));
    }

    .floating-section-menu {
      right: max(0.75rem, env(safe-area-inset-right));
      bottom: max(0.75rem, env(safe-area-inset-bottom));
    }

    @media (min-width: 768px) {
      .studio-page-shell {
        padding-top: calc(2rem + env(safe-area-inset-top, 0px));
      }
    }

    .liquid-progress-button {
      position: relative;
      isolation: isolate;
      overflow: hidden;
      background: #17131a;
    }

    .liquid-progress-button::before {
      position: absolute;
      z-index: 0;
      inset: 100% 0 0;
      background: linear-gradient(100deg, #d91f4c, #ff2e55 55%, #ff6684);
      content: "";
      transition: inset 120ms linear;
    }

    .liquid-progress-button.is-generating::before {
      inset-block-start: calc(100% - var(--generation-progress, 0%));
    }

    .liquid-progress-button.is-generating::after {
      position: absolute;
      z-index: 1;
      inset: calc(100% - var(--generation-progress, 0%)) -5% auto;
      width: 110%;
      height: 12px;
      border-radius: 50%;
      background: rgba(255, 181, 199, .7);
      content: "";
      filter: blur(5px);
      pointer-events: none;
    }

    .liquid-progress-button.is-generating {
      background: #17131a;
    }

    .liquid-progress-button > * {
      position: relative;
      z-index: 2;
    }

    .preview-cta {
      position: relative;
      overflow: hidden;
      border: 1px solid rgba(255, 46, 85, .7);
      background: linear-gradient(110deg, #FF2E55, #C81E4B 48%, #FF2E55);
      background-size: 220% 100%;
      color: #fff;
      box-shadow: 0 0 18px rgba(255, 46, 85, .22);
      animation: preview-cta-glow 2.8s ease-in-out infinite;
    }

    .preview-cta::after {
      position: absolute;
      inset: 0 auto 0 -65%;
      width: 45%;
      background: linear-gradient(100deg, transparent, rgba(255,255,255,.42), transparent);
      content: "";
      transform: skewX(-22deg);
      animation: preview-cta-shine 3.2s ease-in-out infinite;
      pointer-events: none;
    }

    .preview-cta:hover {
      border-color: rgba(255,255,255,.75);
      box-shadow: 0 0 24px rgba(255, 46, 85, .48);
    }

    @keyframes preview-cta-shine {
      0%, 35% { left: -65%; }
      75%, 100% { left: 125%; }
    }

    @keyframes preview-cta-glow {
      0%, 100% { background-position: 0% 50%; box-shadow: 0 0 14px rgba(255, 46, 85, .2); }
      50% { background-position: 100% 50%; box-shadow: 0 0 24px rgba(255, 46, 85, .42); }
    }

    @media (prefers-reduced-motion: reduce) {
      .preview-cta,
      .preview-cta::after {
        animation: none;
      }
    }
    
    input[type="range"]::-webkit-slider-thumb {
      appearance: none;
      width: 16px;
      height: 16px;
      border-radius: 50%;
      background: var(--accent-color, #FF2E55);
      cursor: pointer;
      box-shadow: 0 0 10px var(--accent-color, #FF2E55);
    }