:root{--font-primary: "Pangolin",cursive;--font-display: "Pangolin",cursive;--color-primary: #6366f1;--color-primary-dark: #4f46e5;--color-accent: #f59e0b;--color-text-primary: #111827;--color-text-secondary: #6b7280;--color-text-light: #9ca3af;--color-bg-primary: #ffffff;--color-bg-secondary: #f9fafb;--color-bg-tertiary: #f3f4f6;--color-border: #e5e7eb;--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1),0 2px 4px -2px rgb(0 0 0 / 0.1);--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1),0 4px 6px -4px rgb(0 0 0 / 0.1);--shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1),0 8px 10px -6px rgb(0 0 0 / 0.1);--sectionTitleFontSize:clamp(2rem,3vw,3rem);--sectonTop:var(--size-8,5rem)} [data-theme="dark"]{--color-text-primary: #f9fafb;--color-text-secondary: #d1d5db;--color-text-light: #9ca3af;--color-bg-primary: #111827;--color-bg-secondary: #1f2937;--color-bg-tertiary: #374151;--color-border: #4b5563;--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3);--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.3),0 2px 4px -2px rgb(0 0 0 / 0.3);--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.3),0 4px 6px -4px rgb(0 0 0 / 0.3);--shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.3),0 8px 10px -6px rgb(0 0 0 / 0.3)} *{box-sizing: border-box} html{scroll-behavior: smooth} body{margin: 0;font-family: var(--font-primary);font-style: normal;line-height: 1.6;color: var(--color-text-primary);background: var(--color-bg-primary);-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale} .container{max-width: 1200px;margin: 0 auto;padding: 0 var(--size-4,1rem)} .page-nav{position: fixed;top: 0;left: 0;right: 0;background: rgba(255,255,255,0.95);backdrop-filter: blur(10px);border-bottom: 1px solid var(--color-border);z-index: 1000;transition: all 0.3s ease} [data-theme="dark"] .page-nav{background: rgba(17,24,39,0.95)} .page-nav__container{max-width: 1200px;margin: 0 auto;padding: 0 var(--size-4,1rem);display: flex;justify-content: space-between;align-items: center;height: 70px} .page-nav__logo{font-family: var(--font-display);font-size: 1.5rem;font-weight: 600;margin: 0;color: var(--color-text-primary);text-decoration: none} .page-nav__links{display: flex;gap: var(--size-6,2rem)} .page-nav__link{text-decoration: none;color: var(--color-text-secondary);font-weight: 500;transition: color 0.2s ease;position: relative} .page-nav__link:hover{color: var(--color-primary)} .page-nav__link::after{content: '';position: absolute;bottom: -4px;left: 0;width: 0;height: 2px;background: var(--color-primary);transition: width 0.2s ease} .page-nav__link:hover::after{width: 100%} .page-nav__links{display: flex;gap: var(--size-6,2rem);align-items: center} .page-nav .theme-toggle{background: none;border: none;cursor: pointer;padding: 8px;border-radius: 6px;transition: all 0.2s ease;color: var(--color-text-secondary);margin-left: var(--size-2,0.5rem)} .page-nav .theme-toggle:hover{background: var(--color-bg-secondary);color: var(--color-primary)} .page-nav .theme-toggle svg{width: 18px;height: 18px;transition: transform 0.2s ease} .page-nav .theme-toggle:hover svg{transform: scale(1.1)} [data-theme="dark"] .page-nav .theme-toggle .sun-icon{display: none} [data-theme="dark"] .page-nav .theme-toggle .moon-icon{display: block} [data-theme="light"] .page-nav .theme-toggle .moon-icon,:root .page-nav .theme-toggle .moon-icon{display: none} [data-theme="light"] .page-nav .theme-toggle .sun-icon,:root .page-nav .theme-toggle .sun-icon{display: block} .main-content{max-width: 900px;margin: 0 auto;padding: 120px var(--size-4,1rem) var(--size-8,3rem)} .back-link{display: inline-flex;align-items: center;color: var(--color-primary);text-decoration: none;margin-bottom: var(--size-6,2rem);font-weight: 500;transition: color 0.2s ease} .back-link:hover{color: var(--color-primary-dark)} .hero-image{width: 100%;height: 400px;object-fit: cover;border-radius: 5px;margin-bottom: var(--size-6,2rem);box-shadow: var(--shadow-lg)} .page-title{font-family: var(--font-display);font-size: clamp(2.5rem,5vw,3.5rem);font-weight: 450;margin: 0 0 var(--size-4,1.5rem) 0;line-height: 1.2;color: var(--color-text-primary);right:0;display: block} .page-description{font-size: 1.2rem;color: var(--color-text-secondary);margin-bottom: var(--size-8,3rem);line-height: 1.6} .content{font-size: 1.1rem;line-height: 1.7;color: var(--color-text-primary);--bold:500} .content p{margin-bottom: var(--size-4,1.5rem)} .content-image{width: 100%;height: auto;border-radius: 5px;margin: var(--size-6,2rem) 0;box-shadow: var(--shadow-md)} .content h1{font-family: var(--font-display);font-size: 2.2rem;font-weight: var(--bold);margin: var(--size-8,3rem) 0 var(--size-4,1.5rem) 0;color: var(--color-text-primary)} .content h2{font-family: var(--font-display);font-size: 1.8rem;font-weight: var(--bold);margin: var(--size-6,2rem) 0 var(--size-3,1rem) 0;color: var(--color-text-primary)} .content h3{font-family: var(--font-display);font-size: 1.4rem;font-weight: 400;margin: var(--size-4,1.5rem) 0 var(--size-2,0.75rem) 0;color: var(--color-text-primary)} .content blockquote{border-left: 4px solid var(--color-primary);padding-left: var(--size-4,1.5rem);margin: var(--size-6,2rem) 0;font-style: italic;color: var(--color-text-secondary);background: var(--color-bg-secondary);padding: var(--size-4,1.5rem);border-radius: 8px} .content pre{background: var(--color-bg-secondary);padding: var(--size-4,1.5rem);border-radius: 12px;overflow-x: auto;border: 1px solid var(--color-border)} .content code{background: var(--color-bg-tertiary);padding: 2px 6px;border-radius: 4px;font-size: 0.9em} .content pre code{background: none;padding: 0} .content ul,.content ol{padding-left: var(--size-6,2rem);margin-bottom: var(--size-4,1.5rem)} .content li{margin-bottom: var(--size-2,0.75rem)} .column-list{display: flex;gap: var(--size-4,1.5rem);margin: var(--size-4,1.5rem) 0} .column{flex: 1;min-width: 0} .block-with-children{margin: var(--size-2,0.75rem) 0} .video-wrapper{margin: var(--size-6,2rem) 0;position: relative;width: 100%;height: 0;padding-bottom: 56.25%;overflow: hidden;border-radius: 12px;box-shadow: var(--shadow-md)} .content-video{position: absolute;top: 0;left: 0;width: 100%;height: 100%;border-radius: 12px} .video-caption{text-align: center;font-style: italic;color: var(--color-text-secondary);margin-top: var(--size-2,0.75rem);font-size: 0.9rem} .footer{padding: var(--size-8,3rem) 0;background: var(--color-bg-tertiary);border-top: 1px solid var(--color-border);text-align: center} .footer__text{font-size: 0.9rem;color: var(--color-text-secondary);margin: 0 0 var(--size-2,0.75rem) 0;line-height: 1.6} .footer__text a{color: var(--color-primary);text-decoration: none;font-weight: 500;transition: color 0.2s ease} .footer__text a:hover{color: var(--color-primary-dark);text-decoration: underline} .footer__source{font-size: 0.85rem;margin: 0} .footer__source a{color: var(--color-text-light);text-decoration: none;font-weight: 400;transition: color 0.2s ease} .footer__source a:hover{color: var(--color-primary);text-decoration: underline} @media (max-width: 768px){.page-nav__links{display: none} .page-nav__container{justify-content: center} .main-content{padding: 100px var(--size-3,0.75rem) var(--size-6,2rem)} .hero-image{height: 250px;border-radius: 5px} .page-title{font-size: 2rem} .page-description{font-size: 1.1rem} .content{font-size: 1rem} .column-list{flex-direction: column;gap: var(--size-2,0.75rem)} .video-wrapper{padding-bottom: 56.25%} } @media (max-width: 480px){.nav__container{height: 60px} .hero{padding: 120px 0 80px} .btn{padding: 10px 20px;font-size: 0.9rem} .card__content{padding: var(--size-4,1.5rem)} }