\n  :root {\n    --primary: linear-gradient(135deg, #6B73FF 0%, #000DFF 100%);\n    --secondary: rgba(255, 255, 255, 0.1);\n    --accent: #FFD700;\n    --text: #ffffff;\n    --shadow: 0 4px 20px rgba(0, 0, 0, 0.2);\n  }\n\n  * {\n    margin: 0;\n    padding: 0;\n    box-sizing: border-box;\n  }\n\n  html {\n    scroll-behavior: smooth;\n  }\n\n  body {\n    background: var(--primary);\n    color: var(--text);\n    font-family: 'Roboto', sans-serif;\n    line-height: 1.6;\n    overflow-x: hidden;\n  }\n\n  .design-notice {\n    position: fixed;\n    top: 20px;\n    right: 20px;\n    background: rgba(0,0,0,0.7);\n    padding: 10px 15px;\n    border-radius: 20px;\n    font-size: 14px;\n    z-index: 1000;\n    box-shadow: var(--shadow);\n  }\n\n  .container {\n    max-width: 1200px;\n    margin: 0 auto;\n    padding: 0 20px;\n  }\n\n  header {\n    padding: 40px 0;\n    text-align: center;\n  }\n\n  h1 {\n    font-size: 2.8rem;\n    margin-bottom: 20px;\n    background: linear-gradient(to right, #fff, #FFD700);\n    -webkit-background-clip: text;\n    -webkit-text-fill-color: transparent;\n  }\n\n  h2 {\n    font-size: 2rem;\n    margin: 40px 0 20px;\n    position: relative;\n    display: inline-block;\n  }\n\n  h2::after {\n    content: '';\n    position: absolute;\n    bottom: -8px;\n    left: 0;\n    width: 60px;\n    height: 3px;\n    background: var(--accent);\n  }\n\n  h3 {\n    font-size: 1.5rem;\n    margin: 30px 0 15px;\n    color: var(--accent);\n  }\n\n  p {\n    font-size: 1.1rem;\n    margin-bottom: 20px;\n  }\n\n  article {\n    background: rgba(0, 0, 0, 0.3);\n    backdrop-filter: blur(10px);\n    border-radius: 20px;\n    padding: 40px;\n    margin: 60px 0;\n    box-shadow: var(--shadow);\n  }\n\n  .grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n    gap: 30px;\n    margin: 40px 0;\n  }\n\n  .card {\n    background: var(--secondary);\n    border-radius: 15px;\n    padding: 25px;\n    transition: all 0.3s ease;\n    box-shadow: var(--shadow);\n  }\n\n  .card:hover {\n    transform: translateY(-10px);\n    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);\n  }\n\n  .card img {\n    width: 100%;\n    border-radius: 10px;\n    margin-bottom: 15px;\n    transition: transform 0.3s ease;\n  }\n\n  .card:hover img {\n    transform: scale(1.05);\n  }\n\n  pre {\n    background: rgba(0, 0, 0, 0.5);\n    border-radius: 10px;\n    padding: 20px;\n    margin: 20px 0;\n    overflow-x: auto;\n  }\n\n  code {\n    font-family: 'Courier New', monospace;\n    color: #FFD700;\n  }\n\n  table {\n    width: 100%;\n    border-collapse: collapse;\n    margin: 30px 0;\n    background: rgba(0, 0, 0, 0.3);\n    border-radius: 10px;\n    overflow: hidden;\n  }\n\n  th, td {\n    padding: 15px;\n    text-align: left;\n    border-bottom: 1px solid rgba(255, 255, 255, 0.1);\n  }\n\n  th {\n    background: rgba(0, 0, 0, 0.5);\n    color: var(--accent);\n  }\n\n  tr:hover {\n    background: rgba(255, 255, 255, 0.05);\n  }\n\n  .nav-links {\n    position: fixed;\n    top: 50%;\n    right: 20px;\n    transform: translateY(-50%);\n    display: flex;\n    flex-direction: column;\n    gap: 15px;\n    z-index: 100;\n  }\n\n  .nav-link {\n    width: 50px;\n    height: 50px;\n    border-radius: 50%;\n    background: rgba(0, 0, 0, 0.5);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: white;\n    text-decoration: none;\n    transition: all 0.3s ease;\n    box-shadow: var(--shadow);\n  }\n\n  .nav-link:hover {\n    background: var(--accent);\n    transform: scale(1.1);\n  }\n\n  .image-gallery {\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));\n    gap: 20px;\n    margin: 40px 0;\n  }\n\n  .gallery-item {\n    border-radius: 15px;\n    overflow: hidden;\n    box-shadow: var(--shadow);\n    transition: transform 0.3s ease;\n  }\n\n  .gallery-item:hover {\n    transform: scale(1.03);\n  }\n\n  .gallery-item img {\n    width: 100%;\n    height: 250px;\n    object-fit: cover;\n    transition: transform 0.5s ease;\n  }\n\n  .gallery-item:hover img {\n    transform: scale(1.1);\n  }\n\n  @media (max-width: 768px) {\n    .nav-links {\n      display: none;\n    }\n    \n    article {\n      padding: 30px 20px;\n    }\n    \n    h1 {\n      font-size: 2.2rem;\n    }\n    \n    h2 {\n      font-size: 1.8rem;\n    }\n  }\n