:root{--color-bg: transparent;--color-card-bg: rgba(255, 255, 255, .6);--color-text: #2d3748;--color-code: #b6d0ff;--color-text-light: #4a5568;--color-heading: #1a202c;--color-accent: #5a67d8;--color-accent-dark: #4c51bf;--color-accent-light: #7886d7;--color-border: rgba(226, 232, 240, .8);--color-bg-secondary: rgba(247, 250, 252, .8);--color-code-bg: rgba(237, 242, 247, .9);--color-inline-code: #805ad5;--color-tag: #6b7280;--color-tag-hover: #4a5568;--backdrop-blur: blur(10px);--content-width: 1200px;--content-padding-x: 1rem;--gradient-start: #4f46e5;--gradient-end: #7c3aed;--gradient-hover-start: #4338ca;--gradient-hover-end: #6d28d9;--button-text: #f8fafc;--button-text-hover: #ffffff;--button-shadow: rgba(79, 70, 229, .35)}.blog-container{width:100%;display:flex;flex-direction:column;align-items:center;padding:var(--spacing-sm) var(--content-padding-x);background-color:var(--color-bg);font-family:Inter,sans-serif}.blog-article{width:100%;max-width:var(--content-width);margin:0 auto;padding:2.5rem;background-color:var(--color-card-bg);backdrop-filter:var(--backdrop-blur);-webkit-backdrop-filter:var(--backdrop-blur);border-radius:1.5rem;box-shadow:0 8px 32px #0000001a}.article-header{margin:0 auto var(--spacing-lg)}.article-meta{margin-bottom:var(--spacing-md);display:flex;align-items:center;justify-content:center;gap:var(--spacing-sm);color:var(--color-text-light);font-size:.95rem}.tags-container{display:flex;align-items:center;gap:var(--spacing-sm)}.tags{display:flex;flex-wrap:wrap;gap:var(--spacing-xs)}.tag{font-size:.875rem;color:var(--color-tag);text-decoration:none;transition:var(--transition)}.tag:hover{color:var(--color-tag-hover)}h1{font-size:clamp(2rem,5vw,3rem);font-weight:700;line-height:1.2;margin-bottom:var(--spacing-sm);color:var(--color-heading);letter-spacing:-.025em}.description{font-size:clamp(1.125rem,2vw,1.25rem);color:var(--color-text-light);line-height:1.6}.hero-image{margin:var(--spacing-lg) auto;max-width:100%;width:100%}.hero-image img{width:100%;height:auto;border-radius:1rem;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f}.article-content{margin:0 auto;font-size:clamp(1rem,1.1vw,1.125rem);line-height:1.75;color:var(--color-text);background-color:var(--color-card-bg);border-radius:1rem;padding:1rem}.article-content :global(h2){font-size:2rem;font-weight:700;margin:1.5rem 0 1rem;line-height:1.3;color:var(--color-heading);letter-spacing:-.025em}.article-content :global(h3){font-size:1.75rem;font-weight:600;margin:1rem 0 .75rem;color:var(--color-heading)}.article-content :global(h4){font-size:1.5rem;font-weight:600;margin:1rem 0 .75rem;color:var(--color-heading)}.article-content :global(h5){font-size:1.25rem;font-weight:600;margin:.75rem 0 .5rem;color:var(--color-heading)}.article-content :global(h6){font-size:1.125rem;font-weight:600;margin:.75rem 0 .5rem;color:var(--color-heading)}.article-content :global(a){color:var(--color-accent);text-decoration:none;border-bottom:1px solid transparent;transition:border-color .2s ease}.article-content :global(a:hover){border-bottom-color:var(--color-accent)}.article-content :global(ul),.article-content :global(ol){margin:1.25rem 0;padding-left:1.5rem;color:var(--color-text)}.article-content :global(li){margin:.5rem 0}.article-content :global(blockquote){margin:2rem 0;padding:1.5rem 2rem;border-left:4px solid var(--color-accent-light);background-color:var(--color-bg-secondary);border-radius:.5rem;color:var(--color-text-light)}.article-content :global(blockquote p){margin:0;font-style:italic}.article-content :global(pre){margin:1.5rem 0;padding:1.25rem;border-radius:.5rem;background-color:var(--color-code-bg);overflow-x:auto}.article-content :global(pre code){padding:0;background-color:transparent;color:var(--color-code)}.article-content :global(img){max-width:100%;height:auto;border-radius:.5rem;margin:2rem 0}.article-content :global(figure){margin:2rem 0}.article-content :global(figcaption){text-align:center;font-size:.875rem;color:var(--color-text-light);margin-top:.75rem}.article-content :global(hr){margin:2rem 0;border:none;border-top:1px solid var(--color-border)}.article-content :global(table){width:100%;margin:2rem 0;border-collapse:collapse;font-size:.95rem;background-color:var(--color-card-bg);border-radius:.5rem;overflow:hidden}.article-content :global(th),.article-content :global(td){padding:.75rem;border:1px solid var(--color-border);text-align:left}.article-content :global(th){background-color:var(--color-bg-secondary);font-weight:600;color:var(--color-heading)}.article-content :global(td){color:var(--color-text)}.article-content :global(details){margin:1.5rem 0;padding:1rem 1.5rem;border-radius:.5rem;background-color:var(--color-bg-secondary);border:1px solid var(--color-border)}.article-content :global(summary){font-weight:600;cursor:pointer;color:var(--color-heading)}.article-content :global(button){display:inline-block;margin:0;padding:.75rem 1.5rem;width:auto;height:auto;border:none;border-radius:.5rem;background:linear-gradient(135deg,var(--gradient-start) 0%,var(--gradient-end) 100%);box-shadow:0 4px 6px -1px var(--button-shadow),0 2px 4px -1px #0000001a;color:var(--button-text);font-family:inherit;font-size:1rem;font-weight:600;line-height:1.5;text-shadow:0 1px 1px rgba(0,0,0,.1);letter-spacing:.01em;text-decoration:none;text-align:center;white-space:nowrap;cursor:pointer;transition:all .2s ease;position:relative;isolation:isolate}.article-content :global(button p){margin:0;padding:0;display:inline;color:inherit;font-size:inherit;line-height:inherit;font-weight:inherit;letter-spacing:inherit;text-shadow:inherit}.article-content :global(button:hover){background:linear-gradient(135deg,var(--gradient-hover-start) 0%,var(--gradient-hover-end) 100%);transform:translateY(-2px);box-shadow:0 6px 8px -1px var(--button-shadow),0 4px 6px -1px #0000001a;color:var(--button-text-hover)}.article-content :global(button:focus){outline:2px solid var(--gradient-start);outline-offset:2px;color:var(--button-text-hover)}.article-content :global(button:active){transform:translateY(0);box-shadow:0 2px 4px -1px var(--button-shadow),0 1px 2px -1px #0000001a}.article-content :global(button:disabled){background:linear-gradient(135deg,#a5a5a5,#7a7a7a);cursor:not-allowed;transform:none;box-shadow:none;color:#ffffffb3;text-shadow:none}.article-content :global(p){margin:.75rem 0;color:var(--color-text)}.article-content :global(p button *){color:inherit!important}.update-date{max-width:800px;margin:var(--spacing-lg) auto 0;text-align:center;font-size:.875rem;color:var(--color-text-light);font-style:italic}.related-posts{width:100%;max-width:var(--content-width);margin:4rem auto 0;padding:var(--spacing-lg) var(--spacing-sm)}@media (max-width: 1280px){:root{--content-width: 1000px}}@media (max-width: 1024px){:root{--content-width: 90vw;--content-padding-x: 1.5rem}.blog-article{padding:2rem}}@media (max-width: 768px){:root{--content-padding-x: 1rem}.blog-article,.article-content{padding:1.5rem}.hero-image{margin:var(--spacing-md) auto}}@media (max-width: 480px){:root{--content-padding-x: .75rem}.blog-article{padding:1.25rem;border-radius:1rem}.article-content{padding:1rem}.article-content :global(blockquote){padding:1rem;margin:1.5rem 0}.article-content :global(pre){padding:1rem;margin:1.25rem 0}.article-content :global(button){padding:.625rem 1.25rem;font-size:.875rem}.article-content :global(button p){font-size:inherit}}@media (max-width: 320px){:root{--content-padding-x: .5rem}.blog-article{padding:1rem}.article-content{padding:.875rem}.tags{gap:.25rem}}
