:root{--article-primary:#1a202c;--article-secondary:#2d3748;--article-muted:#4a5568;--article-light:#718096;--article-border:#e2e8f0;--article-bg:#f7fafc;--article-card-bg:#fff;--article-gradient-primary:linear-gradient(135deg,#667eea,#764ba2);--article-gradient-secondary:linear-gradient(135deg,#f093fb,#f5576c);--article-gradient-accent:linear-gradient(135deg,#4facfe,#00f2fe);--article-gradient-success:linear-gradient(135deg,#56ab2f,#a8e6cf);--article-gradient-warning:linear-gradient(135deg,#f7971e,#ffd200);--article-gradient-info:linear-gradient(135deg,#3498db,#2980b9);--article-gradient-dark:linear-gradient(135deg,#2c3e50,#34495e);--article-glass:hsla(0,0%,100%,.1);--article-glass-border:hsla(0,0%,100%,.2);--article-glass-shadow:0 8px 32px 0 rgba(31,38,135,.37);--article-spacing-xs:0.25rem;--article-spacing-sm:0.5rem;--article-spacing-md:1rem;--article-spacing-lg:1.5rem;--article-spacing-xl:2rem;--article-spacing-2xl:3rem;--article-spacing-3xl:4rem;--article-radius-sm:0.375rem;--article-radius-md:0.5rem;--article-radius-lg:0.75rem;--article-radius-xl:1rem;--article-radius-2xl:1.5rem;--article-shadow-sm:0 1px 2px 0 rgba(0,0,0,.05);--article-shadow-md:0 4px 6px -1px rgba(0,0,0,.1);--article-shadow-lg:0 10px 15px -3px rgba(0,0,0,.1);--article-shadow-xl:0 20px 25px -5px rgba(0,0,0,.1);--article-shadow-2xl:0 25px 50px -12px rgba(0,0,0,.25);--article-transition:300ms ease-in-out}.article-container{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;line-height:1.7;color:var(--article-primary);background:linear-gradient(135deg,#f5f7fa,#c3cfe2);min-height:100vh;position:relative}.article-bg-pattern{position:fixed;top:0;left:0;width:100%;height:100%;z-index:-1;opacity:.03;background-image:radial-gradient(circle at 20% 20%,#667eea 0,transparent 50%),radial-gradient(circle at 80% 80%,#764ba2 0,transparent 50%),radial-gradient(circle at 40% 40%,#f093fb 0,transparent 50%);background-size:300px 300px,200px 200px,150px 150px;animation:articleBgFloat 25s ease-in-out infinite}@keyframes articleBgFloat{0%,to{transform:translate(0) rotate(0deg)}33%{transform:translate(20px,-20px) rotate(120deg)}66%{transform:translate(-15px,15px) rotate(240deg)}}.article-header{position:relative;padding:var(--article-spacing-3xl) var(--article-spacing-md) var(--article-spacing-2xl);text-align:center;background:var(--article-glass);backdrop-filter:blur(20px);border-bottom:1px solid var(--article-glass-border);margin-bottom:var(--article-spacing-3xl)}.article-header:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:var(--article-gradient-primary);opacity:.05;z-index:-1}.article-nav{display:inline-flex;align-items:center;gap:var(--article-spacing-sm);padding:var(--article-spacing-sm) var(--article-spacing-lg);background:var(--article-glass);backdrop-filter:blur(10px);border:1px solid var(--article-glass-border);border-radius:var(--article-radius-2xl);font-size:.875rem;font-weight:500;color:var(--article-secondary);text-decoration:none;margin-bottom:var(--article-spacing-xl);box-shadow:var(--article-shadow-md);transition:all var(--article-transition);animation:slideInDown .8s ease-out}.article-nav:hover{transform:translateY(-2px);box-shadow:var(--article-shadow-lg);color:var(--article-primary)}.article-meta{display:flex;justify-content:center;align-items:center;gap:var(--article-spacing-lg);margin-bottom:var(--article-spacing-lg);flex-wrap:wrap;animation:slideInUp .8s ease-out .2s both}.article-category{display:inline-flex;padding:var(--article-spacing-sm) var(--article-spacing-lg);border-radius:var(--article-radius-xl);font-weight:600;color:#fff;box-shadow:var(--article-shadow-md)}.article-category,.article-read-time{align-items:center;gap:var(--article-spacing-sm);font-size:.875rem}.article-read-time{color:var(--article-light);display:flex}.article-title{font-size:clamp(2rem,5vw,3.5rem);font-weight:800;line-height:1.2;margin-bottom:var(--article-spacing-lg);background:var(--article-gradient-primary);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:slideInUp .8s ease-out .4s both}.article-subtitle{font-size:clamp(1.125rem,2.5vw,1.375rem);color:var(--article-secondary);max-width:800px;margin:0 auto;line-height:1.6;animation:slideInUp .8s ease-out .6s both}.article-content{max-width:800px;margin:0 auto;padding:0 var(--article-spacing-md) var(--article-spacing-3xl)}.article-prose{font-size:1.125rem;line-height:1.8;color:var(--article-primary)}.article-prose h2{font-size:2rem;font-weight:700;margin:var(--article-spacing-2xl) 0 var(--article-spacing-lg);color:var(--article-primary);position:relative;padding-left:var(--article-spacing-lg)}.article-prose h2:before{content:"";position:absolute;left:0;top:.5em;width:4px;height:1.5em;background:var(--article-gradient-primary);border-radius:var(--article-radius-sm)}.article-prose h3{font-size:1.5rem;font-weight:600;margin:var(--article-spacing-xl) 0 var(--article-spacing-md);color:var(--article-secondary)}.article-prose p{margin-bottom:var(--article-spacing-lg);color:var(--article-muted)}.article-prose ol,.article-prose ul{margin:var(--article-spacing-lg) 0;padding-left:var(--article-spacing-xl)}.article-prose li{margin-bottom:var(--article-spacing-sm);color:var(--article-muted)}.article-prose strong{font-weight:600;color:var(--article-primary)}.article-prose a{color:#667eea;text-decoration:none;border-bottom:1px solid transparent;transition:all var(--article-transition)}.article-prose a:hover{color:#764ba2;border-bottom-color:#764ba2}.article-card{background:var(--article-card-bg);border:1px solid var(--article-border);border-radius:var(--article-radius-xl);padding:var(--article-spacing-xl);margin:var(--article-spacing-xl) 0;box-shadow:var(--article-shadow-md);transition:all var(--article-transition)}.article-card:hover{transform:translateY(-2px);box-shadow:var(--article-shadow-lg)}.article-card-blue{background:linear-gradient(135deg,rgba(102,126,234,.1),rgba(118,75,162,.1));border-color:rgba(102,126,234,.2)}.article-card-green{background:linear-gradient(135deg,rgba(86,171,47,.1),rgba(168,230,207,.1));border-color:rgba(86,171,47,.2)}.article-card-yellow{background:linear-gradient(135deg,rgba(247,151,30,.1),rgba(255,210,0,.1));border-color:rgba(247,151,30,.2)}.article-card-red{background:linear-gradient(135deg,rgba(240,147,251,.1),rgba(245,87,108,.1));border-color:rgba(240,147,251,.2)}.article-card-purple{background:linear-gradient(135deg,rgba(52,152,219,.1),rgba(41,128,185,.1));border-color:rgba(52,152,219,.2)}.article-card-dark{background:linear-gradient(135deg,rgba(44,62,80,.1),rgba(52,73,94,.1));border-color:rgba(44,62,80,.2)}.article-card-title{font-size:1.25rem;font-weight:600;margin-bottom:var(--article-spacing-md);color:var(--article-primary);display:flex;align-items:center;gap:var(--article-spacing-sm)}.article-card-content{color:var(--article-muted);line-height:1.6}.article-table{width:100%;border-collapse:collapse;margin:var(--article-spacing-xl) 0;background:var(--article-card-bg);border-radius:var(--article-radius-lg);overflow:hidden;box-shadow:var(--article-shadow-md)}.article-table th{background:var(--article-gradient-primary);color:#fff;padding:var(--article-spacing-md);text-align:left;font-weight:600;font-size:.875rem}.article-table td{padding:var(--article-spacing-md);border-bottom:1px solid var(--article-border);color:var(--article-muted)}.article-table tr:last-child td{border-bottom:none}.article-table tr:hover{background:rgba(102,126,234,.05)}.article-code{background:var(--article-primary);color:#e2e8f0;padding:var(--article-spacing-md);border-radius:var(--article-radius-md);font-family:Fira Code,Monaco,Consolas,monospace;font-size:.875rem;line-height:1.5;overflow-x:auto;box-shadow:var(--article-shadow-md)}.article-code,.article-example{margin:var(--article-spacing-lg) 0}.article-example{background:var(--article-card-bg);border:1px solid var(--article-border);border-radius:var(--article-radius-lg);padding:var(--article-spacing-lg);box-shadow:var(--article-shadow-sm)}.article-example-title{font-weight:600;color:var(--article-primary);margin-bottom:var(--article-spacing-md);font-size:.875rem;text-transform:uppercase;letter-spacing:.05em}.article-cta{background:var(--article-gradient-primary);color:#fff;padding:var(--article-spacing-2xl);border-radius:var(--article-radius-2xl);text-align:center;margin:var(--article-spacing-2xl) 0;box-shadow:var(--article-shadow-xl);position:relative;overflow:hidden}.article-cta:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="dots" width="20" height="20" patternUnits="userSpaceOnUse"><circle cx="10" cy="10" r="1" fill="white" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23dots)"/></svg>');opacity:.3}.article-cta-content{position:relative;z-index:1}.article-cta-title{font-size:1.5rem;font-weight:700;margin-bottom:var(--article-spacing-md)}.article-cta-text{font-size:1rem;opacity:.9;margin-bottom:var(--article-spacing-lg);line-height:1.6}.article-cta-button{display:inline-flex;align-items:center;gap:var(--article-spacing-sm);padding:var(--article-spacing-md) var(--article-spacing-xl);background:#fff;color:#667eea;text-decoration:none;border-radius:var(--article-radius-lg);font-weight:600;transition:all var(--article-transition);box-shadow:var(--article-shadow-md)}.article-cta-button:hover{transform:translateY(-2px);box-shadow:var(--article-shadow-lg);color:#764ba2}.article-tags{display:flex;flex-wrap:wrap;gap:var(--article-spacing-sm);margin-top:var(--article-spacing-2xl);padding-top:var(--article-spacing-xl);border-top:1px solid var(--article-border)}.article-tag{padding:var(--article-spacing-xs) var(--article-spacing-md);background:var(--article-bg);color:var(--article-muted);border-radius:var(--article-radius-lg);font-size:.75rem;font-weight:500;border:1px solid var(--article-border);transition:all var(--article-transition)}.article-tag:hover{background:var(--article-gradient-primary);color:#fff;border-color:transparent}@keyframes slideInDown{0%{opacity:0;transform:translateY(-30px)}to{opacity:1;transform:translateY(0)}}@keyframes slideInUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@media (max-width:768px){.article-header{padding:var(--article-spacing-2xl) var(--article-spacing-md) var(--article-spacing-xl)}.article-meta{flex-direction:column;gap:var(--article-spacing-md)}.article-content{padding:0 var(--article-spacing-md) var(--article-spacing-2xl)}.article-prose{font-size:1rem}.article-prose h2{font-size:1.5rem;padding-left:var(--article-spacing-md)}.article-prose h3{font-size:1.25rem}.article-card{padding:var(--article-spacing-lg)}.article-table{font-size:.875rem}.article-table td,.article-table th{padding:var(--article-spacing-sm)}}@media (max-width:480px){.article-header{padding:var(--article-spacing-xl) var(--article-spacing-sm) var(--article-spacing-lg)}.article-content{padding:0 var(--article-spacing-sm) var(--article-spacing-xl)}.article-card{padding:var(--article-spacing-md)}.article-cta{padding:var(--article-spacing-xl)}}@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}.article-cta-button:focus,.article-nav:focus,.article-tag:focus{outline:2px solid #667eea;outline-offset:2px}@media print{.article-bg-pattern,.article-cta{display:none}.article-card,.article-container{background:#fff}.article-card{border:1px solid #e2e8f0;box-shadow:none}.article-prose a{color:#1a202c;text-decoration:underline}}