  <style>
        /* --- איפוס בסיסי --- */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            background-color: #0a0a0f;
            font-family: 'IBM Plex Sans Hebrew', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            color: #e8e8f0; 
            display: flex;
            flex-direction: column;
            align-items: center;
            min-height: 100vh;
            position: relative;
            letter-spacing: 0.5px;
        }

        /* --- הרקע והאנימציות --- */
        .background-container {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1; 
            background: linear-gradient(135deg, #0a0a0f 0%, #0f0f1a 100%);
            overflow: hidden;
        }

        .glow-1 {
            position: absolute;
            width: 600px;
            height: 600px;
            background: radial-gradient(circle, rgba(59, 130, 246, 0.15) 0%, rgba(59, 130, 246, 0.05) 40%, transparent 70%);
            border-radius: 50%;
            filter: blur(80px);
            top: -150px;
            right: -150px;
            animation: float1 20s ease-in-out infinite;
        }

        .glow-2 {
            position: absolute;
            width: 500px;
            height: 500px;
            background: radial-gradient(circle, rgba(217, 119, 6, 0.12) 0%, rgba(217, 119, 6, 0.04) 35%, transparent 65%);
            border-radius: 50%;
            filter: blur(90px);
            bottom: -100px;
            left: -100px;
            animation: float2 25s ease-in-out infinite reverse;
        }

        @keyframes float1 {
            0%, 100% { transform: translate(0, 0) scale(1); }
            50% { transform: translate(30px, -30px) scale(1.05); }
        }

        @keyframes float2 {
            0%, 100% { transform: translate(0, 0) scale(1); }
            50% { transform: translate(-30px, 30px) scale(0.95); }
        }

        .code-symbols {
            position: absolute;
            width: 100%;
            height: 100%;
            overflow: hidden;
            z-index: 1;
        }

        .symbol {
            position: absolute;
            font-family: 'Courier New', monospace;
            font-size: 120px;
            font-weight: bold;
            opacity: 0.04;
            color: #3b82f6;
            pointer-events: none;
            will-change: transform;
        }

        .symbol:nth-child(1) { top: 15%; left: 10%; animation: float-symbol 12s ease-in-out infinite, rotate-symbol 8s linear infinite; }
        .symbol:nth-child(2) { top: 65%; right: 15%; font-size: 100px; animation: float-symbol 14s ease-in-out infinite reverse, rotate-symbol 10s linear infinite reverse; }
        .symbol:nth-child(3) { top: 40%; right: 5%; font-size: 90px; animation: float-symbol 16s ease-in-out infinite, rotate-symbol 12s linear infinite; }
        .symbol:nth-child(4) { bottom: 20%; left: 20%; font-size: 110px; animation: float-symbol 13s ease-in-out infinite reverse, rotate-symbol 9s linear infinite reverse; }
        .symbol:nth-child(5) { top: 25%; right: 25%; font-size: 95px; animation: float-symbol 15s ease-in-out infinite, rotate-symbol 11s linear infinite; }

        @keyframes float-symbol {
            0%, 100% { transform: translateY(0px) scale(1); }
            50% { transform: translateY(40px) scale(1.08); }
        }

        @keyframes rotate-symbol {
            0% { transform: rotateZ(0deg); }
            100% { transform: rotateZ(360deg); }
        }

        /* --- תוכן המדריך --- */
        .content-wrapper {
            position: relative;
            z-index: 10;
            width: 100%;
            max-width: 900px; 
            display: flex;
            flex-direction: column;
            align-items: center;
            flex-grow: 1;
            padding: 40px 20px;
        }

        h1, h2, h3 {
            text-align: center;
            margin-bottom: 15px;
            color: #ffffff;
        }

        h1 {
            text-shadow: 0 4px 15px rgba(0,0,0,0.5);
        }

        p {
            font-size: 1.1rem;
            line-height: 1.6;
            text-align: center;
            color: #94a3b8;
            margin-bottom: 15px;
        }

        hr {
            border: none;
            height: 2px;
            background-color: #d9a536; 
            width: 80%;
            margin: 30px auto;
        }
        
        ul {
            text-align: right;
            display: inline-block;
            direction: rtl;
            background-color: rgba(22, 28, 45, 0.7);
            backdrop-filter: blur(8px);
            border: 1px solid #2a3143;
            padding: 30px 50px 30px 40px;
            border-radius: 12px;
            box-shadow: 0 8px 20px rgba(0,0,0,0.3);
            margin-bottom: 20px;
            width: 100%;
        }

        li {
            margin-bottom: 15px;
            font-size: 1.1rem;
            color: #e8e8f0;
            line-height: 1.5;
        }

        li h3 {
            display: inline;
            margin: 0;
        }
        
        .back-link {
            color: #3b82f6;
            text-decoration: none;
            font-weight: bold;
            margin: 20px 0;
            font-size: 1.1rem;
            transition: color 0.2s;
        }
        
        .back-link:hover {
            color: #d9a536;
            text-decoration: underline;
        }

        /* הגבלת גודל ועיצוב התמונות במדריך */
        .guide-image {
            width: 100% !important; 
            max-width: 700px;
            height: auto !important;
            border-radius: 10px;
            box-shadow: 0 8px 25px rgba(0,0,0,0.5);
            border: 1px solid #2a3143; 
            margin: 20px auto;
            display: block;
        }

        footer {
            width: 100%;
            padding: 20px;
            background-color: rgba(10, 10, 15, 0.9); 
            color: white; 
            border-top: 3px solid #d9a536; 
            text-align: center;
            margin-top: auto;
            z-index: 10;
        }

        footer h1 {
            font-size: 1.2rem;
            margin: 0;
        }
    </style>
