:root{--font-sans:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;--font-mono:'Fira Code', 'Courier New', monospace;--container-max-width:768px;--header-height:80px;--spacing-xs:4px;--spacing-sm:8px;--spacing-md:16px;--spacing-lg:24px;--spacing-xl:32px;--spacing-2xl:48px;--spacing-3xl:64px;--radius-sm:6px;--radius-md:12px;--radius-lg:20px;--radius-full:50%;--transition-fast:0.15s ease;--transition-normal:0.3s ease;--transition-slow:0.4s ease;--bg-primary:#f8fafc;--bg-secondary:#f1f5f9;--bg-code:#0f172a;--text-primary:#0f172a;--text-secondary:#475569;--text-muted:#94a3b8;--text-code:#f8fafc;--border-color:#e2e8f0;--border-strong:#cbd5e1;--accent:#22c55e;--accent-hover:#16a34a;--selection-bg:#e0e7ff;--selection-text:#312e81}[data-dark-mode]{--bg-primary:#121212;--bg-secondary:#1e1e1e;--bg-code:#0a0a0a;--text-primary:#fafafa;--text-secondary:#a3a3a3;--text-muted:#737373;--text-code:#e5e5e5;--border-color:#262626;--border-strong:#404040;--accent:#4ade80;--accent-hover:#22c55e;--selection-bg:#1e3a5f;--selection-text:#e0f2fe}*,*::before,*::after{box-sizing:border-box}html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{margin:0;padding:0;min-height:100vh;font-family:var(--font-sans);background:var(--bg-primary);color:var(--text-primary);line-height:1.7}::selection{background:var(--selection-bg);color:var(--selection-text)}a{color:var(--accent);text-decoration:none;transition:color var(--transition-fast)}a:hover{color:var(--accent-hover)}img{max-width:100%;height:auto}.container{max-width:var(--container-max-width);margin:0 auto;padding:0 var(--spacing-lg)}.layout-container{max-width:var(--container-max-width);margin:0 auto;padding:var(--spacing-3xl)}.skip-link{position:absolute;top:-100%;left:50%;transform:translateX(-50%);background:var(--accent);color:#fff;padding:var(--spacing-sm)var(--spacing-lg);border-radius:var(--radius-md);font-weight:600;font-size:.875rem;z-index:10000;transition:top var(--transition-fast)}.skip-link:focus{top:var(--spacing-sm);color:#fff}:focus-visible{outline:2px solid var(--accent);outline-offset:2px}:focus:not(:focus-visible){outline:none}button:focus-visible,.dark-mode-toggle:focus-visible,.back-to-top:focus-visible{outline:2px solid var(--accent);outline-offset:2px}a:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:2px}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}.site-header{position:fixed;top:0;left:0;right:0;z-index:999}.site-header__inner{background:var(--bg-primary);backdrop-filter:saturate(180%)blur(5px);height:var(--header-height);border-bottom:1px solid var(--border-color)}.site-header__container{max-width:var(--container-max-width);margin:0 auto;padding:var(--spacing-sm)var(--spacing-lg);height:100%;display:flex;justify-content:space-between;align-items:center}.site-header__logo{text-decoration:none;font-weight:700;font-size:1rem;text-transform:uppercase;letter-spacing:.05em;color:var(--text-primary)}.site-header__nav{display:flex;align-items:center}.site-header__nav-link{text-decoration:none;color:var(--text-secondary);font-size:.875rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;margin-left:var(--spacing-xl);transition:color var(--transition-fast)}.site-header__nav-link:hover{color:var(--accent)}.dark-mode-toggle{margin-left:var(--spacing-lg);background:0 0;border:none;cursor:pointer;padding:var(--spacing-sm);color:var(--text-secondary);display:flex;align-items:center;justify-content:center}.toggle-dark{display:inline}.toggle-light{display:none}[data-dark-mode] .toggle-dark{display:none}[data-dark-mode] .toggle-light{display:inline}.rss-link{margin-left:var(--spacing-md);padding:var(--spacing-sm);color:var(--text-secondary);transition:color var(--transition-fast);display:flex;align-items:center}.rss-link:hover{color:var(--accent)}.site-footer{border-top:1px solid var(--border-color);margin-top:var(--spacing-3xl)}.site-footer__inner{max-width:var(--container-max-width);margin:0 auto;padding:var(--spacing-lg);height:var(--header-height);display:flex;align-items:center;justify-content:space-between}.site-footer__copyright{font-size:.875rem;color:var(--text-muted)}.site-footer__social{display:flex;gap:var(--spacing-lg)}.site-footer__social-link{color:var(--text-muted);transition:color var(--transition-fast)}.site-footer__social-link:hover{color:var(--accent)}.back-to-top{position:fixed;bottom:var(--spacing-xl);right:var(--spacing-xl);width:48px;height:48px;border-radius:var(--radius-full);background:var(--accent);color:#fff;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:1000;box-shadow:0 4px 12px rgba(0,0,0,.15);opacity:0;visibility:hidden;pointer-events:none;transition:opacity var(--transition-slow),visibility var(--transition-slow),transform var(--transition-normal)}.back-to-top:hover{transform:translateY(-4px)}.back-to-top.visible{opacity:1;visibility:visible;pointer-events:auto}.article-card{margin-bottom:40px;padding-bottom:40px;border-bottom:1px solid var(--border-color)}.article-card:last-child{border-bottom:none}.article-card__meta{font-size:.75rem;color:var(--text-muted);margin-bottom:var(--spacing-sm);display:flex;align-items:center;gap:var(--spacing-sm)}.article-card__meta .reading-time{color:var(--accent);font-weight:600}.article-card__title{font-size:1.5rem;font-weight:700;margin:0 0 var(--spacing-md)}.article-card__title a{color:var(--text-primary);text-decoration:none}.article-card__title a:hover{color:var(--accent)}.article-card__description{color:var(--text-secondary);margin:0;line-height:1.6}.error-page{min-height:calc(100vh - 180px);display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:var(--spacing-3xl)var(--spacing-lg)}.error-page__code{font-size:8rem;font-weight:900;color:var(--accent);line-height:1;margin:0}.error-page__title{font-size:1.5rem;font-weight:700;margin:var(--spacing-lg)0 var(--spacing-md);color:var(--text-primary)}.error-page__description{color:var(--text-secondary);margin:0 0 var(--spacing-xl);max-width:400px}.error-page__link{display:inline-flex;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-md)var(--spacing-lg);background:var(--accent);color:#fff;text-decoration:none;border-radius:var(--radius-md);font-weight:600;font-size:.875rem;transition:opacity var(--transition-fast)}.error-page__link:hover{opacity:.9;color:#fff}.reader-container{max-width:var(--container-max-width);margin:0 auto;padding:var(--spacing-3xl)var(--spacing-lg)40px}.article-header{margin-bottom:var(--spacing-2xl)}.article-meta-top{display:flex;gap:12px;align-items:center;font-size:.75rem;font-weight:500;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);margin-bottom:var(--spacing-lg)}.article-meta-top .reading-time{color:var(--accent);font-weight:600}.article-tags-top{display:flex;gap:var(--spacing-sm)}.article-tag-top{font-size:.625rem;font-weight:900;letter-spacing:.2em;color:var(--accent)}.article-title{font-size:3rem;font-weight:900;line-height:1.1;letter-spacing:-.05em;color:var(--text-primary);margin-bottom:var(--spacing-xl)}.article-description{font-size:1.25rem;line-height:1.6;color:var(--text-secondary)}.article-cover{margin-bottom:var(--spacing-2xl);border-radius:var(--radius-md);overflow:hidden}.article-cover img{width:100%;height:auto;display:block;filter:grayscale(100%);transition:filter 700ms ease}.article-cover:hover img{filter:grayscale(0%)}.prose{color:var(--text-secondary);font-size:1.125rem;font-weight:400;line-height:1.8}.prose h1{font-size:2.25rem;font-weight:800;letter-spacing:-.025em;color:var(--text-primary);margin-top:2em;margin-bottom:1em;line-height:1.2}.prose h2{font-size:1.875rem;font-weight:900;letter-spacing:-.025em;color:var(--text-primary);margin-top:3rem;margin-bottom:1rem;line-height:1.3}.prose h3{font-size:1.25rem;font-weight:700;color:var(--text-primary);margin-top:1.6em;margin-bottom:.6em;line-height:1.4}.prose h4{font-size:1.25rem;font-weight:600;color:var(--text-primary);margin-top:1.5em;margin-bottom:.5em}.prose p{margin-top:1.25em;margin-bottom:1.25em}.prose strong{font-weight:600;color:var(--text-primary)}.prose em{font-style:italic}.prose a{color:var(--accent);text-decoration:underline;text-underline-offset:2px;font-weight:500;transition:color var(--transition-fast)}.prose a:hover{color:var(--accent-hover)}.prose code{font-family:var(--font-mono);font-size:.875rem;background:var(--bg-secondary);color:var(--accent);padding:2px 6px;border-radius:var(--radius-sm);font-weight:500}.prose pre{font-family:var(--font-mono);font-size:.875rem;line-height:1.7;background:var(--bg-code);color:var(--text-code);padding:2rem;border-radius:var(--radius-lg);border:1px solid var(--border-color);overflow-x:auto;margin-top:1.75em;margin-bottom:1.75em}.prose pre code{background:0 0;padding:0;color:inherit;font-size:inherit;font-weight:400}.prose ul,.prose ol{margin-top:1.25em;margin-bottom:1.25em;padding-left:1.625em}.prose ul{list-style-type:disc}.prose ul li::marker{color:var(--accent)}.prose ol li::marker{color:var(--accent);font-weight:600}.prose li{margin-top:.5rem;margin-bottom:.5rem}.prose blockquote{font-style:italic;border-left:4px solid var(--accent);background:var(--bg-secondary);padding:1rem 2rem;color:var(--text-secondary);margin-top:1.6em;margin-bottom:1.6em}.prose blockquote p{margin:0}.prose img{max-width:100%;height:auto;margin-top:2em;margin-bottom:2em;border-radius:.5rem;display:block}.prose figure{margin:2em 0;padding:0}.prose figure img{margin-bottom:.75em}.prose figcaption{font-size:.875em;color:var(--text-secondary);text-align:center}.prose figcaption h4{font-size:.9375em;font-weight:600;color:var(--text-primary);margin:0 0 .25em}.prose figcaption p{margin:0}.prose hr{border:none;border-top:1px solid var(--border-color);margin-top:3em;margin-bottom:3em}.prose table{width:100%;border-collapse:collapse;margin-top:2em;margin-bottom:2em;font-size:.875em}.prose thead{border-bottom:2px solid var(--border-strong)}.prose th{padding:.75em;text-align:left;font-weight:600;color:var(--text-primary)}.prose td{padding:.75em;border-bottom:1px solid var(--border-color)}.prose tbody tr:hover{background:var(--bg-secondary)}