.article-page{background-color:#0f0f13;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 h1{font-family:var(--font-syne);color:var(--white);margin-bottom:8px;font-size:clamp(2rem,4vw,3.2rem);font-weight:700}.blog-listing-head p{color:var(--text2);font-size:1rem}.blog-listing-grid{grid-template-columns:repeat(2,1fr);gap:32px;display:grid}.blog-listing-grid .blog-card{border-radius:var(--r-sm);transition:transform var(--t-base),color var(--t-base),border-color var(--t-base),background var(--t-base);background:#ffffff05;border:1px solid #ffffff0d;padding:14px 14px 24px}.blog-listing-grid .blog-card:hover{background:#ffffff07;border-color:#8b5cf626}.blog-listing-grid .blog-cover{border-radius:var(--r-sm);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}.article-back{color:var(--text2);font-size:.85rem;font-family:var(--font-jetbrains-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:var(--r-sm);margin-bottom:48px;position:relative;overflow:hidden}.article-hero img{object-fit:cover;width:100%;height:100%}.article-hero--live{border:1px solid var(--border);background:#09090b}.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-jetbrains-mono);letter-spacing:.04em;color:#ffffff73;-webkit-backdrop-filter:blur(8px);border-radius:var(--r-xs);white-space:nowrap;background:#09090b8c;border:1px solid #ffffff0f;padding:3px 9px;font-size:.58rem;transition:color .2s,border-color .2s}.hero-badge:hover{color:#ffffffb3;border-color:#8b5cf640}.article-meta-bar{flex-wrap:wrap;align-items:center;gap:16px;margin-bottom:24px;display:flex}.article-meta-bar .blog-tag{color:var(--accent);border-radius:var(--r-xs);font-size:.7rem;font-family:var(--font-jetbrains-mono);text-transform:uppercase;letter-spacing:.06em;background:#8b5cf626;padding:4px 12px;font-weight:600}.article-meta-bar time,.article-meta-bar .read-time{color:var(--text3);font-size:.8rem;font-family:var(--font-jetbrains-mono)}.article-title{font-family:var(--font-syne);color:var(--white);margin-bottom:16px;font-size:clamp(1.8rem,4vw,3rem);font-weight:700;line-height:1.15}.article-subtitle{color:var(--text2);max-width:720px;margin-bottom:48px;font-size:clamp(1rem,1.5vw,1.15rem);line-height:1.6}.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-syne);color:var(--white);margin:56px 0 20px;font-size:clamp(1.4rem,2.5vw,1.9rem);font-weight:700;line-height:1.2}.article-body h3{font-family:var(--font-syne);color:var(--white);margin:40px 0 16px;font-size:clamp(1.1rem,1.8vw,1.35rem);font-weight:600;line-height:1.3}.article-body p{color:var(--text);margin-bottom:20px;font-size:clamp(.95rem,1.2vw,1.05rem);line-height:1.75}.article-body strong{color:var(--white);font-weight:600}.article-body em{color:var(--text);font-style:italic}.article-body a{color:var(--accent);padding-bottom:2px;text-decoration:none;transition:color .15s;position:relative}.article-body a:after{content:"";pointer-events:none;border-bottom:1px solid #8b5cf673;border-left:1px solid #8b5cf673;border-radius:0 0 0 2px;height:5px;transition:border-color .15s,height .15s;position:absolute;bottom:0;left:0;right:0}.article-body a:hover{color:var(--white)}.article-body a:hover:after{border-color:var(--white);height:6px}.article-body ul,.article-body ol{margin-bottom:20px;padding-left:24px}.article-body li{color:var(--text);margin-bottom:8px;font-size:clamp(.95rem,1.2vw,1.05rem);line-height:1.75}.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-jetbrains-mono);color:var(--text3);border-radius:var(--r-xs);cursor:pointer;text-transform:uppercase;letter-spacing:.06em;background:#ffffff14;border:1px solid #ffffff1a;padding:5px 12px;font-size:.6rem;line-height:1;transition:all .15s;position:absolute;top:9px;right:9px}.code-copy:hover{color:var(--white);background:#8b5cf62e;border-color:#8b5cf666}.code-copy--done{color:#4ade80;background:#4ade800f;border-color:#4ade8040}.article-body .shiki-block pre{border:1px solid var(--border);border-radius:var(--r-sm);font-family:var(--font-jetbrains-mono);-webkit-overflow-scrolling:touch;tab-size:2;padding:20px 24px;font-size:.82rem;line-height:1.7;overflow-x:auto;background:#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:#c4b5fd;border-radius:var(--r-xs);font-family:var(--font-jetbrains-mono);background:#8b5cf61f;border:1px solid #8b5cf614;padding:2px 7px;font-size:.84em}.article-body pre:not(.shiki-block pre){border:1px solid var(--border);border-radius:var(--r-sm);font-family:var(--font-jetbrains-mono);color:#e4e4e7;-webkit-overflow-scrolling:touch;background:#1a1b26;margin:24px 0 28px;padding:20px 24px;font-size:.82rem;line-height:1.65;overflow-x:auto}.article-section-img{border-radius:var(--r-sm);border:1px solid var(--border);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);border-radius:0 var(--r-sm)var(--r-sm)0;font-family:var(--font-serif);background:#8b5cf60d;margin:24px 0;padding:16px 24px;font-size:clamp(1.05rem,1.4vw,1.15rem);font-style:italic}.article-body blockquote p{color:var(--text2);font-family:inherit;font-style:italic;font-size:inherit;margin-bottom:0}.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-radius:var(--r-sm);border:1px solid var(--border);background:#0a0a0c;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-jetbrains-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}.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:#09090b;width:100%;height:100%;position:relative;overflow:hidden}.css-trig-center{border-radius:var(--r-full);background:#8b5cf6;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);border-radius:var(--r-sm);background:#ffffff04;transition:border-color .3s;overflow:hidden}.tip-card:hover{border-color:#8b5cf633}.tip-canvas-area{aspect-ratio:1;background:#09090b;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-jetbrains-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-syne);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-jetbrains-mono);color:var(--text3);border-radius:var(--r-xs);cursor:pointer;text-transform:uppercase;letter-spacing:.05em;background:#ffffff08;border:1px solid #ffffff0f;padding:4px 10px;font-size:.58rem;transition:all .15s}.tip-copy:hover{color:var(--accent);background:#8b5cf60f;border-color:#8b5cf640}.tip-copy--done{color:#4ade80;border-color:#4ade8033}.download-checklist{border-radius:var(--r-pill);color:var(--accent,#8b5cf6);font-family:var(--font-mono,"JetBrains Mono",monospace);letter-spacing:.04em;cursor:pointer;background:#8b5cf614;border:1px solid #8b5cf633;align-items:center;gap:10px;margin:24px 0 8px;padding:12px 24px;font-size:.78rem;transition:all .3s cubic-bezier(.16,1,.3,1);display:inline-flex}.download-checklist:hover{background:#8b5cf624;border-color:#8b5cf659;transform:translateY(-1px)}.download-checklist svg{opacity:.7;transition:opacity .2s}.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(80px,12vh,120px);left:clamp(12px,1.5vw,24px);transform:rotate(-90deg)translate(-100%)}.reading-progress-section{font-family:var(--font-jetbrains-mono);color:var(--text2);letter-spacing:.06em;text-transform:uppercase;opacity:.6;font-size:.6rem}.reading-progress-counter{font-family:var(--font-jetbrains-mono);color:var(--accent);letter-spacing:.04em;opacity:.7;font-size:.5rem}.reading-progress{z-index:100;opacity:0;align-items:flex-end;gap:10px;animation:.4s forwards rp-fade-in;display:flex;position:fixed;bottom:clamp(24px,3vh,48px);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);border-radius:1px;width:100%;transition:height .15s}.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{font-family:var(--font-jetbrains-mono);color:var(--text3);letter-spacing:.04em;white-space:nowrap;font-size:.55rem}.article-layout{grid-template-columns:1fr;gap:0;min-width:0;display:grid}@media (min-width:1100px){.article-layout{grid-template-columns:1fr 280px;gap:56px}}.article-sidebar{display:none}@media (min-width:1100px){.article-sidebar{flex-direction:column;align-self:start;max-height:560px;display:flex;position:sticky;top:calc(100vh - 580px)}}.aside-header{border-bottom:1px solid #ffffff0f;margin-bottom:14px;padding-bottom:12px}.aside-header-label{font-family:var(--font-jetbrains-mono);text-transform:uppercase;letter-spacing:.14em;color:var(--text2);margin-bottom:6px;font-size:.6rem;display:block}.aside-header-meta{font-family:var(--font-jetbrains-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-jetbrains-mono);text-transform:uppercase;letter-spacing:.14em;color:var(--accent);opacity:.75;margin:14px 0 6px;padding-left:2px;font-size:.56rem;display:block}.aside-toc>div:first-child .aside-chapter{margin-top:0}.aside-link{color:var(--text2);opacity:.8;border-left:1.5px solid #ffffff0f;padding:3px 0 3px 12px;font-size:.78rem;line-height:1.45;text-decoration:none;transition:color .2s,border-color .2s,opacity .2s;display:block}.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,.aside-useful{font-family:var(--font-jetbrains-mono);color:var(--text3);border-radius:var(--r-pill);cursor:pointer;letter-spacing:.02em;background:#ffffff05;border:1px solid #ffffff0f;flex:1;justify-content:center;align-items:center;gap:6px;padding:7px 10px;font-size:.6rem;transition:all .2s;display:flex}.aside-share:hover,.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:.6;margin-left:auto}.aside-useful-icon{font-size:.7rem;line-height:1}.article-body hr{background:linear-gradient(90deg,#0000,#8b5cf626 20%,#8b5cf640 50%,#8b5cf626 80%,#0000);border:none;height:1px;margin:56px 0;position:relative}.article-body hr:before{content:"◆";color:#8b5cf666;background:var(--black);padding:0 12px;font-size:.5rem;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}@media (max-width:768px){.reading-progress{display:none}.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:var(--r-sm);padding:14px 16px;font-size:.75rem}.article-body h2{margin-top:40px}.article-body h3{margin-top:32px}.demo-container{border-radius:var(--r-sm)}.demo-canvas-wrap{aspect-ratio:4/3}.tip-grid{grid-template-columns:1fr;gap:16px}.tip-canvas-area{aspect-ratio:16/10}.article-meta-bar{flex-wrap:wrap;gap:8px 16px}.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:20px 0;padding:12px 16px}.download-checklist{justify-content:center;width:100%}.hero-badges{gap:4px;padding:8px}.hero-badge{padding:2px 6px;font-size:.48rem}}@media (max-width:480px){.article-hero img{object-position:left center}}