:root{--bg:oklch(0.99 0 0);--text:oklch(0.15 0 0);--text-muted:oklch(0.5 0 0);--border:oklch(0.9 0 0);--accent:oklch(0.5 0.14 260);--accent-hover:oklch(0.42 0.16 260);--code-bg:oklch(0.96 0.004 260);--tag-bg:oklch(0.94 0.004 260);--tag-active-bg:oklch(0.2 0 0);--tag-active-text:oklch(1 0 0);--space-xs:4px;--space-sm:8px;--space-md:16px;--space-lg:24px;--space-xl:32px;--space-2xl:48px;--space-3xl:64px;--ease-out:cubic-bezier(0.16,1,0.3,1);--ease-spring:cubic-bezier(0.34,1.56,0.64,1);--ease-in-out:cubic-bezier(0.76,0,0.24,1)}html.dark{--bg:oklch(0.13 0.01 260);--text:oklch(0.92 0 0);--text-muted:oklch(0.55 0 0);--border:oklch(0.25 0 0);--accent:oklch(0.72 0.12 260);--accent-hover:oklch(0.8 0.1 260);--code-bg:oklch(0.2 0.01 260);--tag-bg:oklch(0.22 0.01 260);--tag-active-bg:oklch(0.92 0 0);--tag-active-text:oklch(0.1 0 0)}body{margin:0;background:var(--bg);color:var(--text);font-family:"Noto Serif SC","Source Han Serif SC",思源宋体,serif;-webkit-font-smoothing:antialiased;transition:background .5s var(--ease-out),color .5s var(--ease-out)}h1,h2,h3{font-weight:900;letter-spacing:-.02em;line-height:1.2}h1{font-size:2.2rem;margin:0 0 var(--space-lg)}h2{font-size:1.5rem;margin:var(--space-xl) 0 var(--space-sm)}h3{font-size:1.2rem;margin:var(--space-lg) 0 var(--space-xs)}p{line-height:1.8;margin:0 0 var(--space-md);color:var(--text-muted)}a{color:var(--accent);text-decoration:none;transition:color .2s var(--ease-out)}a:hover{color:var(--accent-hover)}time{font-size:.85em;color:var(--text-muted);font-family:system-ui,-apple-system,sans-serif}.container{max-width:680px;margin:0 auto;padding:var(--space-xl) var(--space-md)}.navbar{position:-webkit-sticky;position:sticky;top:0;z-index:10;background:oklch(from var(--bg) l c h/.85);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--border);transition:background .5s var(--ease-out),border-color .5s var(--ease-out)}.navbar-inner{max-width:680px;margin:0 auto;padding:var(--space-md);display:flex;justify-content:space-between;align-items:center}.navbar-brand{font-weight:900;font-size:1.1rem;color:var(--text)!important;letter-spacing:-.02em}.navbar-links{display:flex;align-items:center;gap:var(--space-lg);font-size:.9rem;font-family:system-ui,-apple-system,sans-serif}.navbar-links a{color:var(--text-muted);transition:color .2s var(--ease-out)}.navbar-links a:hover{color:var(--text)}.tag-bar{display:flex;gap:var(--space-sm);flex-wrap:wrap;margin-bottom:var(--space-2xl);padding-bottom:var(--space-lg);border-bottom:1px solid var(--border);transition:border-color .5s var(--ease-out)}.tag-btn{font-size:.8rem;font-family:system-ui,-apple-system,sans-serif;padding:4px 14px;border:1px solid var(--border);border-radius:20px;background:var(--tag-bg);color:var(--text-muted);cursor:pointer;transition:all .25s var(--ease-out)}.tag-btn:hover{border-color:oklch(from var(--text) l c h/.3);color:var(--text);transform:translateY(-1px)}.tag-btn.active{background:var(--tag-active-bg);color:var(--tag-active-text);border-color:var(--tag-active-bg)}.tag-btn-sm{font-size:.72rem;padding:2px 10px;border-radius:14px;opacity:.75}.tag-btn-sm:hover{opacity:1}.article-card{margin-bottom:var(--space-2xl);padding-bottom:var(--space-2xl);border-bottom:1px solid var(--border);will-change:transform,opacity;transition:border-color .5s var(--ease-out)}.article-card:last-child{border-bottom:none}.article-card h2{margin:var(--space-xs) 0;line-height:1.25}.article-card h2 a{color:var(--text)}.article-card h2 a:hover{color:var(--accent)}.article-card .excerpt{color:var(--text-muted);margin:var(--space-sm) 0;font-size:.95rem}.article-card .tags{display:flex;gap:var(--space-sm);flex-wrap:wrap;margin-top:var(--space-sm)}.article-card .tag{font-size:.78rem;font-family:system-ui,-apple-system,sans-serif;color:var(--text-muted);cursor:pointer;transition:color .2s var(--ease-out);-webkit-user-select:none;-moz-user-select:none;user-select:none}.article-card .tag:hover{color:var(--accent)}.article-meta{display:flex;align-items:center;gap:var(--space-sm);font-size:.85rem;color:var(--text-muted)}.article-category,.article-meta{font-family:system-ui,-apple-system,sans-serif}.article-category{font-size:.75rem;font-weight:600;letter-spacing:.05em;color:var(--accent);text-transform:uppercase}.post-header{margin:var(--space-xl) 0 var(--space-2xl)}.post-header h1{font-size:2.4rem;line-height:1.15}.post-header .meta{display:flex;gap:var(--space-md);align-items:center;margin-top:var(--space-md)}.post-header .meta time{font-family:system-ui,-apple-system,sans-serif}.post-body{line-height:1.9;font-size:1.05rem}.post-body pre{padding:var(--space-lg);overflow-x:auto;border-radius:6px;line-height:1.6}.post-body code,.post-body pre{background:var(--code-bg);font-size:.9em;transition:background .5s var(--ease-out)}.post-body code{padding:.15em .4em;border-radius:3px;font-family:JetBrains Mono,Fira Code,monospace}.post-body pre code{background:none;padding:0}.post-body table{border-collapse:collapse;width:100%;margin:var(--space-lg) 0}.post-body td,.post-body th{border:1px solid var(--border);padding:var(--space-sm) var(--space-md);text-align:left;transition:border-color .5s var(--ease-out)}.post-body th{background:var(--code-bg);font-weight:700}.post-body blockquote{border-left:3px solid var(--accent);margin-left:0;padding-left:var(--space-lg);color:var(--text-muted);font-style:italic}.post-body img{max-width:100%;border-radius:6px}.post-footer{margin-top:var(--space-3xl);padding-top:var(--space-xl);border-top:1px solid var(--border);transition:border-color .5s var(--ease-out)}.hero{padding:var(--space-3xl) var(--space-md) var(--space-lg);max-width:680px;margin:0 auto;text-align:center}.hero-title{font-size:clamp(2.4rem,5vw,3.4rem);font-weight:900;letter-spacing:-.03em;margin:0;color:var(--text);animation:heroFadeIn .8s var(--ease-out) both}.hero-subtitle{margin:var(--space-sm) 0 0;font-size:1.1rem;font-weight:400;color:var(--text-muted);letter-spacing:.1em;animation:heroFadeIn .8s .1s var(--ease-out) both}.hero-desc{margin:var(--space-lg) 0 0;font-size:1rem;line-height:1.8;color:var(--text-muted);font-family:system-ui,-apple-system,sans-serif;animation:heroFadeIn .8s .2s var(--ease-out) both}.hero-line{width:40px;height:1px;background:var(--border);margin:var(--space-xl) auto 0;animation:heroFadeIn .8s .3s var(--ease-out) both}@keyframes heroFadeIn{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}.intro{max-width:680px;margin:0 auto;padding:0 var(--space-md) var(--space-3xl);text-align:center}.intro p{font-family:system-ui,-apple-system,sans-serif;font-size:.95rem;line-height:1.9;color:var(--text-muted);max-width:480px;margin:0 auto var(--space-lg)}.intro-line{width:40px;height:1px;background:var(--border);margin:var(--space-xl) auto}.intro-nav{display:flex;justify-content:center;align-items:center;font-size:.9rem;font-family:system-ui,-apple-system,sans-serif}.intro-nav a{color:var(--text-muted);transition:color .2s var(--ease-out)}.intro-nav a:hover{color:var(--text)}.signature{margin-top:var(--space-2xl);display:flex;flex-direction:column;align-items:center;gap:var(--space-xs)}.signature svg{width:120px;height:auto;opacity:.5;transition:opacity .3s var(--ease-out)}.signature svg:hover{opacity:.8}.signature-label{font-size:.78rem;letter-spacing:.1em}.back-link,.signature-label{color:var(--text-muted);font-family:system-ui,-apple-system,sans-serif}.back-link{font-size:.85rem;display:inline-flex;align-items:center;gap:var(--space-xs);transition:color .2s var(--ease-out),transform .2s var(--ease-out)}.back-link:hover{color:var(--text);transform:translateX(-3px)}.skew-btn{position:relative;overflow:hidden;border:1px solid var(--border);display:inline-block;font-size:15px;line-height:15px;padding:18px 18px 17px;text-decoration:none;cursor:pointer;background:var(--bg);-moz-user-select:none;user-select:none;-webkit-user-select:none;touch-action:manipulation}.skew-btn,.skew-btn:hover{color:var(--text)}.skew-btn span:first-child{position:relative;transition:color .6s cubic-bezier(.48,0,.12,1);z-index:10}.skew-btn span:last-child{color:var(--bg);display:block;position:absolute;bottom:0;transition:all .5s cubic-bezier(.48,0,.12,1);z-index:100;opacity:0;top:50%;left:50%;transform:translateY(225%) translateX(-50%);height:14px;line-height:13px}.skew-btn:after{content:"";position:absolute;bottom:-50%;left:0;width:100%;height:100%;background-color:var(--text);transform-origin:bottom center;transition:transform .6s cubic-bezier(.48,0,.12,1);transform:skewY(9.3deg) scaleY(0);z-index:50}.skew-btn:hover:after{transform-origin:bottom center;transform:skewY(9.3deg) scaleY(2)}.skew-btn:hover span:last-child{transform:translateX(-50%) translateY(-50%);opacity:1;transition:all .9s cubic-bezier(.48,0,.12,1)}.search-input{width:100%;box-sizing:border-box;padding:10px 16px;border:1px solid var(--border);border-radius:8px;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,sans-serif;font-size:.95rem;outline:none;transition:border-color .2s var(--ease-out),box-shadow .2s var(--ease-out)}.search-input::placeholder{color:var(--text-muted)}.search-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px oklch(from var(--accent) l c h/.15)}.theme-toggle{background:none;border:none;cursor:pointer;padding:4px;color:var(--text-muted);border-radius:6px;transition:color .2s var(--ease-out),background .2s var(--ease-out);display:flex;align-items:center}.theme-toggle:hover{color:var(--text);background:var(--tag-bg)}.theme-toggle svg{width:18px;height:18px;transition:transform .4s var(--ease-spring)}.theme-toggle:active svg{transform:rotate(30deg)}.speed-bar{display:flex;align-items:center;gap:4px;margin-top:var(--space-sm);font-size:.82rem;font-family:system-ui,-apple-system,sans-serif}.speed-label{color:var(--text-muted);margin-right:2px;-webkit-user-select:none;-moz-user-select:none;user-select:none}.speed-btn{background:var(--tag-bg);border:1px solid var(--border);color:var(--text-muted);padding:3px 10px;border-radius:14px;cursor:pointer;font-size:.78rem;font-family:JetBrains Mono,Fira Code,monospace;transition:all .2s var(--ease-out)}.speed-btn:hover{border-color:var(--accent);color:var(--text)}.speed-btn.active{background:var(--accent);color:#fff;border-color:var(--accent)}.reveal{opacity:0;transform:translateY(24px)}.reveal.visible{opacity:1;transform:translateY(0);transition:opacity .6s var(--ease-out),transform .6s var(--ease-out)}::view-transition-new(root),::view-transition-old(root){animation-duration:.3s;animation-timing-function:var(--ease-out)}.site-footer{border-top:1px solid var(--border);padding:var(--space-2xl) var(--space-md);text-align:center;font-size:.85rem;color:var(--text-muted);font-family:system-ui,-apple-system,sans-serif;margin-top:var(--space-3xl);transition:border-color .5s var(--ease-out)}.demo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));grid-gap:var(--space-lg);gap:var(--space-lg);margin-top:var(--space-xl)}.demo-card{display:block;border:1px solid var(--border);border-radius:10px;padding:var(--space-lg);text-decoration:none;color:var(--text);transition:border-color .3s var(--ease-out),transform .3s var(--ease-out),box-shadow .3s var(--ease-out)}.demo-card:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:0 8px 30px oklch(from var(--accent) l c h/.08)}.demo-card--soon{opacity:.55;cursor:not-allowed;pointer-events:none}.demo-card--soon.reveal.visible{opacity:.55}.demo-card-header{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--space-sm)}.demo-card-title{font-size:1.1rem;font-weight:700;margin:0;letter-spacing:-.01em}.demo-badge{flex-shrink:0;font-size:.7rem;font-family:system-ui,-apple-system,sans-serif;font-weight:600;padding:2px 10px;border-radius:12px;letter-spacing:.04em}.demo-badge--live{background:oklch(from var(--accent) l c h/.12);color:var(--accent)}.demo-badge--soon{background:var(--tag-bg);color:var(--text-muted)}.demo-card-desc{font-size:.9rem;color:var(--text-muted);line-height:1.7;margin:var(--space-sm) 0 var(--space-md);font-family:system-ui,-apple-system,sans-serif}.demo-card-tech{display:flex;gap:var(--space-xs);flex-wrap:wrap}.demo-tech-tag{font-size:.72rem;font-family:JetBrains Mono,Fira Code,monospace;color:var(--text-muted);background:var(--code-bg);padding:2px 8px;border-radius:4px}.demo-video-section{margin-top:var(--space-lg)}.demo-video-wrapper{position:relative;background:oklch(.08 0 0);border-radius:10px;overflow:hidden;box-shadow:0 4px 40px oklch(0 0 0/.3)}.demo-video{width:100%;display:block;aspect-ratio:16/9;object-fit:contain;background:oklch(.1 0 0)}.contrib-bar{display:flex;flex-wrap:wrap;gap:var(--space-sm) var(--space-xl);margin-top:var(--space-lg);padding:var(--space-md) 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border);font-family:system-ui,-apple-system,sans-serif;font-size:.85rem;transition:border-color .5s var(--ease-out)}.contrib-item{display:flex;gap:var(--space-xs);align-items:baseline}.contrib-label{color:var(--text-muted);flex-shrink:0}.contrib-value{color:var(--text);font-weight:600}.video-summary{margin-bottom:0;font-size:.85rem;font-family:system-ui,-apple-system,sans-serif;color:var(--text-muted)}.chapters,.video-summary{margin-top:var(--space-sm)}.chapters{display:flex;flex-wrap:wrap;gap:6px}.chapter-btn{display:inline-flex;align-items:center;gap:5px;background:var(--tag-bg);border:1px solid transparent;color:var(--text-muted);padding:4px 12px;border-radius:14px;cursor:pointer;font-size:.78rem;font-family:system-ui,-apple-system,sans-serif;transition:all .2s var(--ease-out)}.chapter-btn:hover{border-color:var(--accent);color:var(--text)}.chapter-time{font-family:JetBrains Mono,Fira Code,monospace;font-size:.72rem;color:var(--accent);font-weight:600}.chapter-label{font-size:.78rem}.demo-info h2{font-size:1.3rem;margin-top:var(--space-2xl)}.demo-info h3{font-size:1.05rem;margin-top:var(--space-xl);color:var(--text)}.pricing-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));grid-gap:var(--space-md);gap:var(--space-md);margin-top:var(--space-md)}.pricing-card{border:1px solid var(--border);border-radius:8px;padding:var(--space-md);text-align:center;transition:border-color .3s var(--ease-out)}.pricing-card:hover{border-color:var(--accent)}.pricing-tier{font-size:.8rem;font-weight:700;color:var(--accent);letter-spacing:.05em;margin-bottom:var(--space-xs);font-family:system-ui,-apple-system,sans-serif}.pricing-price{font-size:1.3rem;font-weight:900;color:var(--text);letter-spacing:-.02em}.pricing-desc{font-size:.8rem;color:var(--text-muted);margin-top:var(--space-xs);font-family:system-ui,-apple-system,sans-serif}@media (prefers-reduced-motion:reduce){*,:after,:before{animation-duration:.01ms!important;transition-duration:.01ms!important}::view-transition-new(root),::view-transition-old(root){animation:none}}