:root{--paper: #f3f4f3;--card: #fbfbfa;--ink: #15191c;--ink-mute: #79838a;--accent: #15627e;--accent-deep: #0b3b4d;--accent-soft: rgba(21, 98, 126, .08);--border: rgba(21, 25, 28, .18);--hairline: rgba(21, 25, 28, .08);--header-bg: rgba(243, 244, 243, .86);--max: 1080px;--radius-sm: 4px;--radius: 8px;--radius-lg: 12px;--radius-pill: 999px;--mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace}[data-theme=dark]{--paper: #12161a;--card: #1a2025;--ink: #e6e9ea;--ink-mute: #939ba1;--accent: #6fb3cd;--accent-deep: #a9d9eb;--accent-soft: rgba(111, 179, 205, .1);--border: rgba(230, 233, 234, .18);--hairline: rgba(230, 233, 234, .08);--header-bg: rgba(18, 22, 26, .86)}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,PingFang SC,Microsoft YaHei,sans-serif;color:var(--ink);background:var(--paper);line-height:1.65;-webkit-font-smoothing:antialiased;transition:background-color .3s ease,color .3s ease}body:before,body:after{content:"";position:fixed;z-index:-1;width:520px;height:520px;border-radius:50%;pointer-events:none;filter:blur(140px)}body:before{top:-180px;right:-120px;background:radial-gradient(circle,rgba(63,161,201,.2),transparent 70%)}body:after{bottom:-200px;left:-140px;background:radial-gradient(circle,rgba(35,132,173,.16),transparent 70%)}[data-theme=dark] body:before{opacity:.5}[data-theme=dark] body:after{opacity:.5}::selection{background:#15627e38}[data-theme=dark] ::selection{background:#6fb3cd47}[id]{scroll-margin-top:76px}::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--border);border-radius:5px}::-webkit-scrollbar-thumb:hover{background:var(--accent)}a{color:var(--accent);text-decoration:none}a:hover{text-decoration:underline;text-underline-offset:3px}:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.container{max-width:var(--max);margin:0 auto;padding:0 20px}.container-wide{max-width:1280px}.mono,.tag,.tech-badge,.chip,.cloud-chip,.status,.kicker{font-family:var(--mono)}.site-header{border-bottom:1px solid var(--hairline);position:sticky;top:0;background:var(--header-bg);backdrop-filter:blur(12px);z-index:10;transition:background-color .3s ease,border-color .3s ease}.nav{display:flex;align-items:center;justify-content:space-between;height:60px}.brand{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-weight:600;font-size:.85rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink)}.brand svg{color:var(--accent);flex:none}.brand:hover{text-decoration:none}.nav-links{list-style:none;display:flex;gap:26px;margin:0;padding:0;align-items:center;flex-wrap:wrap}.nav-links a{position:relative;font-family:var(--mono);font-size:.72rem;letter-spacing:.15em;text-transform:uppercase;font-weight:500;color:var(--ink-mute);transition:color .2s}.nav-links a:hover{color:var(--ink);text-decoration:none}.nav-links a:after{content:"";position:absolute;left:0;bottom:-5px;width:100%;height:1px;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform .25s}.nav-links a:hover:after,.nav-links a.active:after{transform:scaleX(1)}.nav-links a.active{color:var(--ink)}.nav-icon{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;padding:0;background:transparent;border:none;border-radius:var(--radius);color:var(--ink-mute);cursor:pointer;line-height:0;transition:color .2s,background .2s,transform .15s}.nav-icon:hover{color:var(--ink);background:var(--accent-soft);text-decoration:none}.nav-icon svg{width:17px;height:17px}.lang-switch{display:inline-flex;align-items:center;justify-content:center;min-height:34px;padding:0 12px;border:1px solid var(--border);border-radius:var(--radius-pill);font-family:var(--mono);font-size:.7rem;font-weight:500;letter-spacing:.08em;color:var(--ink-mute);transition:color .2s,border-color .2s,background .2s,transform .15s}.lang-switch:hover{color:var(--accent);border-color:var(--accent);background:var(--accent-soft);text-decoration:none}.theme-toggle .icon-sun{display:none}[data-theme=dark] .theme-toggle .icon-sun{display:block}[data-theme=dark] .theme-toggle .icon-moon{display:none}.hero{padding:96px 0 48px;text-align:center}.hero h1{font-size:clamp(2.8rem,7vw,4.6rem);letter-spacing:-.03em;line-height:1.05;font-weight:800;margin:0 0 14px}.hero h1:after{content:".";color:var(--accent)}.tagline{font-size:.78rem;letter-spacing:.22em;text-transform:uppercase;color:var(--accent);margin:0 0 20px;font-weight:500}.lead{max-width:640px;margin:0 auto 28px;color:var(--ink-mute);font-size:1.02rem}.btn{display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:0 26px;border:1px solid var(--ink);background:var(--ink);color:var(--paper);border-radius:var(--radius);font-family:var(--mono);font-size:.75rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;transition:background .2s,color .2s,transform .15s}.btn:hover{background:transparent;color:var(--ink);text-decoration:none}.btn{gap:10px}.btn-arrow{transition:transform .2s}.btn:hover .btn-arrow{transform:translateY(3px)}.btn-outline{display:inline-flex;align-items:center;min-height:34px;padding:0 16px;border:1px solid var(--border);color:var(--ink);background:transparent;border-radius:var(--radius);font-family:var(--mono);font-size:.72rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;transition:border-color .2s,color .2s,background .2s,transform .15s}.btn-outline:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-soft);text-decoration:none}.btn-sm{min-height:34px;padding:0 18px;font-size:.72rem}.section{padding:48px 0}.section.container{padding:48px 20px}.section h2{font-size:1.35rem;letter-spacing:-.01em;margin:0 0 22px;padding-bottom:12px;border-bottom:1px solid var(--hairline)}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:18px}.card{position:relative;border:1px solid var(--border);border-radius:var(--radius-lg);padding:24px;background:var(--card);transition:border-color .2s,transform .2s,box-shadow .2s,background-color .3s}.card:hover{border-color:var(--ink);transform:translateY(-2px);box-shadow:0 12px 28px -18px #15191c4d}.card-icon{font-size:1.7rem;margin-bottom:10px}.card h3{margin:0 0 6px;font-size:1.15rem;letter-spacing:-.01em}.card h3 a{color:var(--ink)}.card h3 a:hover{color:var(--accent);text-decoration:none}.card-tagline{color:var(--accent);font-weight:600;font-size:.88rem;margin:0 0 8px}.card-desc{color:var(--ink-mute);font-size:.92rem;margin:0 0 14px}.tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}.tag{font-size:.68rem;letter-spacing:.06em;background:var(--accent-soft);color:var(--accent);padding:3px 9px;border-radius:var(--radius-pill)}.card-meta{display:flex;align-items:center;gap:14px;font-size:.85rem}.card-meta a{position:relative;z-index:2;font-family:var(--mono);font-size:.72rem;letter-spacing:.08em}.card-stretch{position:absolute;inset:0;z-index:1;border-radius:inherit}.card-stretch:hover{text-decoration:none}.featured-mark{position:absolute;top:12px;right:14px;font-size:.9rem;line-height:1}.status{display:inline-flex;align-items:center;gap:7px;font-size:.68rem;letter-spacing:.1em;padding:4px 12px;border:1px solid var(--hairline);border-radius:var(--radius-pill);font-weight:500;color:var(--ink-mute);background:transparent}.status:before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ink-mute)}.status-活跃:before{background:#2e9e5b}.status-开发中:before{background:#d9a514}.status-实验中:before{background:#6a7ee0}.project-hero{padding-top:34px}.kicker{font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;color:var(--accent);margin:0 0 20px;font-weight:500}.project-head{display:flex;align-items:center;gap:18px;margin-bottom:16px}.project-icon{font-size:2.8rem}.project-logo{height:72px;width:auto;max-width:200px;object-fit:contain;flex:none}.project-detail h1{margin:0;letter-spacing:-.02em;font-size:clamp(2rem,5vw,2.9rem);line-height:1.1}.tutorial-detail h1{font-size:clamp(1.55rem,4vw,2.15rem)}.tutorial-layout{display:grid;grid-template-columns:250px minmax(0,1fr);gap:44px;align-items:start}.tutorial-sidebar{position:sticky;top:84px;max-height:calc(100vh - 108px);overflow-y:auto}.toc-title{font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-mute);margin:0 0 12px;padding-bottom:10px;border-bottom:1px solid var(--hairline)}.toc-title span{color:var(--accent)}.toc{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}.toc a{display:flex;gap:9px;align-items:baseline;padding:7px 12px;border-left:2px solid transparent;font-size:.88rem;line-height:1.45;color:var(--ink-mute);transition:color .2s,border-color .2s,background .2s}.toc a:hover{color:var(--ink);background:var(--accent-soft);text-decoration:none}.toc a.active{border-left-color:var(--accent);color:var(--accent);background:var(--accent-soft);font-weight:600}.toc-num{font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;flex:none}.toc-back{display:block;margin-top:14px;padding:10px 12px 0;border-top:1px solid var(--hairline);font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;color:var(--ink-mute)}.toc-back:hover{color:var(--accent);text-decoration:none}.project-detail .card-tagline{font-size:1rem;margin:4px 0 0}.project-meta{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:0 0 30px}.content{max-width:760px}.back{margin-top:36px;font-family:var(--mono);font-size:.78rem;letter-spacing:.08em}.feature-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px;max-width:900px}.feature-item{display:flex;gap:12px;align-items:flex-start;border:1px solid var(--hairline);border-radius:var(--radius);background:var(--card);padding:18px;font-size:.94rem;line-height:1.5;transition:border-color .2s}.feature-item:hover{border-color:var(--ink)}.feature-num{font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;color:var(--accent);padding-top:3px;flex:none}.cta-band{margin-top:48px;border:1px solid var(--border);border-left:2px solid var(--accent);border-radius:var(--radius-lg);background:var(--card);padding:26px 28px;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;max-width:900px}.cta-title{font-family:var(--mono);font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);margin:0}.cta-actions{display:flex;gap:12px;flex-wrap:wrap}.content p{margin:0 0 14px}.content ul,.content ol{padding-left:24px;margin:0 0 14px}.content h2{margin:34px 0 14px;padding-bottom:10px;font-size:1.3rem;border-bottom:1px solid var(--hairline)}.content h3{margin:26px 0 10px;font-size:1.08rem}.anchor-link{margin-left:10px;color:var(--accent);font-weight:500;opacity:0;transition:opacity .2s}.content h2:hover .anchor-link,.content h3:hover .anchor-link,.anchor-link:focus-visible{opacity:1}.anchor-link:hover{text-decoration:none}@media(hover:none){.anchor-link{opacity:.4}}@keyframes target-flash{0%{background-color:var(--accent-soft)}}@media(prefers-reduced-motion:no-preference){.content :target{animation:target-flash 1.8s ease-out}}.content code{font-family:var(--mono);font-size:.85em;background:var(--accent-soft);color:var(--accent);padding:2px 6px;border-radius:var(--radius-sm)}.content pre{background:var(--card);border:1px solid var(--hairline);border-radius:var(--radius);padding:16px 18px;overflow-x:auto;line-height:1.55}.content pre code{background:none;color:inherit;padding:0;font-size:.85rem}.content img{max-width:100%;border:1px solid var(--hairline);border-radius:var(--radius)}.content blockquote{margin:0 0 14px;padding:4px 16px;border-left:2px solid var(--accent);color:var(--ink-mute);background:var(--accent-soft)}.content table{border-collapse:collapse;width:100%;font-size:.92rem}.content th,.content td{border:1px solid var(--hairline);padding:8px 12px;text-align:left}.content th{font-family:var(--mono);font-size:.78rem;letter-spacing:.05em;background:var(--accent-soft)}.filters{margin-bottom:24px}.search{width:100%;max-width:420px;padding:11px 14px;border:1px solid var(--border);border-radius:var(--radius);background:var(--card);color:var(--ink);font-size:.95rem;font-family:var(--mono);margin-bottom:14px;transition:border-color .2s,box-shadow .2s}.search:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}.search::placeholder{color:var(--ink-mute)}.tag-filters{display:flex;flex-wrap:wrap;gap:8px}.chip{border:1px solid var(--border);background:transparent;color:var(--ink-mute);padding:6px 14px;border-radius:var(--radius-pill);cursor:pointer;font-size:.72rem;letter-spacing:.08em;transition:color .2s,border-color .2s,background .2s,transform .15s}.chip:hover{color:var(--accent);border-color:var(--accent);background:var(--accent-soft)}.chip-active{background:var(--ink);color:var(--paper);border-color:var(--ink)}.empty{color:var(--ink-mute)}.empty[data-filter-empty]{border:1px dashed var(--border);border-radius:var(--radius);padding:26px 20px;text-align:center}.site-footer{border-top:1px solid var(--hairline);margin-top:60px;padding:26px 0;color:var(--ink-mute);font-family:var(--mono);font-size:.74rem;letter-spacing:.05em}.footer-inner{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}.site-footer a{color:var(--ink-mute)}.site-footer a:hover{color:var(--ink)}.stats{display:flex;justify-content:center;gap:56px;flex-wrap:wrap;padding:8px 20px 0;text-align:center}.stat{display:flex;flex-direction:column}.stat-num{font-family:var(--mono);font-size:2.3rem;font-weight:600;color:var(--accent-deep);line-height:1.15}.stat-label{font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-mute)}.tag-cloud{display:flex;flex-wrap:wrap;gap:10px}.cloud-chip{font-size:.8rem;border:1px solid var(--border);color:var(--ink);padding:6px 14px;border-radius:var(--radius-pill);font-weight:500;background:transparent}.cloud-chip sup{font-size:.62rem;margin-left:4px;color:var(--accent)}.block{margin-top:34px}.block h2{font-size:1.3rem;margin:0 0 14px;padding-bottom:10px;border-bottom:1px solid var(--hairline)}.project-desc{max-width:760px;color:var(--ink-mute);font-size:1.02rem;margin:0 0 8px}.highlight-list{max-width:760px;padding-left:0;list-style:none;margin:0}.highlight-list li{position:relative;padding-left:26px;margin-bottom:8px;color:var(--ink)}.highlight-list li:before{content:"✓";position:absolute;left:0;top:0;color:var(--accent);font-weight:700}.tech-badges{display:flex;flex-wrap:wrap;gap:8px}.tech-badge{font-size:.72rem;letter-spacing:.05em;border:1px solid var(--border);color:var(--ink);padding:5px 12px;border-radius:var(--radius-pill);background:transparent}.proj-nav{display:flex;justify-content:space-between;gap:16px;margin:44px 0 8px}.proj-nav>span{flex:1}.proj-nav-item{display:flex;flex-direction:column;gap:3px;padding:15px 18px;border:1px solid var(--border);border-radius:var(--radius);min-width:0;flex:1;background:var(--card);transition:border-color .2s,background .2s}.proj-nav-item:hover{border-color:var(--accent);background:var(--accent-soft);text-decoration:none}.proj-nav-item:hover .proj-nav-label{color:var(--accent)}.proj-nav-item.next{text-align:right;align-items:flex-end}.proj-nav-item.prev{align-items:flex-start;text-align:left}.proj-nav-label{font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-mute)}.proj-nav-title{font-weight:600;color:var(--ink);font-size:.95rem}.tutorial-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;max-width:760px}.tutorial-item a{display:flex;flex-direction:column;gap:6px;padding:16px 20px;border:1px solid var(--border);border-radius:var(--radius);background:var(--card);transition:border-color .2s,background .2s}.tutorial-item a:hover{text-decoration:none;border-color:var(--accent);background:var(--accent-soft)}.tutorial-row{display:flex;align-items:baseline;gap:12px}.tutorial-num{font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;color:var(--accent);flex:none}.tutorial-title{font-weight:600;color:var(--ink);font-size:1rem;flex:1;transition:color .2s}.tutorial-arrow{font-family:var(--mono);color:var(--ink-mute);transition:color .2s,transform .2s}.tutorial-item a:hover .tutorial-title{color:var(--accent)}.tutorial-item a:hover .tutorial-arrow{color:var(--accent);transform:translate(3px)}.tutorial-desc{color:var(--ink-mute);font-size:.88rem;padding-left:26px}.tutorial-empty{max-width:760px;padding:34px 24px;border:1px dashed var(--border);border-radius:var(--radius);text-align:center;color:var(--ink-mute)}.notfound{text-align:center;padding:72px 20px}.notfound-code{font-family:var(--mono);font-size:5rem;font-weight:600;color:var(--accent);line-height:1;margin-bottom:8px}.notfound-actions{display:flex;gap:12px;justify-content:center;margin-top:24px}@media(max-width:880px){.tutorial-layout{grid-template-columns:1fr;gap:24px}.tutorial-sidebar{position:static;max-height:none;overflow:visible}.toc{flex-direction:row;overflow-x:auto;gap:6px;padding-bottom:10px;border-bottom:1px solid var(--hairline)}.toc a{border-left:none;border-bottom:2px solid transparent;border-radius:var(--radius-sm);white-space:nowrap;padding:6px 10px}.toc a.active{border-bottom-color:var(--accent)}.toc-back{margin-top:10px;padding-top:8px}}@media(max-width:640px){.nav{gap:12px}.nav-links{gap:16px}.hero{padding:64px 0 40px}.proj-nav{flex-direction:column}.proj-nav-item.next{text-align:left;align-items:flex-start}.project-head{gap:14px}.project-logo{height:52px;max-width:150px}.cta-band{padding:20px}.tutorial-desc{padding-left:0}}.read-progress{position:fixed;top:0;left:0;width:100%;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:0 50%;z-index:20;pointer-events:none}@keyframes rise-in{0%{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}@media(prefers-reduced-motion:no-preference){.hero>*,.project-hero>*{animation:rise-in .5s cubic-bezier(.22,1,.36,1) both}.hero>:nth-child(2){animation-delay:.07s}.hero>:nth-child(3){animation-delay:.14s}.hero>:nth-child(4){animation-delay:.21s}.project-hero>:nth-child(2){animation-delay:.06s}.project-hero>:nth-child(3){animation-delay:.12s}.project-hero>:nth-child(4){animation-delay:.18s}.project-hero>:nth-child(5){animation-delay:.24s}}html.reveal-armed [data-reveal]{opacity:0;transform:translateY(16px);transition:opacity .55s cubic-bezier(.22,1,.36,1),transform .55s cubic-bezier(.22,1,.36,1)}html.reveal-armed [data-reveal].revealed{opacity:1;transform:none}.btn:active,.chip:active,.lang-switch:active,.nav-icon:active{transform:translateY(1px)}@media(prefers-reduced-motion:reduce){::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}html.reveal-armed [data-reveal]{opacity:1;transform:none;transition:none}}.astro-route-announcer{position:absolute;left:0;top:0;clip:rect(0 0 0 0);clip-path:inset(50%);overflow:hidden;white-space:nowrap;width:1px;height:1px}