body {
            font-family: 'Nunito', sans-serif;
            background: radial-gradient(circle at top left, #fcfafc 0%, #e8eef5 100%);
            background-attachment: fixed;
        }
        
        .font-playful { font-family: 'Fredoka', sans-serif; }
        .font-cursive { font-family: 'Great Vibes', cursive; }
        .font-elegant { font-family: 'Playfair Display', serif; }
        .font-royal { font-family: 'Cinzel', serif; }
        .font-traditional { font-family: 'Rozha One', serif; }
        .font-rounded { font-family: 'Baloo 2', sans-serif; }

        .story-container {
            width: 360px;
            height: 640px;
            position: relative;
            overflow: hidden;
            box-shadow: 0 35px 70px -15px rgba(15, 23, 42, 0.35);
            border-radius: 32px;
            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }

        @media (max-width: 400px) {
            .story-scale-wrapper {
                transform: scale(0.85);
                transform-origin: center top;
            }
        }

        /* -------------------------------------------
           PREMIUM LUXURY DESIGNER GRADIENTS
           ------------------------------------------- */
        .theme-pink { background: linear-gradient(135deg, #fff0f5 0%, #ffe4e1 50%, #ffd1dc 100%); color: #8c3b52; }
        .theme-blue { background: linear-gradient(135deg, #f0f8ff 0%, #d2e8ff 50%, #bbdbff 100%); color: #1e4572; }
        .theme-lavender { background: linear-gradient(135deg, #faf5ff 0%, #ecdfff 50%, #dfc4ff 100%); color: #581c96; }
        .theme-sunshine { background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 50%, #fde68a 100%); color: #78350f; }
        .theme-mint { background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 50%, #bbf7d0 100%); color: #14532d; }
        .theme-cream { background: linear-gradient(135deg, #fdfbf7 0%, #f7ebd3 50%, #ebdbaa 100%); color: #5c3f15; }
        .theme-peach { background: linear-gradient(135deg, #fff5f0 0%, #ffe3d1 50%, #ffd4b8 100%); color: #8a3c1e; }
        .theme-emerald { background: linear-gradient(135deg, #ecfdf5 0%, #a7f3d0 50%, #6ee7b7 100%); color: #064e3b; }
        .theme-nebula { background: linear-gradient(135deg, #1e1b4b 0%, #311042 50%, #03001e 100%); color: #f1f5f9; }
        .theme-rainbow { background: linear-gradient(135deg, #fff5f5 0%, #f5f3ff 33%, #ecfdf5 66%, #fffbeb 100%); color: #3b0764; }

        /* -------------------------------------------
           TEXTURE PATTERN OVERLAYS
           ------------------------------------------- */
        .pattern-dots::before {
            content: ""; position: absolute; inset: 0;
            background-image: radial-gradient(currentColor 8%, transparent 8%);
            background-size: 24px 24px; opacity: 0.08; pointer-events: none; z-index: 1;
        }
        .pattern-hearts::before {
            content: ""; position: absolute; inset: 0;
            background-image: radial-gradient(circle, currentColor 4%, transparent 5%), radial-gradient(circle, currentColor 4%, transparent 5%);
            background-size: 32px 32px; background-position: 0 0, 16px 16px; opacity: 0.06; pointer-events: none; z-index: 1;
        }
        .pattern-stripes::before {
            content: ""; position: absolute; inset: 0;
            background: linear-gradient(45deg, currentColor 10%, transparent 10%, transparent 50%, currentColor 50%, currentColor 60%, transparent 60%, transparent 100%);
            background-size: 40px 40px; opacity: 0.04; pointer-events: none; z-index: 1;
        }
        .pattern-stars::before {
            content: "★"; font-size: 10px; color: currentColor; position: absolute; inset: 0;
            background-image: radial-gradient(circle, transparent 90%, currentColor 90%);
            background-size: 48px 48px; opacity: 0.04; pointer-events: none; z-index: 1;
        }
        .pattern-clean::before { display: none; }

        @keyframes subtle-twinkle {
            0%, 100% { opacity: 0.4; transform: scale(1); }
            50% { opacity: 0.95; transform: scale(1.1); }
        }
        .twinkle-item { animation: subtle-twinkle 3s ease-in-out infinite; }

        /* -------------------------------------------
           FRAME AND LAYOUT STYLING
           ------------------------------------------- */
        .frame-polaroid {
            background: white; padding: 6px 6px 20px 6px;
            box-shadow: 0 12px 30px -5px rgba(0,0,0,0.25);
            border-radius: 4px; border: 1px solid rgba(0,0,0,0.06);
        }
        .frame-gold-ring {
            border: 4px solid #f59e0b;
            box-shadow: 0 0 20px rgba(245, 158, 11, 0.55);
            border-radius: 9999px;
        }
        .frame-cute-circle {
            border: 4px solid white;
            box-shadow: 0 10px 24px rgba(0,0,0,0.15);
            border-radius: 9999px;
        }
        .frame-classic {
            border: 4px solid white;
            box-shadow: 0 12px 28px rgba(0,0,0,0.14);
            border-radius: 18px;
        }

        ::-webkit-scrollbar { width: 6px; height: 6px; }
        ::-webkit-scrollbar-track { background: #f8fafc; border-radius: 10px; }
        ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; }
        ::-webkit-scrollbar-thumb:hover { background: #94a3b8; }