\n  @import url('https://fonts.googleapis.com/css2?family=Lato:wght@700&family=Roboto:wght@400;500&display=swap');\n  \n  :root {\n    --primary: #0D2C54;\n    --accent: #FF7E5F;\n    --bg-gradient: linear-gradient(135deg, #6B73FF, #000DFF);\n    --text-light: #F5F7FA;\n    --text-dark: #0D2C54;\n    --shadow: 0 8px 24px rgba(13, 44, 84, 0.16);\n  }\n  \n  * {\n    margin: 0;\n    padding: 0;\n    box-sizing: border-box;\n  }\n  \n  body {\n    font-family: 'Roboto', sans-serif;\n    line-height: 1.6;\n    color: var(--text-dark);\n    background-color: #F5F7FA;\n    overflow-x: hidden;\n  }\n  \n  .hero {\n    position: relative;\n    min-height: 600px;\n    padding: 80px 5%;\n    background: var(--bg-gradient);\n    clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%);\n    margin-bottom: 80px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    text-align: center;\n    color: var(--text-light);\n  }\n  \n  .hero::after {\n    content: '';\n    position: absolute;\n    bottom: 0;\n    left: 0;\n    width: 200%;\n    height: 100px;\n    background: rgba(255, 255, 255, 0.2);\n    animation: waveAnimation 15s infinite linear;\n  }\n  \n  @keyframes waveAnimation {\n    from { transform: translateX(0); }\n    to { transform: translateX(-50%); }\n  }\n  \n  .hero-content {\n    max-width: 800px;\n    z-index: 2;\n  }\n  \n  .hero h1 {\n    font-family: 'Lato', sans-serif;\n    font-size: 3.5rem;\n    margin-bottom: 24px;\n    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);\n  }\n  \n  .hero p {\n    font-size: 1.2rem;\n    margin-bottom: 40px;\n    opacity: 0.9;\n  }\n  \n  .notice {\n    background: rgba(255, 255, 255, 0.2);\n    padding: 16px;\n    border-radius: 8px;\n    margin: 40px auto;\n    max-width: 800px;\n    text-align: center;\n    font-size: 0.9rem;\n    backdrop-filter: blur(5px);\n  }\n  \n  .container {\n    max-width: 1200px;\n    margin: 0 auto;\n    padding: 0 5%;\n  }\n  \n  article {\n    background: white;\n    border-radius: 16px;\n    padding: 60px;\n    box-shadow: var(--shadow);\n    margin-bottom: 80px;\n  }\n  \n  article h2 {\n    font-family: 'Lato', sans-serif;\n    font-size: 2rem;\n    color: var(--primary);\n    margin: 40px 0 20px;\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: 4px;\n    background: var(--accent);\n    border-radius: 2px;\n  }\n  \n  article p {\n    font-size: 1.1rem;\n    margin-bottom: 24px;\n    line-height: 1.8;\n  }\n  \n  pre {\n    background: #F5F7FA;\n    padding: 20px;\n    border-radius: 8px;\n    overflow: auto;\n    margin: 30px 0;\n    border-left: 4px solid var(--accent);\n  }\n  \n  code {\n    font-family: 'Roboto Mono', monospace;\n    font-size: 0.9rem;\n  }\n  \n  .gallery {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n    gap: 30px;\n    margin: 60px 0;\n  }\n  \n  .card {\n    background: white;\n    border-radius: 12px;\n    overflow: hidden;\n    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);\n    transition: transform 0.3s, box-shadow 0.3s;\n  }\n  \n  .card:hover {\n    transform: translateY(-10px);\n    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);\n  }\n  \n  .card img {\n    width: 100%;\n    height: 200px;\n    object-fit: cover;\n    border-bottom: 1px solid #eee;\n  }\n  \n  .card-content {\n    padding: 20px;\n  }\n  \n  .card h3 {\n    font-family: 'Lato', sans-serif;\n    color: var(--primary);\n    margin-bottom: 12px;\n  }\n  \n  .card p {\n    font-size: 0.95rem;\n    color: #666;\n  }\n  \n  .nav-links {\n    position: sticky;\n    top: 20px;\n    background: white;\n    padding: 20px;\n    border-radius: 12px;\n    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);\n    margin-bottom: 40px;\n  }\n  \n  .nav-links h3 {\n    font-family: 'Lato', sans-serif;\n    color: var(--primary);\n    margin-bottom: 16px;\n    padding-bottom: 8px;\n    border-bottom: 2px solid var(--accent);\n  }\n  \n  .nav-links ul {\n    list-style: none;\n  }\n  \n  .nav-links li {\n    margin-bottom: 12px;\n  }\n  \n  .nav-links a {\n    color: var(--primary);\n    text-decoration: none;\n    transition: color 0.3s;\n    display: block;\n    padding: 8px 0;\n    border-left: 3px solid transparent;\n    padding-left: 12px;\n  }\n  \n  .nav-links a:hover {\n    color: var(--accent);\n    border-left-color: var(--accent);\n  }\n  \n  @media (max-width: 768px) {\n    .hero h1 {\n      font-size: 2.5rem;\n    }\n    \n    article {\n      padding: 40px 20px;\n    }\n    \n    .gallery {\n      grid-template-columns: 1fr;\n    }\n  }\n