\n  :root {\n    --primary: #121212;\n    --secondary: #1E1E1E;\n    --accent-blue: #03A9F4;\n    --accent-green: #8BC34A;\n    --accent-purple: #9C27B0;\n    --text-light: #FFFFFF;\n    --text-muted: #B0B0B0;\n  }\n\n  @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@500;700&family=Open+Sans:wght@400;600&display=swap');\n  \n  * {\n    margin: 0;\n    padding: 0;\n    box-sizing: border-box;\n  }\n\n  body {\n    font-family: 'Open Sans', sans-serif;\n    color: var(--text-light);\n    background-color: var(--primary);\n    line-height: 1.6;\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, rgba(3, 169, 244, 0.1), rgba(156, 39, 176, 0.1));\n    padding: 40px 0;\n    position: relative;\n    overflow: hidden;\n    border-bottom: 1px solid rgba(255, 255, 255, 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') center/cover no-repeat;\n    opacity: 0.15;\n    z-index: -1;\n  }\n\n  .header-content {\n    text-align: center;\n    position: relative;\n    z-index: 1;\n  }\n\n  .header h1 {\n    font-family: 'Roboto', sans-serif;\n    font-size: 2.5rem;\n    margin-bottom: 20px;\n    background: linear-gradient(90deg, var(--accent-blue), var(--accent-purple));\n    -webkit-background-clip: text;\n    -webkit-text-fill-color: transparent;\n    text-shadow: 0 0 15px rgba(3, 169, 244, 0.3);\n  }\n\n  .header p {\n    font-size: 1.1rem;\n    max-width: 800px;\n    margin: 0 auto 30px;\n    color: var(--text-muted);\n  }\n\n  .notice {\n    background-color: rgba(255, 255, 255, 0.1);\n    padding: 15px;\n    border-radius: 8px;\n    display: inline-block;\n    margin-top: 30px;\n    font-size: 0.9rem;\n    border-left: 3px solid var(--accent-blue);\n  }\n\n  /* Navigation */\n  .nav-container {\n    position: sticky;\n    top: 0;\n    z-index: 1000;\n    background-color: var(--primary);\n    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.3);\n    border-bottom: 1px solid rgba(255, 255, 255, 0.05);\n  }\n\n  nav {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: 15px 20px;\n    max-width: 1200px;\n    margin: 0 auto;\n  }\n\n  .nav-links {\n    display: flex;\n    gap: 25px;\n  }\n\n  .nav-links a {\n    color: var(--text-light);\n    text-decoration: none;\n    font-weight: 600;\n    position: relative;\n    padding: 5px 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: linear-gradient(90deg, var(--accent-blue), var(--accent-purple));\n    transition: width 0.3s ease;\n  }\n\n  .nav-links a:hover {\n    color: var(--accent-blue);\n  }\n\n  .nav-links a:hover::after {\n    width: 100%;\n  }\n\n  /* Article Styles */\n  article {\n    padding: 60px 0;\n  }\n\n  article h2 {\n    font-family: 'Roboto', sans-serif;\n    font-size: 1.8rem;\n    margin-bottom: 25px;\n    color: var(--accent-blue);\n    position: relative;\n    padding-bottom: 10px;\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(--accent-blue), var(--accent-purple));\n    border-radius: 3px;\n  }\n\n  article h3 {\n    font-family: 'Roboto', sans-serif;\n    font-size: 1.4rem;\n    margin: 40px 0 20px;\n    color: var(--accent-green);\n  }\n\n  article p {\n    margin-bottom: 20px;\n    font-size: 1.05rem;\n    line-height: 1.7;\n  }\n\n  /* Code Blocks */\n  pre {\n    background-color: var(--secondary);\n    border-radius: 8px;\n    padding: 20px;\n    margin: 25px 0;\n    overflow-x: auto;\n    border-left: 4px solid var(--accent-blue);\n    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);\n  }\n\n  code {\n    font-family: 'Courier New', monospace;\n    font-size: 0.95rem;\n    color: #f8f8f2;\n  }\n\n  /* Table Styles */\n  table {\n    width: 100%;\n    border-collapse: collapse;\n    margin: 30px 0;\n    background-color: var(--secondary);\n    border-radius: 8px;\n    overflow: hidden;\n    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);\n  }\n\n  th, td {\n    padding: 15px;\n    text-align: left;\n    border-bottom: 1px solid rgba(255, 255, 255, 0.05);\n  }\n\n  th {\n    background-color: rgba(3, 169, 244, 0.1);\n    font-family: 'Roboto', sans-serif;\n    color: var(--accent-blue);\n  }\n\n  tr:hover {\n    background-color: rgba(255, 255, 255, 0.03);\n  }\n\n  /* Image Gallery */\n  .gallery {\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));\n    gap: 20px;\n    margin: 40px 0;\n  }\n\n  .gallery-item {\n    border-radius: 8px;\n    overflow: hidden;\n    position: relative;\n    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);\n    transition: transform 0.3s ease, box-shadow 0.3s ease;\n  }\n\n  .gallery-item:hover {\n    transform: translateY(-5px);\n    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);\n  }\n\n  .gallery-item img {\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n    transition: transform 0.5s ease;\n  }\n\n  .gallery-item:hover img {\n    transform: scale(1.05);\n  }\n\n  /* Footer */\n  footer {\n    background-color: var(--secondary);\n    padding: 40px 0;\n    text-align: center;\n    border-top: 1px solid rgba(255, 255, 255, 0.1);\n  }\n\n  footer p {\n    color: var(--text-muted);\n    font-size: 0.9rem;\n  }\n\n  /* Animations */\n  @keyframes float {\n    0%, 100% { transform: translateY(0); }\n    50% { transform: translateY(-10px); }\n  }\n\n  .floating {\n    animation: float 3s ease-in-out infinite;\n  }\n\n  @keyframes pulse {\n    0%, 100% { opacity: 1; }\n    50% { opacity: 0.6; }\n  }\n\n  .pulsing {\n    animation: pulse 2s infinite;\n  }\n\n  /* Responsive Design */\n  @media (max-width: 768px) {\n    .header h1 {\n      font-size: 2rem;\n    }\n    \n    .nav-links {\n      gap: 15px;\n    }\n    \n    article h2 {\n      font-size: 1.6rem;\n    }\n    \n    article h3 {\n      font-size: 1.3rem;\n    }\n  }\n\n  @media (max-width: 576px) {\n    .nav-container {\n      padding: 10px;\n    }\n    \n    nav {\n      flex-direction: column;\n      gap: 15px;\n    }\n    \n    .gallery {\n      grid-template-columns: 1fr;\n    }\n  }\n