\n  :root {\n    --primary: #0f2027;\n    --secondary: #203a43;\n    --accent: #00FF00;\n    --text: #ffffff;\n    --highlight: rgba(0, 255, 0, 0.2);\n    --card-bg: rgba(255, 255, 255, 0.08);\n    --transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);\n  }\n\n  * {\n    margin: 0;\n    padding: 0;\n    box-sizing: border-box;\n  }\n\n  body {\n    background: linear-gradient(135deg, var(--primary), var(--secondary));\n    color: var(--text);\n    font-family: 'Roboto', sans-serif;\n    line-height: 1.6;\n    padding: 0;\n    margin: 0;\n    overflow-x: hidden;\n  }\n\n  .container {\n    max-width: 1200px;\n    margin: 0 auto;\n    padding: 80px 20px 40px;\n  }\n\n  .header {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 100%;\n    background: rgba(15, 32, 39, 0.95);\n    backdrop-filter: blur(10px);\n    padding: 15px 30px;\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    z-index: 1000;\n    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);\n    border-bottom: 1px solid rgba(255, 255, 255, 0.1);\n  }\n\n  .logo {\n    font-size: 1.5rem;\n    font-weight: 700;\n    background: linear-gradient(90deg, #00c6ff, #0072ff);\n    -webkit-background-clip: text;\n    -webkit-text-fill-color: transparent;\n  }\n\n  .nav-links {\n    display: flex;\n    gap: 30px;\n  }\n\n  .nav-link {\n    color: var(--text);\n    text-decoration: none;\n    font-weight: 500;\n    position: relative;\n    padding: 5px 0;\n    transition: var(--transition);\n  }\n\n  .nav-link::after {\n    content: '';\n    position: absolute;\n    bottom: 0;\n    left: 0;\n    width: 0;\n    height: 2px;\n    background: var(--accent);\n    transition: var(--transition);\n  }\n\n  .nav-link:hover::after {\n    width: 100%;\n  }\n\n  .hero {\n    display: grid;\n    grid-template-columns: 1fr 1fr;\n    gap: 40px;\n    align-items: center;\n    padding: 60px 0;\n  }\n\n  .hero-content h1 {\n    font-size: 2.5rem;\n    margin-bottom: 20px;\n    background: linear-gradient(90deg, #00c6ff, #0072ff);\n    -webkit-background-clip: text;\n    -webkit-text-fill-color: transparent;\n  }\n\n  .hero-content p {\n    font-size: 1.1rem;\n    margin-bottom: 30px;\n    opacity: 0.9;\n  }\n\n  .hero-image {\n    position: relative;\n    height: 100%;\n    border-radius: 15px;\n    overflow: hidden;\n    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);\n    transition: var(--transition);\n  }\n\n  .hero-image:hover {\n    transform: translateY(-5px);\n    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.4);\n  }\n\n  .hero-image img {\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n    border-radius: 15px;\n  }\n\n  .section {\n    margin: 80px 0;\n  }\n\n  .section-title {\n    font-size: 1.8rem;\n    margin-bottom: 40px;\n    position: relative;\n    display: inline-block;\n  }\n\n  .section-title::after {\n    content: '';\n    position: absolute;\n    bottom: -10px;\n    left: 0;\n    width: 60px;\n    height: 3px;\n    background: var(--accent);\n  }\n\n  .grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n    gap: 30px;\n  }\n\n  .card {\n    background: var(--card-bg);\n    border-radius: 15px;\n    padding: 30px;\n    transition: var(--transition);\n    backdrop-filter: blur(5px);\n    border: 1px solid rgba(255, 255, 255, 0.1);\n  }\n\n  .card:hover {\n    transform: translateY(-10px);\n    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);\n    border-color: rgba(0, 255, 0, 0.3);\n  }\n\n  .card h3 {\n    font-size: 1.3rem;\n    margin-bottom: 15px;\n    color: var(--accent);\n  }\n\n  .card p {\n    opacity: 0.8;\n    margin-bottom: 20px;\n  }\n\n  .card-image {\n    width: 100%;\n    height: 200px;\n    border-radius: 10px;\n    overflow: hidden;\n    margin-bottom: 20px;\n  }\n\n  .card-image img {\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n    transition: var(--transition);\n  }\n\n  .card:hover .card-image img {\n    transform: scale(1.05);\n  }\n\n  article {\n    background: rgba(32, 58, 67, 0.5);\n    border-radius: 15px;\n    padding: 40px;\n    margin: 60px 0;\n    backdrop-filter: blur(5px);\n    border: 1px solid rgba(255, 255, 255, 0.1);\n  }\n\n  article h2 {\n    font-size: 1.8rem;\n    margin-bottom: 30px;\n    color: var(--accent);\n  }\n\n  article h3 {\n    font-size: 1.4rem;\n    margin: 30px 0 20px;\n    color: #00c6ff;\n  }\n\n  article p {\n    margin-bottom: 20px;\n    line-height: 1.7;\n  }\n\n  pre {\n    background: rgba(0, 0, 0, 0.3);\n    border-radius: 10px;\n    padding: 20px;\n    margin: 20px 0;\n    overflow-x: auto;\n    border-left: 3px solid var(--accent);\n  }\n\n  code {\n    font-family: 'Courier New', monospace;\n    color: var(--accent);\n  }\n\n  .footer {\n    text-align: center;\n    padding: 40px 0;\n    margin-top: 80px;\n    border-top: 1px solid rgba(255, 255, 255, 0.1);\n  }\n\n  .footer p {\n    opacity: 0.7;\n    font-size: 0.9rem;\n  }\n\n  .notice {\n    position: fixed;\n    bottom: 20px;\n    right: 20px;\n    background: rgba(0, 198, 255, 0.2);\n    color: #fff;\n    padding: 15px 20px;\n    border-radius: 10px;\n    backdrop-filter: blur(5px);\n    border: 1px solid rgba(0, 198, 255, 0.3);\n    animation: fadeIn 0.5s ease-in-out;\n    max-width: 300px;\n  }\n\n  @keyframes fadeIn {\n    from { opacity: 0; transform: translateY(20px); }\n    to { opacity: 1; transform: translateY(0); }\n  }\n\n  @media (max-width: 768px) {\n    .hero {\n      grid-template-columns: 1fr;\n    }\n\n    .nav-links {\n      display: none;\n    }\n\n    article {\n      padding: 30px 20px;\n    }\n  }\n\n  @media (max-width: 480px) {\n    .container {\n      padding: 80px 15px 40px;\n    }\n\n    .hero-content h1 {\n      font-size: 2rem;\n    }\n\n    .section-title {\n      font-size: 1.5rem;\n    }\n\n    article h2 {\n      font-size: 1.5rem;\n    }\n\n    article h3 {\n      font-size: 1.2rem;\n    }\n  }\n