\n  @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');\n  \n  :root {\n    --primary: #1E272E;\n    --secondary: #F5F5F5;\n    --accent: #03A9F4;\n    --highlight: #FF9800;\n    --text: #333333;\n    --white: #FFFFFF;\n    --shadow: 0 4px 20px rgba(0,0,0,0.1);\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    font-family: 'Roboto', sans-serif;\n    color: var(--text);\n    background: linear-gradient(135deg, var(--secondary) 0%, var(--white) 100%);\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: var(--primary);\n    color: var(--white);\n    padding: 2rem 0;\n    position: relative;\n    overflow: hidden;\n  }\n  \n  header::before {\n    content: '';\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    background: linear-gradient(45deg, rgba(3,169,244,0.1) 0%, rgba(255,152,0,0.05) 100%);\n    z-index: 0;\n  }\n  \n  .header-content {\n    position: relative;\n    z-index: 1;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    text-align: center;\n    padding: 2rem;\n  }\n  \n  .header-title {\n    font-size: 2.5rem;\n    margin-bottom: 1rem;\n    background: linear-gradient(90deg, var(--accent), var(--highlight));\n    -webkit-background-clip: text;\n    -webkit-text-fill-color: transparent;\n    text-shadow: 0 2px 10px rgba(0,0,0,0.1);\n  }\n  \n  .header-subtitle {\n    font-size: 1.2rem;\n    max-width: 800px;\n    margin-bottom: 2rem;\n    opacity: 0.9;\n  }\n  \n  .design-notice {\n    background: rgba(255,255,255,0.2);\n    padding: 0.5rem 1rem;\n    border-radius: 50px;\n    font-size: 0.9rem;\n    margin-top: 1rem;\n    backdrop-filter: blur(5px);\n  }\n  \n  /* Navigation */\n  .main-nav {\n    display: flex;\n    justify-content: center;\n    margin: 2rem 0;\n    flex-wrap: wrap;\n  }\n  \n  .nav-link {\n    color: var(--white);\n    text-decoration: none;\n    padding: 0.8rem 1.5rem;\n    margin: 0.5rem;\n    border-radius: 50px;\n    background: rgba(255,255,255,0.1);\n    transition: var(--transition);\n    font-weight: 500;\n  }\n  \n  .nav-link:hover {\n    background: rgba(255,255,255,0.2);\n    transform: translateY(-3px);\n  }\n  \n  /* Article Styles */\n  article {\n    padding: 3rem 0;\n  }\n  \n  article h2 {\n    font-size: 2rem;\n    margin: 2rem 0 1.5rem;\n    color: var(--primary);\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(--accent), var(--highlight));\n  }\n  \n  article h3 {\n    font-size: 1.5rem;\n    margin: 1.5rem 0 1rem;\n    color: var(--primary);\n  }\n  \n  article p {\n    margin-bottom: 1.5rem;\n    font-size: 1.1rem;\n    line-height: 1.8;\n  }\n  \n  /* Code Blocks */\n  pre {\n    background: var(--primary);\n    color: var(--white);\n    padding: 1.5rem;\n    border-radius: 8px;\n    margin: 1.5rem 0;\n    overflow-x: auto;\n    box-shadow: var(--shadow);\n    position: relative;\n  }\n  \n  pre::before {\n    content: '';\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 4px;\n    height: 100%;\n    background: linear-gradient(to bottom, var(--accent), var(--highlight));\n    border-radius: 8px 0 0 8px;\n  }\n  \n  code {\n    font-family: 'Roboto Mono', monospace;\n    font-size: 0.9rem;\n  }\n  \n  /* Table Styles */\n  table {\n    width: 100%;\n    border-collapse: collapse;\n    margin: 2rem 0;\n    box-shadow: var(--shadow);\n    border-radius: 8px;\n    overflow: hidden;\n  }\n  \n  th, td {\n    padding: 1rem;\n    text-align: left;\n    border-bottom: 1px solid rgba(0,0,0,0.1);\n  }\n  \n  th {\n    background: var(--primary);\n    color: var(--white);\n    font-weight: 500;\n  }\n  \n  tr:nth-child(even) {\n    background: rgba(0,0,0,0.02);\n  }\n  \n  tr:hover {\n    background: rgba(3,169,244,0.05);\n  }\n  \n  /* Image Gallery */\n  .image-gallery {\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));\n    gap: 1.5rem;\n    margin: 3rem 0;\n  }\n  \n  .gallery-item {\n    border-radius: 8px;\n    overflow: hidden;\n    box-shadow: var(--shadow);\n    transition: var(--transition);\n    position: relative;\n  }\n  \n  .gallery-item:hover {\n    transform: translateY(-5px);\n    box-shadow: 0 10px 30px rgba(0,0,0,0.15);\n  }\n  \n  .gallery-item img {\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n    transition: var(--transition);\n  }\n  \n  .gallery-item:hover img {\n    transform: scale(1.05);\n  }\n  \n  /* Responsive Adjustments */\n  @media (max-width: 768px) {\n    .header-title {\n      font-size: 2rem;\n    }\n    \n    .header-subtitle {\n      font-size: 1rem;\n    }\n    \n    article h2 {\n      font-size: 1.7rem;\n    }\n    \n    article h3 {\n      font-size: 1.3rem;\n    }\n    \n    .image-gallery {\n      grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));\n    }\n  }\n  \n  @media (max-width: 480px) {\n    .header-title {\n      font-size: 1.8rem;\n    }\n    \n    .nav-link {\n      padding: 0.6rem 1rem;\n      font-size: 0.9rem;\n    }\n    \n    .image-gallery {\n      grid-template-columns: 1fr;\n    }\n  }\n