.article-page ::-webkit-scrollbar{width:5px}.article-page::-webkit-scrollbar{width:5px}.article-page ::-webkit-scrollbar-track{background:var(--surface-2,#111114)}.article-page::-webkit-scrollbar-track{background:var(--surface-2,#111114)}.article-page ::-webkit-scrollbar-thumb{background:var(--accent);opacity:.7;border-radius:999px}.article-page::-webkit-scrollbar-thumb{background:var(--accent);opacity:.7;border-radius:999px}.article-page ::-webkit-scrollbar-thumb:hover{background:var(--accent-light,#a78bfa)}.article-page::-webkit-scrollbar-thumb:hover{background:var(--accent-light,#a78bfa)}.article-page{scrollbar-width:thin;scrollbar-color:var(--accent)var(--surface-2,#111114);background-color:var(--surface);background-image:radial-gradient(80% 50% at 50% 0,#8b5cf609 0%,#0000 60%),radial-gradient(50% 40% at 85% 15%,#0037ff05 0%,#0000 50%),radial-gradient(circle,#ffffff03 1px,#0000 1px);background-repeat:no-repeat,no-repeat,repeat;background-size:100%,100%,24px 24px}.blog-listing{min-height:100vh;padding:clamp(120px,15vw,180px) 0 80px}.blog-listing-head{margin-bottom:48px}.blog-listing-head .label{font-size:.85rem;font-family:var(--font-mono);text-transform:none;letter-spacing:.02em;color:var(--text2);align-items:center;gap:6px;margin-bottom:20px;display:inline-flex}.blog-listing-head .label:before{display:none}.blog-listing-head h1{font-family:var(--font-display);color:var(--white);margin-bottom:12px;font-size:clamp(2.4rem,5vw,3.6rem);font-weight:700;line-height:1.1}.blog-listing-head p{color:var(--text2);max-width:560px;font-size:clamp(.95rem,1.2vw,1.05rem);line-height:1.6}.blog-listing-grid{grid-template-columns:repeat(2,1fr);gap:24px;display:grid}.blog-listing-grid .blog-card{transition:transform var(--t-base),color var(--t-base),border-color var(--t-base),background var(--t-base);background:#ffffff05;border:1px solid #ffffff0d;border-radius:0;padding:14px 14px 24px}.blog-listing-grid .blog-card:hover{background:#ffffff07;border-color:#8b5cf626}.blog-listing-grid .blog-cover{border-radius:0;overflow:hidden}.blog-listing-grid .blog-meta,.blog-listing-grid .blog-card h3,.blog-listing-grid .blog-card p{padding:0 4px}@media (max-width:768px){.blog-listing-grid{grid-template-columns:1fr}}.article-page{padding:clamp(100px,12vw,160px) 0 80px;overflow-x:clip}@media (max-width:1199px){.article-page{padding-bottom:132px}}.article-back{color:var(--text2);font-size:.85rem;font-family:var(--font-mono);transition:color var(--t-fast);align-items:center;gap:6px;margin-bottom:32px;text-decoration:none;display:inline-flex}.article-back:hover{color:var(--accent)}.article-hero{aspect-ratio:16/9;border-radius:0;margin-bottom:48px;position:relative;overflow:hidden}.article-hero img{object-fit:cover;width:100%;height:100%}.article-hero--live{background:var(--black);border:1px solid var(--border)}.article-hero--live canvas{width:100%;height:100%;display:block}.hero-badges{z-index:2;opacity:0;flex-wrap:wrap;gap:6px;max-width:70%;animation:.8s 1.5s forwards badge-fade;display:flex;position:absolute;bottom:14px;left:14px}@keyframes badge-fade{to{opacity:1}}.hero-badge{font-family:var(--font-mono);letter-spacing:.04em;color:#ffffff73;-webkit-backdrop-filter:blur(8px);border-radius:var(--r-xs);white-space:nowrap;transition:color var(--t-fast),border-color var(--t-fast);background:#09090b8c;border:1px solid #ffffff0f;padding:3px 9px;font-size:.58rem}.hero-badge:hover{color:#ffffffb3;border-color:#8b5cf640}.article-meta-bar{border-bottom:1px solid #ffffff0f;flex-wrap:wrap;align-items:center;gap:12px;margin-bottom:28px;padding-bottom:20px;display:flex}.article-meta-row{align-items:center;gap:40px;margin-left:auto;display:flex}.article-meta-bar .blog-tag{align-self:center;font-weight:600}.article-meta-bar time,.article-meta-bar .read-time{color:var(--text3);font-size:.78rem;font-family:var(--font-mono);letter-spacing:.02em}.article-meta-date,.article-meta-bar .read-time{align-items:center;gap:8px;display:inline-flex}.meta-icon{width:17px;height:17px;color:var(--text3);flex-shrink:0;display:block}.article-meta-bar .meta-sep{color:var(--text3);font-family:var(--font-mono);opacity:.5;font-size:.8rem}.article-title{font-family:var(--font-display);color:var(--white);margin-bottom:16px;font-size:clamp(1.7rem,3.5vw,2.6rem);font-weight:700;line-height:1.12}.article-subtitle{color:var(--text2);max-width:720px;margin-bottom:40px;font-size:clamp(.95rem,1.3vw,1.1rem);line-height:1.65}.article-body{overflow-wrap:break-word;word-break:break-word;min-width:0;max-width:760px;overflow-x:hidden}.article-body img,.article-body video,.article-body canvas{max-width:100%;height:auto;display:block}.article-body h2{font-family:var(--font-display);color:var(--white);margin:72px 0 16px;font-size:clamp(1.65rem,3vw,2.1rem);font-weight:700;line-height:1.15}.article-body h3{font-family:var(--font-display);color:var(--white);margin:44px 0 14px;font-size:clamp(1.2rem,1.8vw,1.4rem);font-weight:600;line-height:1.3}.article-body h4{font-family:var(--font-display);color:var(--accent);margin:32px 0 10px;font-size:clamp(1rem,1.2vw,1.1rem);font-weight:500;line-height:1.4}.article-body p{color:var(--text);hanging-punctuation:first last;margin-bottom:24px;font-size:clamp(1rem,1.3vw,1.1rem);line-height:1.85}.article-body strong{color:var(--white);font-weight:600}.article-body em{color:var(--text);font-style:italic}.article-body a em{color:inherit;font-style:normal}.article-body a,.article-body h2 a,.article-body h3 a,.article-body strong a,.article-body em a,.article-body li a,.article-body blockquote a,.article-body .article-bio a{color:var(--accent);-webkit-box-decoration-break:clone;box-decoration-break:clone;transition:color var(--t-fast);background-image:linear-gradient(0deg,#8b5cf680 8px,#0000 8px),linear-gradient(#8b5cf680,#8b5cf680);background-position:0 100%,0 100%;background-repeat:no-repeat,no-repeat;background-size:1px 100%,100% 1px;padding-bottom:2px;padding-left:6px;text-decoration:none}.article-body a:hover,.article-body h2 a:hover,.article-body h3 a:hover,.article-body strong a:hover,.article-body em a:hover,.article-body li a:hover,.article-body blockquote a:hover,.article-body .article-bio a:hover{color:var(--accent-light,#a78bfa);background-image:linear-gradient(0deg,#8b5cf6e6 8px,#0000 8px),linear-gradient(#8b5cf6e6,#8b5cf6e6)}.article-body ul,.article-body ol{margin-bottom:20px;padding-left:24px;list-style-type:disc}.article-body ol{list-style-type:decimal}.article-body li{color:var(--text);margin-bottom:8px;font-size:clamp(1rem,1.3vw,1.1rem);line-height:1.85}.article-body li strong{color:var(--white)}.article-body .shiki-block{margin:24px 0 28px;position:relative}.code-copy{z-index:2;font-family:var(--font-mono);color:var(--text3);border-radius:var(--r-xs);cursor:pointer;transition:all var(--t-fast);text-transform:uppercase;letter-spacing:.06em;background:#ffffff14;border:1px solid #ffffff1a;padding:5px 12px;font-size:.6rem;line-height:1;position:absolute;top:9px;right:9px}.code-copy:hover{color:var(--white);background:#8b5cf62e;border-color:#8b5cf666}.code-copy--done{color:var(--success,#4ade80);background:#4ade800f;border-color:#4ade8040}.article-body .shiki-block pre{border:1px solid var(--border);font-family:var(--font-mono);-webkit-overflow-scrolling:touch;tab-size:2;border-radius:0;padding:20px 24px;font-size:.82rem;line-height:1.7;overflow-x:auto;background:var(--surface-code,#1a1b26)!important}.article-body .shiki-block pre code{font-size:inherit;color:inherit;border:none;padding:0;font-family:inherit;background:0 0!important}.article-body .shiki-block .line{display:inline}.article-body code{color:var(--code-accent,#c4b5fd);border-radius:var(--r-xs);font-family:var(--font-mono);background:#8b5cf61f;border:1px solid #8b5cf614;padding:2px 7px;font-size:.875rem}.article-body pre:not(.shiki-block pre){background:var(--surface-code,#1a1b26);border:1px solid var(--border);font-family:var(--font-mono);color:#e4e4e7;-webkit-overflow-scrolling:touch;border-radius:0;margin:24px 0 28px;padding:20px 24px;font-size:.82rem;line-height:1.65;overflow-x:auto}.article-section-img{border:1px solid var(--border);border-radius:0;margin:32px 0;overflow:hidden}.article-section-img img{width:100%;height:auto;display:block}.article-body .checklist{padding-left:0;list-style:none}.article-body .checklist li{padding-left:28px;position:relative}.article-body .checklist li:before{content:"☐";color:var(--accent);position:absolute;left:0}.article-body blockquote{border-left:3px solid var(--accent);font-family:var(--font-serif);background:#8b5cf60d;border-radius:0;margin:48px 0;padding:28px 36px 28px 40px;font-size:clamp(1.2rem,1.7vw,1.4rem);font-style:italic;position:relative}.article-body blockquote:before{content:"“";font-family:var(--font-serif);color:var(--accent);opacity:.25;font-size:3rem;font-style:normal;line-height:1;position:absolute;top:12px;left:12px}.article-body blockquote p{color:var(--white);font-family:inherit;font-style:italic;font-size:inherit;margin-bottom:0;font-weight:500;line-height:1.65}.article-body table{border-collapse:collapse;background:#ffffff08;border:1px solid #ffffff0f;border-radius:0;width:100%;margin:24px 0 28px;font-size:clamp(.85rem,1.1vw,.95rem)}.article-body thead th{text-align:left;font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.06em;color:var(--text2);border-bottom:1px solid #ffffff1a;padding:10px 16px;font-size:.7rem;font-weight:600}.article-body tbody td{color:var(--text);vertical-align:top;border-bottom:1px solid #ffffff0a;padding:10px 16px;line-height:1.45}.article-body tbody tr:last-child td{border-bottom:none}.article-body tbody td:first-child{color:var(--white);font-weight:500}.article-body tbody td em{color:var(--text2);font-size:.85em}.article-author{border-top:1px solid var(--border);align-items:center;gap:16px;margin-top:64px;padding-top:32px;display:flex}.article-author-avatar{border-radius:var(--r-full);object-fit:cover;border:2px solid var(--border);width:48px;height:48px}.article-author-info p{margin:0}.article-author-name{color:var(--white);font-size:.95rem;font-weight:600}.article-author-role{color:var(--text3);font-size:.8rem}.demo-container{border:1px solid var(--border);background:var(--black);border-radius:0;margin:28px 0 32px;overflow:hidden}.demo-canvas-wrap{aspect-ratio:16/9;width:100%;position:relative;overflow:hidden}.demo-canvas-wrap canvas{width:100%;height:100%;display:block}.demo-label{border-top:1px solid var(--border);font-family:var(--font-mono);color:var(--text3);align-items:center;gap:8px;padding:10px 16px;font-size:.72rem;display:flex}.demo-label svg{color:var(--accent);flex-shrink:0}.sf-controls{background:linear-gradient(#0000,#09090bf2 40%);flex-direction:column;gap:10px;padding:12px 16px;display:flex;position:absolute;bottom:0;left:0;right:0}.sf-presets{flex-wrap:wrap;gap:6px;display:flex}.sf-preset{font-family:var(--font-mono,"JetBrains Mono",monospace);letter-spacing:.03em;color:var(--text3,#71717a);cursor:pointer;background:#ffffff0a;border:1px solid #ffffff14;border-radius:0;padding:4px 10px;font-size:.68rem;transition:all .15s}.sf-preset:hover{color:var(--white,#fff);border-color:#8b5cf64d}.sf-preset.active{color:var(--accent,#8b5cf6);background:#8b5cf61a;border-color:#8b5cf666}.sf-sliders{grid-template-columns:repeat(4,1fr);gap:8px;display:grid}.sf-slider{cursor:pointer;align-items:center;gap:6px;display:flex}.sf-slider-label{font-family:var(--font-mono,"JetBrains Mono",monospace);color:var(--text3,#71717a);min-width:16px;font-size:.65rem}.sf-slider input[type=range]{appearance:none;background:#ffffff1a;border-radius:0;outline:none;flex:1;height:2px}.sf-slider input[type=range]::-webkit-slider-thumb{appearance:none;background:var(--accent,#8b5cf6);cursor:pointer;border-radius:50%;width:10px;height:10px}.sf-slider input[type=range]::-moz-range-thumb{background:var(--accent,#8b5cf6);cursor:pointer;border:none;border-radius:50%;width:10px;height:10px}.sf-slider-val{font-family:var(--font-mono,"JetBrains Mono",monospace);color:var(--text3,#71717a);text-align:right;min-width:28px;font-size:.62rem}@media (max-width:768px){.sf-sliders{grid-template-columns:repeat(2,1fr)}}.demo-placeholder{border-radius:var(--r-sm);text-align:center;background:#8b5cf60a;border:1px dashed #8b5cf64d;margin:24px 0;padding:40px 24px}.demo-placeholder-text{color:var(--text2);font-size:.85rem;font-family:var(--font-mono);letter-spacing:.02em;margin:0}@property --orbit-angle{syntax:"<angle>";inherits:false;initial-value:0deg}.css-trig-stage{background:var(--black);width:100%;height:100%;position:relative;overflow:hidden}.css-trig-center{border-radius:var(--r-full);background:var(--accent);width:6px;height:6px;margin:-3px 0 0 -3px;position:absolute;top:50%;left:50%;box-shadow:0 0 20px #8b5cf699,0 0 60px #8b5cf633}.css-trig-orb{width:var(--size);height:var(--size);margin-left:calc(var(--size)/-2);margin-top:calc(var(--size)/-2);border-radius:var(--r-full);background:hsl(var(--hue),80%,65%);box-shadow:0 0 calc(var(--size) + 4px)hsla(var(--hue),80%,60%,.5);animation:orbit-spin var(--dur)linear infinite;animation-delay:var(--delay);transform:translateX(calc(sin(var(--orbit-angle)*var(--mx))*var(--rx)))translateY(calc(cos(var(--orbit-angle)*var(--my))*var(--ry)));opacity:calc(.5 + sin(var(--orbit-angle)*.5)*.3);position:absolute;top:50%;left:50%}@keyframes orbit-spin{to{--orbit-angle:360deg}}.css-trig-ring{width:calc(var(--ring-r)*2);height:calc(var(--ring-r)*2);margin-left:calc(var(--ring-r)*-1);margin-top:calc(var(--ring-r)*-1);border-radius:var(--r-full);pointer-events:none;border:1px solid #8b5cf60f;position:absolute;top:50%;left:50%}.tip-grid{grid-template-columns:repeat(3,1fr);gap:16px;margin:48px 0 40px;display:grid}.tip-card{border:1px solid var(--border);transition:border-color var(--t-base);background:#ffffff04;border-radius:0;overflow:hidden}.tip-card:hover{border-color:#8b5cf633}.tip-canvas-area{aspect-ratio:1;background:var(--black);width:100%;position:relative}.tip-canvas-area canvas{width:100%;height:100%;display:block}.tip-info{border-top:1px solid var(--border);padding:20px}.tip-tag{font-family:var(--font-mono);color:var(--accent);text-transform:uppercase;letter-spacing:.06em;opacity:.7;margin-bottom:8px;font-size:.62rem;display:inline-block}.tip-info h4{font-family:var(--font-display);color:var(--white);margin:0 0 8px;font-size:.95rem;font-weight:600;line-height:1.3}.tip-info p{color:var(--text2);margin:0 0 12px;font-size:.8rem;line-height:1.55}.tip-copy{font-family:var(--font-mono);color:var(--text3);border-radius:var(--r-xs);cursor:pointer;transition:all var(--t-fast);text-transform:uppercase;letter-spacing:.05em;background:#ffffff08;border:1px solid #ffffff0f;padding:4px 10px;font-size:.58rem}.tip-copy:hover{color:var(--accent);background:#8b5cf60f;border-color:#8b5cf640}.tip-copy--done{color:var(--success,#4ade80);border-color:#4ade8033}.download-checklist{color:var(--accent,#8b5cf6);font-family:var(--font-mono,"JetBrains Mono",monospace);letter-spacing:.04em;cursor:pointer;transition:all var(--t-base);background:#8b5cf614;border:none;border-radius:0;align-items:center;gap:10px;margin:24px 0 8px;padding:12px 24px;font-size:.78rem;display:inline-flex}.download-checklist:hover{background:#8b5cf624;transform:translateY(-1px)}.download-checklist svg{opacity:.7;transition:opacity var(--t-fast)}.download-checklist:hover svg{opacity:1}.reading-progress-label{z-index:100;transform-origin:0 0;opacity:0;white-space:nowrap;align-items:center;gap:10px;animation:.4s forwards rp-fade-in;display:flex;position:fixed;top:clamp(56px,7vh,80px);left:clamp(12px,1.5vw,24px);transform:rotate(-90deg)translate(-100%)}.reading-progress-section{font-family:var(--font-mono);color:var(--text2);letter-spacing:.06em;text-transform:uppercase;opacity:.6;font-size:.6rem}.reading-progress-counter{font-family:var(--font-mono);color:var(--accent);letter-spacing:.04em;opacity:.7;font-size:.5rem}.reading-progress{z-index:100;opacity:0;flex-direction:column;align-items:center;gap:6px;animation:.4s forwards rp-fade-in;display:flex;position:fixed;bottom:calc(clamp(16px,2vh,28px) + 18px);left:clamp(16px,2vw,32px)}@keyframes rp-fade-in{to{opacity:1}}.reading-progress-track{background:#ffffff0f;border-radius:1px;flex-shrink:0;width:2px;height:120px;position:relative}.reading-progress-fill{background:linear-gradient(to bottom,var(--accent),#8b5cf64d);width:100%;transition:height var(--t-fast);border-radius:1px}.reading-progress-dot{background:var(--accent);border-radius:var(--r-full);width:6px;height:6px;transition:top .15s;position:absolute;left:50%;transform:translate(-50%,-50%);box-shadow:0 0 8px #8b5cf666}.reading-progress-pct{z-index:100;font-family:var(--font-mono);color:var(--text3);letter-spacing:.04em;white-space:nowrap;opacity:0;font-size:.55rem;animation:.4s forwards rp-fade-in;position:fixed;bottom:clamp(16px,2vh,28px);left:calc(clamp(16px,2vw,32px) + 1px);transform:translate(-50%)}.reading-progress-counter-mobile,.mobile-toc{display:none}@media (max-width:1199px){.mobile-toc{z-index:200;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#09090beb;border-top:1px solid #ffffff14;transition:transform .35s,opacity .35s;display:block;position:fixed;bottom:0;left:0;right:0}}.mobile-toc--hidden{pointer-events:none;opacity:0;transition:transform .35s,opacity .35s;transform:translateY(100%)}.mobile-toc-toggle{width:100%;color:var(--text2);font-family:var(--font-mono);letter-spacing:.03em;cursor:pointer;text-align:left;transition:color var(--t-fast);background:0 0;border:none;align-items:center;gap:10px;padding:13px 20px;font-size:.7rem;display:flex}.mobile-toc-toggle:hover{color:var(--white)}.mobile-toc-section{text-overflow:ellipsis;white-space:nowrap;color:var(--text);flex:1;overflow:hidden}.mobile-toc-chevron{transition:transform var(--t-fast);flex-shrink:0}.mobile-toc-chevron.open{transform:rotate(180deg)}.mobile-toc-body{border-bottom:1px solid #ffffff0d;max-height:50vh;padding:8px 0 8px 8px;overflow-y:auto}.mobile-toc-body .aside-toc{padding-right:0}.mobile-toc-body .aside-link{white-space:normal;overflow-wrap:break-word;word-break:normal;padding:6px 0 6px 14px;font-size:.82rem}.article-layout{grid-template-columns:1fr;gap:0;min-width:0;display:grid}@media (min-width:1200px){.article-layout{grid-template-columns:1fr 440px;gap:64px}}.article-sidebar{display:none}@media (min-width:1200px){.article-sidebar{flex-direction:column;align-self:start;max-height:600px;display:flex;position:sticky;top:calc(100vh - 620px)}}.aside-header{border-bottom:1px solid #ffffff14;margin-bottom:16px;padding-bottom:14px}.aside-header-label{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.14em;color:var(--text3);margin-bottom:0;font-size:.65rem;display:block}.aside-header-meta{font-family:var(--font-mono);color:var(--text3);letter-spacing:.02em;align-items:center;gap:8px;font-size:.55rem;display:flex}.aside-header-tag{color:var(--accent);opacity:.8}.aside-toc-scroll{scrollbar-width:none;-ms-overflow-style:none;flex:1;overflow-y:auto}.aside-toc-scroll::-webkit-scrollbar{display:none}.aside-toc{padding-right:8px}.aside-chapter{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.12em;color:var(--accent);opacity:.75;margin:16px 0 6px;padding-left:2px;font-size:.62rem;display:block}.aside-toc>div:first-child .aside-chapter{margin-top:0}.aside-link{color:var(--text2);transition:color var(--t-fast),border-color var(--t-fast),opacity var(--t-fast);opacity:.8;white-space:normal;text-overflow:clip;border-left:1.5px solid #ffffff0f;padding:5px 0 5px 14px;font-size:.85rem;font-style:normal;line-height:1.5;text-decoration:none;display:block;overflow:visible}.aside-link:hover{color:var(--white);opacity:1}.aside-link--active{color:var(--white);border-color:var(--accent);opacity:1;font-weight:500}.aside-actions{border-top:1px solid #ffffff0f;flex-shrink:0;gap:8px;margin-top:8px;padding-top:16px;display:flex}.aside-share-group{flex-shrink:0;align-items:center;gap:6px;display:flex}.aside-share-label{font-family:var(--font-mono);color:var(--text3);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;padding-right:2px;font-size:.6rem}.aside-share-btn{width:32px;height:32px;color:var(--text3);cursor:pointer;transition:all var(--t-fast);background:#ffffff08;border:1px solid #ffffff14;border-radius:0;flex-shrink:0;justify-content:center;align-items:center;display:flex}.aside-share-btn:hover{color:var(--white);background:#8b5cf61a;border-color:#8b5cf64d}.aside-share-btn--copied{color:var(--success,#4ade80);background:#4ade800f;border-color:#4ade8040}.aside-useful{height:32px;font-family:var(--font-mono);color:var(--text3);cursor:pointer;transition:all var(--t-fast);letter-spacing:.03em;background:#ffffff05;border:1px solid #ffffff12;border-radius:0;flex:1;justify-content:center;align-items:center;gap:7px;padding:0 10px;font-size:.65rem;line-height:1;display:flex}.aside-useful svg{flex-shrink:0;width:15px;height:15px;display:block}.aside-useful:hover{color:var(--text);background:#ffffff0a;border-color:#ffffff1f}.aside-useful--voted{color:var(--accent);cursor:default;background:#8b5cf60d;border-color:#8b5cf633}.aside-useful-count{opacity:.55;font-size:.6rem}.article-footer{margin-top:64px}.article-footer-author{text-align:center;border-top:1px solid var(--border);flex-direction:column;align-items:center;gap:12px;padding:40px 0;display:flex}.article-footer-author .article-author-info p{margin:0}.article-footer-actions{display:none}@media (max-width:1099px){.article-footer-actions{border-bottom:1px solid var(--border);justify-content:center;margin-bottom:40px;padding-bottom:40px;display:flex}}.article-footer-share-buttons{gap:8px;display:flex}.share-btn{border-radius:var(--r-full);border:1px solid var(--border);width:36px;height:36px;color:var(--text2);cursor:pointer;transition:all var(--t-fast);background:#ffffff05;justify-content:center;align-items:center;text-decoration:none;display:flex}.share-btn:hover{color:var(--white);background:#8b5cf614;border-color:#8b5cf64d}.footer-useful{font-family:var(--font-mono);color:var(--text2);border:1px solid var(--border);cursor:pointer;transition:all var(--t-fast);letter-spacing:.02em;background:#ffffff05;border-radius:0;align-items:center;gap:8px;padding:8px 20px;font-size:.75rem;display:flex}.footer-useful:hover{color:var(--text);background:#ffffff0a;border-color:#ffffff1f}.footer-useful--voted{color:var(--accent);cursor:default;background:#8b5cf60d;border-color:#8b5cf633}.footer-useful-count{opacity:.6;margin-left:4px}.article-footer-nav-heading{font-family:var(--font-mono);color:var(--text3);text-transform:uppercase;letter-spacing:.08em;margin-bottom:20px;font-size:.7rem}.article-footer-nav{grid-template-columns:repeat(2,1fr);gap:32px;display:grid}.footer-cover{aspect-ratio:16/9;position:relative;overflow:hidden}.blog-cover-placeholder{background:linear-gradient(135deg,#18181b,#27272a);width:100%;height:100%}.article-bio{color:var(--text2);border-top:1px solid #ffffff0f;margin-top:40px;padding-top:32px;font-size:clamp(.88rem,1.1vw,.95rem);line-height:1.7}.article-body hr{opacity:.45;background:linear-gradient(90deg,#0000 0%,#8b5cf6 30%,#3b82f6 70%,#0000 100%);border:none;height:1px;margin:64px 0;position:relative}.article-body hr:before{content:none}@media (max-width:768px){.reading-progress{bottom:calc(clamp(16px,2vh,28px) + 66px);left:11px}.reading-progress-label{display:none}.reading-progress-pct{top:auto;bottom:calc(clamp(16px,2vh,28px) + 44px);left:13px;transform:translate(-50%)rotate(-90deg)}.reading-progress-track{height:17vh}.article-hero{aspect-ratio:16/9;border-radius:var(--r-0);margin-left:calc(-1*var(--g));margin-right:calc(-1*var(--g));margin-bottom:32px}.article-hero img{object-position:left center}.article-body .shiki-block pre,.article-body pre:not(.shiki-block pre){border-radius:0;padding:14px 16px;font-size:.75rem}.article-body h2{margin-top:40px}.article-body h3{margin-top:32px}.demo-container{border-radius:0}.demo-canvas-wrap{aspect-ratio:4/3}.tip-grid{grid-template-columns:1fr;gap:16px}.tip-canvas-area{aspect-ratio:16/10}.meta-icon{width:14px;height:14px}.article-meta-date .meta-icon{position:relative;top:-1px}.article-meta-bar{flex-direction:column;align-items:flex-start;gap:8px;display:flex}.article-meta-bar .blog-tag{align-self:flex-start}.article-meta-bar .meta-sep{display:none}.article-meta-row{align-self:flex-start;gap:20px;margin-left:0}.article-title{font-size:clamp(1.6rem,6vw,2.2rem)!important}.article-author{text-align:center;flex-direction:column}.article-body code{word-break:break-all}.article-body blockquote{margin:24px 0;padding:16px 20px;font-size:clamp(1.05rem,1.4vw,1.2rem)}.download-checklist{justify-content:center;width:100%}.hero-badges{gap:4px;padding:8px}.hero-badge{padding:2px 6px;font-size:.48rem}.article-footer-author{padding:32px 0}.article-footer-nav{grid-template-columns:1fr;gap:24px}.article-footer-nav-heading{margin-top:8px}}@media (max-width:480px){.article-hero img{object-position:left center}}