:root {
            color-scheme: dark;
            --bg: #0f1115;
            --panel: #161a22;
            --panel-2: #1b2130;
            --muted: #aab2c0;
            --accent: #00ff66;
            --accent-2: #5ef09a;
            --border: #2a3242;
            --shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
        }

        * {
            box-sizing: border-box;
        }

        body {
            margin: 0;
            font-family: Arial, Helvetica, sans-serif;
            background:
                radial-gradient(circle at top, rgba(0, 255, 102, 0.08), transparent 35%),
                linear-gradient(180deg, #0b0d12 0%, #0f1115 100%);
            color: var(--text);
            line-height: 1.75;
        }

        .wrapper {
            max-width: 980px;
            margin: 0 auto;
            padding: 40px 20px 60px;
        }

        .hero {
            background: linear-gradient(180deg, var(--panel), rgba(22, 26, 34, 0.92));
            border: 1px solid var(--border);
            border-radius: 18px;
            padding: 32px;
            box-shadow: var(--shadow);
            margin-bottom: 24px;
        }

        .eyebrow {
            color: var(--accent);
            text-transform: uppercase;
            letter-spacing: 0.16em;
            font-size: 0.82rem;
            margin: 0 0 10px;
        }

        h1 {
            margin: 0;
            font-size: clamp(2rem, 4vw, 3.4rem);
            line-height: 1.15;
            font-size: 25px;
			color: #ffbf00;
        }

        h2 {
            color: #ff8f00;
            margin-top: 34px;
            margin-bottom: 10px;
            font-size: 22px;
        }

        h3 {
            color: #ff6c00;
            margin-top: 34px;
            margin-bottom: 10px;
            font-size: 19px;
        }

        .intro {
            color: var(--muted);
            margin-top: 14px;
            font-size: 1.08rem;
            max-width: 72ch;
        }

        .content_text {
            margin: 0 0 16px;
            color: #e7eaf0;
        }
		
		.ToolInfo {
			color: #c4ff3c;
		}
		
		.Tool {
			color: #00fdff;
			font-weight:700;
		}
		
		.Tool:hover {
			color: #0f0;
		}

        article {
            background: rgba(22, 26, 34, 0.78);
            border: 1px solid var(--border);
            border-radius: 18px;
            padding: 30px;
            box-shadow: var(--shadow);
        }

        .section {
            padding-top: 6px;
        }

        .highlight {
            color: #ff5d1c;
            font-weight: bold;
        }

        .quote {
            border-left: 4px solid #0095ff;
            background: #001e3d;
            padding: 16px 18px;
            margin: 18px 0 22px;
            border-radius: 0 12px 12px 0;
            color: #a2d8ff;
        }

        .quote_1 {
            border-left: 4px solid #ff7d13;
            background: #271303;
            padding: 16px 18px;
            margin: 18px 0 22px;
            border-radius: 0 12px 12px 0;
            color: #ffddc2;
        }

        .quote_2 {
            border-left: 4px solid #ff9e13;
            background: #2b1a03;
            padding: 16px 18px;
            margin: 18px 0 22px;
            border-radius: 0 12px 12px 0;
            color: #ffe5bf;
        }

        .quote_3 {
            border-left: 4px solid #ffba13;
            background: #271c03;
            padding: 16px 18px;
            margin: 18px 0 22px;
            border-radius: 0 12px 12px 0;
            color: #ffecbe;
        }

        .quote_4 {
            border-left: 4px solid #ffec13;
            background: #211e03;
            padding: 16px 18px;
            margin: 18px 0 22px;
            border-radius: 0 12px 12px 0;
            color: #fffabf;
        }

        .quote_5 {
            border-left: 4px solid #99ff13;
            background: #101a02;
            padding: 16px 18px;
            margin: 18px 0 22px;
            border-radius: 0 12px 12px 0;
            color: #d7ffa3;
        }

        .quote_6 {
            border-left: 4px solid #13ff46;
            background: #021606;
            padding: 16px 18px;
            margin: 18px 0 22px;
            border-radius: 0 12px 12px 0;
            color: #b8ffc7;
        }

        ul {
            margin: 12px 0 18px 22px;
            padding: 0;
        }

        li {
            margin-bottom: 10px;
            color: var(--text);
        }

        .footer-note {
            margin-top: 28px;
            color: var(--muted);
            font-size: 0.95rem;
            border-top: 1px solid var(--border);
            padding-top: 18px;
        }

        @media (max-width: 640px) {
            .wrapper {
                padding: 18px 12px 40px;
            }

            .hero,
            article {
                padding: 20px;
                border-radius: 14px;
            }

            .intro {
                font-size: 1rem;
            }

            h2 {
                font-size: 1.25rem;
            }
        }