\n  :root {\n    --primary: #1e90ff;\n    --secondary: #00bfff;\n    --accent: #ff7f50;\n    --text: #333333;\n    --light: #f8f9fa;\n    --dark: #212529;\n    --success: #28a745;\n    --warning: #ffc107;\n    --danger: #dc3545;\n  }\n\n  * {\n    margin: 0;\n    padding: 0;\n    box-sizing: border-box;\n  }\n\n  body {\n    font-family: 'Roboto', 'Open Sans', sans-serif;\n    line-height: 1.6;\n    color: var(--text);\n    background: linear-gradient(135deg, #f5f7fa 0%, #e4e8eb 100%);\n    min-height: 100%;\n    overflow-x: hidden;\n  }\n\n  .container {\n    max-width: 1200px;\n    margin: 0 auto;\n    padding: 0 20px;\n  }\n\n  /* Header Styles */\n  .header {\n    background: linear-gradient(135deg, var(--primary), var(--secondary));\n    color: white;\n    padding: 2rem 0;\n    text-align: center;\n    position: relative;\n    overflow: hidden;\n    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);\n  }\n\n  .header::before {\n    content: '';\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    background: url('https://images.gptkong.com/demo/sample1.png') no-repeat center right;\n    background-size: contain;\n    opacity: 0.1;\n    pointer-events: none;\n  }\n\n  .header h1 {\n    font-size: 2.5rem;\n    margin-bottom: 1rem;\n    position: relative;\n    z-index: 1;\n    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);\n  }\n\n  .header p {\n    font-size: 1.2rem;\n    max-width: 800px;\n    margin: 0 auto;\n    position: relative;\n    z-index: 1;\n  }\n\n  /* Navigation */\n  .navbar {\n    position: sticky;\n    top: 0;\n    background: white;\n    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);\n    z-index: 1000;\n  }\n\n  .nav-container {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: 1rem 2rem;\n  }\n\n  .nav-links {\n    display: flex;\n    gap: 2rem;\n  }\n\n  .nav-links a {\n    color: var(--text);\n    text-decoration: none;\n    font-weight: 500;\n    position: relative;\n    padding: 0.5rem 0;\n    transition: color 0.3s ease;\n  }\n\n  .nav-links a::after {\n    content: '';\n    position: absolute;\n    bottom: 0;\n    left: 0;\n    width: 0;\n    height: 2px;\n    background: var(--accent);\n    transition: width 0.3s ease;\n  }\n\n  .nav-links a:hover {\n    color: var(--primary);\n  }\n\n  .nav-links a:hover::after {\n    width: 100%;\n  }\n\n  /* Main Content */\n  .main-content {\n    padding: 3rem 0;\n    display: grid;\n    grid-template-columns: 1fr 300px;\n    gap: 2rem;\n  }\n\n  @media (max-width: 992px) {\n    .main-content {\n      grid-template-columns: 1fr;\n    }\n  }\n\n  article {\n    background: white;\n    border-radius: 8px;\n    padding: 2rem;\n    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);\n  }\n\n  article h2 {\n    color: var(--primary);\n    margin-bottom: 1.5rem;\n    font-size: 1.8rem;\n    position: relative;\n    padding-bottom: 0.5rem;\n  }\n\n  article h2::after {\n    content: '';\n    position: absolute;\n    bottom: 0;\n    left: 0;\n    width: 60px;\n    height: 3px;\n    background: linear-gradient(90deg, var(--primary), var(--secondary));\n  }\n\n  article h3 {\n    color: var(--dark);\n    margin: 1.5rem 0 1rem;\n    font-size: 1.4rem;\n  }\n\n  article p {\n    margin-bottom: 1rem;\n    font-size: 1.1rem;\n    line-height: 1.7;\n  }\n\n  article img {\n    max-width: 100%;\n    height: auto;\n    border-radius: 8px;\n    margin: 1.5rem 0;\n    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);\n    transition: transform 0.3s ease, box-shadow 0.3s ease;\n  }\n\n  article img:hover {\n    transform: translateY(-5px);\n    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);\n  }\n\n  /* Code Blocks */\n  pre {\n    background: #282c34;\n    color: #abb2bf;\n    padding: 1.5rem;\n    border-radius: 8px;\n    overflow-x: auto;\n    margin: 1.5rem 0;\n    font-size: 0.95rem;\n    line-height: 1.5;\n    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);\n  }\n\n  code {\n    font-family: 'Courier New', Courier, monospace;\n  }\n\n  /* Sidebar */\n  .sidebar {\n    background: white;\n    border-radius: 8px;\n    padding: 2rem;\n    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);\n    position: sticky;\n    top: 100px;\n    align-self: start;\n  }\n\n  .sidebar h3 {\n    color: var(--primary);\n    margin-bottom: 1.5rem;\n    font-size: 1.4rem;\n    position: relative;\n    padding-bottom: 0.5rem;\n  }\n\n  .sidebar h3::after {\n    content: '';\n    position: absolute;\n    bottom: 0;\n    left: 0;\n    width: 40px;\n    height: 2px;\n    background: linear-gradient(90deg, var(--primary), var(--secondary));\n  }\n\n  .sidebar-item {\n    margin-bottom: 1.5rem;\n    padding-bottom: 1.5rem;\n    border-bottom: 1px solid #eee;\n  }\n\n  .sidebar-item:last-child {\n    margin-bottom: 0;\n    padding-bottom: 0;\n    border-bottom: none;\n  }\n\n  .sidebar-item h4 {\n    color: var(--dark);\n    margin-bottom: 0.5rem;\n    font-size: 1.1rem;\n  }\n\n  .sidebar-item p {\n    color: #666;\n    font-size: 0.95rem;\n    margin-bottom: 0.5rem;\n  }\n\n  .sidebar-tags {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 0.5rem;\n  }\n\n  .sidebar-tag {\n    background: #f0f7ff;\n    color: var(--primary);\n    padding: 0.3rem 0.6rem;\n    border-radius: 20px;\n    font-size: 0.8rem;\n    transition: all 0.3s ease;\n  }\n\n  .sidebar-tag:hover {\n    background: var(--primary);\n    color: white;\n  }\n\n  /* Footer */\n  .footer {\n    background: var(--dark);\n    color: white;\n    padding: 3rem 0;\n    text-align: center;\n  }\n\n  .footer p {\n    margin-bottom: 1rem;\n  }\n\n  .footer-links {\n    display: flex;\n    justify-content: center;\n    gap: 2rem;\n    margin-bottom: 1.5rem;\n  }\n\n  .footer-links a {\n    color: white;\n    text-decoration: none;\n    transition: color 0.3s ease;\n  }\n\n  .footer-links a:hover {\n    color: var(--accent);\n  }\n\n  /* Utility Classes */\n  .btn {\n    display: inline-block;\n    background: linear-gradient(45deg, var(--accent), #ffa07a);\n    color: white;\n    padding: 0.8rem 1.5rem;\n    border-radius: 30px;\n    text-decoration: none;\n    font-weight: 500;\n    transition: all 0.3s ease;\n    border: none;\n    cursor: pointer;\n    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);\n  }\n\n  .btn:hover {\n    transform: translateY(-3px);\n    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);\n  }\n\n  .btn:active {\n    transform: translateY(1px);\n  }\n\n  .text-center {\n    text-align: center;\n  }\n\n  .mt-1 { margin-top: 1rem; }\n  .mt-2 { margin-top: 2rem; }\n  .mt-3 { margin-top: 3rem; }\n  .mb-1 { margin-bottom: 1rem; }\n  .mb-2 { margin-bottom: 2rem; }\n  .mb-3 { margin-bottom: 3rem; }\n\n  /* Animations */\n  @keyframes fadeIn {\n    from { opacity: 0; }\n    to { opacity: 1; }\n  }\n\n  @keyframes slideInFromLeft {\n    from { transform: translateX(-50px); opacity: 0; }\n    to { transform: translateX(0); opacity: 1; }\n  }\n\n  @keyframes pulse {\n    0% { transform: scale(1); }\n    50% { transform: scale(1.05); }\n    100% { transform: scale(1); }\n  }\n\n  .animate-fade {\n    animation: fadeIn 1s ease forwards;\n  }\n\n  .animate-slide {\n    animation: slideInFromLeft 0.8s ease forwards;\n  }\n\n  .animate-pulse {\n    animation: pulse 2s infinite;\n  }\n\n  /* Responsive Adjustments */\n  @media (max-width: 768px) {\n    .nav-container {\n      flex-direction: column;\n      gap: 1rem;\n    }\n\n    .nav-links {\n      flex-wrap: wrap;\n      justify-content: center;\n    }\n\n    .header h1 {\n      font-size: 2rem;\n    }\n\n    .header p {\n      font-size: 1rem;\n    }\n  }\n\n  @media (max-width: 576px) {\n    .header {\n      padding: 1.5rem 0;\n    }\n\n    .header h1 {\n      font-size: 1.8rem;\n    }\n\n    article, .sidebar {\n      padding: 1.5rem;\n    }\n  }\n