\n  :root {\n    --primary: #1E3A8A;\n    --secondary: #C6F6D5;\n    --accent: #FF9248;\n    --text: #333333;\n    --light: #FFFFFF;\n    --shadow: 0 4px 20px rgba(0, 0, 0, 0.1);\n  }\n  \n  * {\n    margin: 0;\n    padding: 0;\n    box-sizing: border-box;\n    font-family: 'Helvetica Neue', Arial, sans-serif;\n  }\n  \n  body {\n    background: linear-gradient(135deg, #F0F4F8, #E0ECF4);\n    color: var(--text);\n    line-height: 1.6;\n    min-height: 100%;\n    position: relative;\n    overflow-x: hidden;\n  }\n  \n  .wrapper {\n    max-width: 1200px;\n    margin: 0 auto;\n    padding: 0 20px;\n  }\n  \n  header {\n    background: var(--primary);\n    color: var(--light);\n    padding: 2rem 0;\n    text-align: center;\n    position: relative;\n    overflow: hidden;\n    border-bottom: 4px solid var(--accent);\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/sample3.png') center/cover no-repeat;\n    opacity: 0.1;\n    z-index: 0;\n  }\n  \n  h1 {\n    font-size: 2.5rem;\n    margin-bottom: 1rem;\n    position: relative;\n    z-index: 1;\n    text-shadow: 0 2px 4px rgba(0,0,0,0.3);\n  }\n  \n  .subtitle {\n    font-size: 1.2rem;\n    opacity: 0.9;\n    margin-bottom: 1.5rem;\n    position: relative;\n    z-index: 1;\n  }\n  \n  .notice {\n    background: var(--light);\n    color: var(--primary);\n    padding: 1rem;\n    border-radius: 8px;\n    display: inline-block;\n    margin: 0 auto 2rem;\n    box-shadow: var(--shadow);\n    position: relative;\n    z-index: 1;\n    font-weight: bold;\n  }\n  \n  .grid-container {\n    display: grid;\n    grid-template-columns: 250px 1fr;\n    gap: 2rem;\n    margin: 3rem 0;\n  }\n  \n  aside {\n    background: var(--light);\n    border-radius: 12px;\n    padding: 1.5rem;\n    box-shadow: var(--shadow);\n    height: fit-content;\n    position: sticky;\n    top: 2rem;\n  }\n  \n  .nav-title {\n    color: var(--primary);\n    font-size: 1.1rem;\n    margin-bottom: 1rem;\n    padding-bottom: 0.5rem;\n    border-bottom: 2px solid var(--secondary);\n  }\n  \n  .nav-links {\n    list-style: none;\n  }\n  \n  .nav-links li {\n    margin-bottom: 0.8rem;\n  }\n  \n  .nav-links a {\n    color: var(--text);\n    text-decoration: none;\n    transition: all 0.3s;\n    display: block;\n    padding: 0.5rem 0.8rem;\n    border-radius: 6px;\n    rel=\"nofollow\"\n  }\n  \n  .nav-links a:hover {\n    background: var(--secondary);\n    color: var(--primary);\n    transform: translateX(5px);\n  }\n  \n  main {\n    background: var(--light);\n    border-radius: 12px;\n    padding: 2.5rem;\n    box-shadow: var(--shadow);\n  }\n  \n  article {\n    max-width: 800px;\n    margin: 0 auto;\n  }\n  \n  h2 {\n    color: var(--primary);\n    font-size: 1.8rem;\n    margin: 2.5rem 0 1.5rem;\n    padding-bottom: 0.5rem;\n    border-bottom: 2px solid var(--secondary);\n  }\n  \n  h3 {\n    color: var(--primary);\n    font-size: 1.4rem;\n    margin: 2rem 0 1rem;\n  }\n  \n  p {\n    margin-bottom: 1.2rem;\n    font-size: 1.05rem;\n    line-height: 1.7;\n  }\n  \n  .img-container {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 1.5rem;\n    margin: 2rem 0;\n    justify-content: center;\n  }\n  \n  .img-box {\n    width: 300px;\n    height: 300px;\n    border-radius: 12px;\n    overflow: hidden;\n    box-shadow: 0 8px 16px rgba(0,0,0,0.1);\n    transition: all 0.3s;\n  }\n  \n  .img-box:hover {\n    transform: translateY(-5px);\n    box-shadow: 0 12px 24px rgba(0,0,0,0.15);\n  }\n  \n  .img-box img {\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n    alt=\"\"\n  }\n  \n  pre {\n    background: #2D3748;\n    color: #E2E8F0;\n    padding: 1.5rem;\n    border-radius: 8px;\n    overflow-x: auto;\n    margin: 1.5rem 0;\n    font-size: 0.95rem;\n    line-height: 1.5;\n    box-shadow: inset 0 0 10px rgba(0,0,0,0.3);\n  }\n  \n  code {\n    font-family: 'Courier New', monospace;\n  }\n  \n  .tags {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 0.8rem;\n    margin: 2rem 0;\n  }\n  \n  .tag {\n    background: var(--secondary);\n    color: var(--primary);\n    padding: 0.5rem 1rem;\n    border-radius: 20px;\n    font-size: 0.9rem;\n    font-weight: 500;\n  }\n  \n  footer {\n    background: var(--primary);\n    color: var(--light);\n    text-align: center;\n    padding: 2rem 0;\n    margin-top: 4rem;\n  }\n  \n  @media (max-width: 900px) {\n    .grid-container {\n      grid-template-columns: 1fr;\n    }\n    \n    aside {\n      position: static;\n    }\n  }\n  \n  @media (max-width: 600px) {\n    h1 {\n      font-size: 2rem;\n    }\n    \n    main {\n      padding: 1.5rem;\n    }\n    \n    .img-box {\n      width: 100%;\n    }\n  }\n