/* General Sans */
@font-face {
  font-family: 'General Sans';
  src: url('7YY3ZAAE3TRV2LANYOLXNHTPHLXVWTKH.woff2') format('woff2'),
       url('//cdn.fontshare.com/wf/MFQT7HFGCR2L5ULQTW6YXYZXXHMPKLJ3/YWQ244D6TACUX5JBKATPOW5I5MGJ3G73/7YY3ZAAE3TRV2LANYOLXNHTPHLXVWTKH.woff') format('woff'),
       url('//cdn.fontshare.com/wf/MFQT7HFGCR2L5ULQTW6YXYZXXHMPKLJ3/YWQ244D6TACUX5JBKATPOW5I5MGJ3G73/7YY3ZAAE3TRV2LANYOLXNHTPHLXVWTKH.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'General Sans';
  src: url('SB2OEB6IKZPRR6JT4GFJ2TFT6HBB6AZN.woff2') format('woff2'),
       url('//cdn.fontshare.com/wf/3RZHWSNONLLWJK3RLPEKUZOMM56GO4LJ/BPDRY7AHVI3MCDXXVXTQQ76H3UXA63S3/SB2OEB6IKZPRR6JT4GFJ2TFT6HBB6AZN.woff') format('woff'),
       url('//cdn.fontshare.com/wf/3RZHWSNONLLWJK3RLPEKUZOMM56GO4LJ/BPDRY7AHVI3MCDXXVXTQQ76H3UXA63S3/SB2OEB6IKZPRR6JT4GFJ2TFT6HBB6AZN.ttf') format('truetype');
  font-weight: 500;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'General Sans';
  src: url('NIQ54PVBBIWVK3PFSOIOUJSXIJ5WTNDP.woff2') format('woff2'),
       url('//cdn.fontshare.com/wf/KWXO5X3YW4X7OLUMPO4X24HQJGJU7E2Q/VOWUQZS3YLP66ZHPTXAFSH6YACY4WJHT/NIQ54PVBBIWVK3PFSOIOUJSXIJ5WTNDP.woff') format('woff'),
       url('//cdn.fontshare.com/wf/KWXO5X3YW4X7OLUMPO4X24HQJGJU7E2Q/VOWUQZS3YLP66ZHPTXAFSH6YACY4WJHT/NIQ54PVBBIWVK3PFSOIOUJSXIJ5WTNDP.ttf') format('truetype');
  font-weight: 700;
  font-display: swap;
  font-style: normal;
}



/* Self hosted type. Chinese glyphs use the device's native Chinese face. */
:root{--bg:#181818;--surface:#272727;--surface2:#313131;--ink:#f2f2f2;--muted:#bcbcbc;--accent:#c2ff62;--accent-ink:#181818;--curve:cubic-bezier(.22,1,.36,1)}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:24px}body{margin:0;background:var(--bg);color:var(--ink);font-family:"General Sans","Microsoft YaHei","PingFang SC",sans-serif;font-size:16px;line-height:1.6}a{color:inherit;text-decoration:none}button,input{font:inherit}button,a,input,summary{-webkit-tap-highlight-color:transparent}a,button,summary{transition:transform .5s var(--curve),opacity .3s var(--curve),background-color .3s var(--curve)}a:hover{opacity:.85}a:active,button:active{transform:translateY(2px)}:focus-visible{outline:3px solid var(--accent);outline-offset:5px}::selection{background:var(--accent);color:var(--bg)}[hidden]{display:none!important}h1,h2,h3,p{margin:0;text-wrap:pretty}h1,h2,h3{text-wrap:balance;font-weight:700}button{cursor:pointer;border:0;border-radius:0}pre{margin:0;overflow:auto;max-width:100%;tab-size:4}code{font-family:monospace}img{max-width:100%}.skip{position:absolute;top:-80px;background:var(--accent);color:var(--bg);padding:12px;z-index:10}.skip:focus{top:0}.topbar{display:flex;align-items:center;justify-content:space-between;padding:24px 32px;gap:24px}.brand{display:flex;gap:16px;align-items:center}.brand b{font-size:36px;line-height:1;letter-spacing:-.05em}.brand b span{color:var(--accent)}.brand>span{font-size:14px}.topbar nav{display:flex;gap:32px;font-size:14px}.board{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:8px;margin:0 12px}.hero-title{grid-column:span 6;grid-row:span 2;background:var(--accent);color:var(--accent-ink);padding:48px;display:flex;flex-direction:column;align-items:flex-start}.hero-title h1{font-size:72px;line-height:1.2;letter-spacing:-.04em}.hero-title>p{font-size:18px;line-height:28px;margin-top:24px}.primary{display:inline-flex;justify-content:space-between;gap:32px;align-items:center;padding:12px 24px;min-height:48px;background:var(--accent);color:var(--bg);font-weight:700}.hero-title .primary{background:var(--bg);color:var(--ink);margin-top:32px}.primary:hover{transform:translateY(-4px);opacity:1}.hero-proof{display:flex;gap:32px;margin-top:auto;padding-top:40px;font-size:14px}.hero-proof b{font-size:24px;font-weight:500}.fragment{background:var(--surface);grid-column:span 3;min-width:0;padding:24px;display:flex;flex-direction:column;justify-content:space-between;min-height:240px;overflow:hidden}.fragment-top{display:flex;justify-content:space-between;color:var(--muted);font-size:14px}.fragment pre{font-size:14px;line-height:24px;color:var(--accent);padding:24px 0;white-space:pre-wrap;overflow-wrap:anywhere}.fragment p{font-size:18px}.fragment:hover{opacity:1;background:var(--surface2)}.fragment-2{grid-column:span 4}.fragment-3{grid-column:span 2}.fragment-3 pre{font-size:14px}.statement{grid-column:span 12;display:flex;align-items:flex-end;justify-content:space-between;padding:32px 40px;background:var(--surface);gap:24px}.statement p{font-size:36px;line-height:1.2}.statement p br{display:none}.statement a{font-size:16px}.section{margin:96px 32px}.section-head{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:40px;gap:24px}.section-head h2{font-size:48px;line-height:1.2;letter-spacing:-.03em}.section-head p{font-size:16px;color:var(--muted)}.library-tools{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:24px}.search-label{font-size:14px;display:flex;flex-direction:column;gap:8px;width:40%;color:var(--muted)}input{width:100%;background:var(--surface);color:var(--ink);border:0;padding:12px 16px;min-height:48px;border-radius:0}input::placeholder{color:var(--muted)}.filters{display:flex;gap:8px;flex-wrap:wrap}.filters button,#reset-search{background:var(--surface);color:var(--ink);padding:12px 16px;min-height:48px}.filters button[aria-pressed=true]{background:var(--accent);color:var(--bg)}.filters button:hover{transform:translateY(-3px)}.count{font-size:14px;color:var(--muted);margin:24px 0 16px}.tutorials{display:flex;flex-direction:column;gap:4px}.tutorial{display:grid;grid-template-columns:160px minmax(0,1fr) 104px;align-items:center;gap:24px;background:var(--surface);padding:24px 32px;min-height:120px}.tutorial:hover{background:var(--surface2);opacity:1;transform:translateX(4px)}.category{font-size:14px;color:var(--muted)}.tutorial h3{font-size:24px;line-height:32px;font-weight:500}.tutorial p{font-size:16px;color:var(--muted);margin-top:8px}.row-end{font-size:14px;text-align:right}.empty{background:var(--surface);padding:40px}.empty h3{font-size:24px}.empty p{margin:16px 0}.tool-section{display:grid;grid-template-columns:1fr 1fr;gap:64px}.tool-intro h2{font-size:36px;line-height:1.3}.tool-intro>p{max-width:440px;margin-top:24px}.tool-note{color:var(--muted);font-size:14px}.script-list{display:flex;flex-direction:column;gap:8px;min-width:0}.script-item{background:var(--surface);min-width:0}.script-item summary{cursor:pointer;display:flex;justify-content:space-between;gap:16px;list-style:none;padding:24px;font-size:18px}.script-item summary::-webkit-details-marker{display:none}.script-item[open] summary span{transform:rotate(45deg)}.script-item>div{padding:0 24px 24px}.script-item pre{background:var(--bg);padding:16px;font-size:14px;line-height:24px;margin:24px 0;color:var(--accent)}.script-item>div>a{display:inline-block;margin-right:24px;font-size:14px}.closing{padding:48px;background:var(--accent);color:var(--bg);display:grid;grid-template-columns:1fr 1fr;gap:24px}.closing h2{font-size:36px;line-height:1.3}.closing a{grid-column:2;font-weight:700}.footer{padding:0 32px 32px}.footer-mark{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;font-size:128px;font-weight:700;line-height:1;letter-spacing:-.06em;padding:32px 0}.footer-mark span{font-size:18px;font-weight:400;letter-spacing:0;line-height:28px;padding-bottom:8px}.footer-bottom{display:flex;gap:24px;flex-wrap:wrap;justify-content:space-between;margin-top:32px;font-size:14px;color:var(--muted)}.reading{max-width:1280px;margin:48px auto 96px;padding:0 32px}.article-intro{max-width:900px;margin-bottom:48px}.article-intro>a{font-size:14px;color:var(--muted)}.article-intro h1{font-size:48px;line-height:1.3;margin-top:32px}.lead{font-size:20px;line-height:28px;margin-top:24px}.meta{color:var(--muted);font-size:14px;margin-top:24px}.reading-layout{display:grid;grid-template-columns:minmax(0,840px) minmax(200px,1fr);gap:64px}.article{min-width:0;font-size:18px;line-height:1.8}.article section{margin:48px 0;scroll-margin-top:32px}.article h2{font-size:30px;line-height:1.3;margin-bottom:24px}.article p{margin:16px 0}.article ul,.article ol{padding-left:24px}.article li{margin:12px 0}.article a:not(.primary){text-decoration:underline;text-underline-offset:5px;text-decoration-color:#828879}.article pre{background:#000;padding:32px;font-size:14px;line-height:24px;position:relative;margin:24px 0;color:#deedcf}.environment{background:var(--surface);padding:24px;margin-top:0!important}.environment strong{color:var(--accent);font-size:14px}.reading-side nav{background:var(--surface);padding:24px}.reading-side h2{font-size:18px;margin-bottom:16px}.reading-side ul{padding:0;list-style:none}.reading-side li{margin:16px 0;font-size:14px}.reading-side>p{font-size:24px;margin:32px 24px}.copy-code{display:block;margin-top:8px;background:var(--surface2);color:var(--ink);padding:8px 12px;font-size:14px;min-height:40px}.copy-status{font-size:14px;color:var(--muted)}.related{display:block;padding:16px 0}.about-copy{max-width:840px}.reveal{animation:arrive .8s var(--curve) both}.hero-title{animation-delay:.08s}.fragment-0{animation-delay:.16s}.fragment-1{animation-delay:.24s}.fragment-2{animation-delay:.32s}.fragment-3{animation-delay:.4s}.statement{animation-delay:.48s}.fragment-2 pre{animation:settle 1.1s var(--curve) both}.observe-reveal{animation:none}.observe-reveal.is-visible{animation:arrive .8s var(--curve) both}@keyframes arrive{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}@keyframes settle{from{opacity:.4;transform:translateX(24px) scale(1.04)}to{opacity:1;transform:translateX(0) scale(1)}}
@media(min-width:1600px){.board,.topbar,.section,.footer{max-width:1560px;margin-left:auto;margin-right:auto}.hero-title h1{font-size:96px}.fragment{min-height:280px}}
@media(max-width:1000px){.hero-title{padding:32px}.hero-title h1{font-size:60px}.board{grid-template-columns:repeat(6,minmax(0,1fr))}.hero-title{grid-column:span 3;grid-row:span 2}.fragment{grid-column:span 3;min-height:220px}.fragment-2,.fragment-3{grid-column:span 3}.statement{grid-column:span 3;display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;padding:32px}.statement p br{display:block}.section-head h2{font-size:36px}.library-tools{align-items:stretch;flex-direction:column}.search-label{width:100%}.tutorial{grid-template-columns:104px minmax(0,1fr) 64px;gap:16px;padding:24px}.tutorial h3{font-size:20px;line-height:28px}.tool-section{gap:32px}.tool-intro h2{font-size:30px}.closing{grid-template-columns:1fr}.closing a{grid-column:1}.footer-mark{font-size:96px}.reading-layout{grid-template-columns:minmax(0,1fr)}.reading-side{grid-row:1}.reading-side>p{display:none}.reading-side nav ul{display:flex;flex-wrap:wrap;gap:8px 24px}.reading-side li{margin:4px 0}}
@media(max-width:600px){.topbar{padding:24px 16px;gap:16px}.brand{gap:8px}.brand b{font-size:30px}.brand>span{font-size:12px}.topbar nav{gap:16px;font-size:14px}.board{margin:0 8px;grid-template-columns:repeat(2,minmax(0,1fr))}.hero-title{grid-column:span 2;grid-row:auto;padding:32px 24px}.hero-title h1{font-size:48px;line-height:1.2}.hero-title>p{font-size:16px;line-height:24px}.hero-title .primary{margin-top:24px;min-width:200px}.hero-proof{gap:24px;padding-top:32px}.hero-proof b{font-size:20px}.fragment{grid-column:span 1;padding:16px;min-height:240px}.fragment pre{font-size:12px;line-height:20px}.fragment p{font-size:16px}.fragment-top{font-size:12px}.fragment-2{grid-column:span 2;min-height:240px}.fragment-2 pre{font-size:14px}.fragment-3{grid-column:span 1;min-height:220px}.statement{grid-column:span 1;padding:24px 16px;min-height:220px}.statement p{font-size:24px;line-height:32px}.statement a{font-size:14px}.section{margin:64px 16px}.section-head{display:block;margin-bottom:24px}.section-head h2{font-size:30px;line-height:36px}.section-head p{margin-top:16px}.section-head p br{display:none}.filters{gap:8px}.filters button{padding:12px;font-size:14px}.tutorial{grid-template-columns:minmax(0,1fr) 24px;padding:24px 16px;gap:8px;min-height:160px}.category{grid-column:1;font-size:12px}.tutorial>div{grid-column:1}.tutorial h3{font-size:20px;line-height:28px}.tutorial p{font-size:14px;line-height:24px}.row-end{grid-column:2;grid-row:1 / span 2;font-size:0}.row-end::after{content:'↗';font-size:24px}.tool-section{grid-template-columns:minmax(0,1fr);gap:32px}.tool-intro h2{font-size:30px;line-height:36px}.script-item summary{font-size:16px;padding:24px 16px}.script-item>div{padding:0 16px 24px}.closing{padding:32px 24px}.closing h2{font-size:24px;line-height:32px}.closing p br{display:none}.footer{padding:0 16px 32px}.footer-mark{font-size:72px;display:block}.footer-mark span{display:block;font-size:16px;margin-top:24px;letter-spacing:0}.footer-bottom{font-size:12px;gap:16px}.reading{padding:0 16px;margin:32px auto 64px}.article-intro h1{font-size:30px;line-height:1.35}.article-intro .lead{font-size:18px;line-height:28px}.article{font-size:16px;line-height:1.8}.article h2{font-size:24px;line-height:32px}.article pre{padding:24px 16px}.reading-layout{gap:24px}.reading-side nav{padding:24px 16px}.article-intro{margin-bottom:32px}.article section{margin:40px 0}.environment{padding:24px 16px}.empty{padding:24px}}
.skip{position:fixed}.skip:not(:focus){width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%)}.script-item nav{display:flex;gap:24px;font-size:14px}.fragment-2,.fragment-3{grid-column:span 3}
@media(max-width:600px){.fragment-2{grid-column:span 2}.fragment-3{grid-column:span 1}}
/* Compact opening: keep the tutorial index close to the first screen. */
.hero-title{padding:32px}.hero-title h1{font-size:48px;line-height:1.2}.hero-title>p{font-size:16px;line-height:24px;margin-top:16px}.hero-title .primary{margin-top:24px;padding:8px 16px}.hero-proof{padding-top:24px;gap:24px}.hero-proof b{font-size:20px}.fragment{min-height:176px;padding:16px 24px}.fragment pre{padding:16px 0;font-size:14px;line-height:20px}.fragment p{font-size:16px}.statement{padding:24px 32px}.statement p{font-size:24px;line-height:32px}.library.section{margin-top:48px}.board{grid-template-columns:repeat(12,minmax(0,1fr))}.hero-title{grid-column:span 6;grid-row:span 2}.fragment-0,.fragment-1,.fragment-2,.fragment-3{grid-column:span 3}.statement{grid-column:span 12;flex-direction:row;align-items:center}.statement p br{display:none}
@media(min-width:1600px){.hero-title h1{font-size:48px}.fragment{min-height:176px}}
@media(min-width:601px) and (max-width:1000px){.hero-title{grid-column:span 5;padding:24px}.hero-title h1{font-size:36px}.fragment-0,.fragment-1,.fragment-2,.fragment-3{grid-column:span 7;min-height:136px}.hero-title{grid-row:span 4}.fragment pre{padding:8px 0}.statement{min-height:0}.fragment-2 pre{font-size:12px}.statement p{font-size:24px}}
@media(max-width:600px){.board{grid-template-columns:repeat(2,minmax(0,1fr))}.hero-title{grid-column:span 2;grid-row:auto;padding:24px}.hero-title h1{font-size:36px;line-height:1.2}.hero-title>p{margin-top:12px}.hero-title .primary{margin-top:16px;min-width:176px}.hero-proof{padding-top:16px}.fragment-0,.fragment-1,.fragment-2,.fragment-3{grid-column:span 1;min-height:152px;padding:16px}.fragment pre{font-size:12px;line-height:20px;padding:12px 0}.fragment p{font-size:14px}.fragment-2{grid-column:span 2;min-height:152px}.fragment-3{grid-column:span 1}.statement{grid-column:span 1;flex-direction:column;align-items:flex-start;min-height:152px;padding:16px}.statement p{font-size:20px;line-height:28px}.statement p br{display:block}.library.section{margin-top:40px}}
.statement{display:none}
@media(min-width:1001px){.fragment{min-height:200px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}.reveal,.observe-reveal{opacity:1!important;transform:none!important}}