.site{--wide:1200px;--mono:"Atkinson Hyperlegible Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;--tok-keyword:#7c3aed;--tok-string:#0f7b3e;--tok-number:#b45309;--tok-comment:#5f6b7a;--tok-pre:#a21caf}html:has(.site){scroll-padding-top:76px}.site main{flex:1}.site a{color:var(--accent-ink);text-underline-offset:3px}.site a.btn,.site a.wordmark{color:var(--fg);text-decoration:none}.site a.btn-primary{color:#fff}.site code{font-family:var(--mono);font-size:.92em}.site-bar{z-index:10;background:#fff;position:sticky;top:0}.site-nav{gap:4px;margin-left:8px;display:flex}.site-nav a{color:var(--muted);border-radius:var(--radius);padding:6px 10px;font-weight:600;text-decoration:none}.site-nav a:hover{color:var(--fg);background:var(--surface)}.site-nav a[aria-current=page]{color:var(--fg)}.btn-large{height:48px;padding:0 22px;font-size:16px}.sr-only{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.hero,.moments,.courses,.how,.compare-teaser,.close{width:100%;max-width:var(--wide);margin:0 auto;padding:0 32px}.section-head{max-width:760px;margin:0 0 32px}.section-head h2{letter-spacing:-.015em;text-wrap:balance;margin:0 0 10px;font-size:30px;line-height:1.2}.section-head p{color:var(--muted);margin:0;font-size:17px;line-height:1.6}.moments,.courses,.how,.compare-teaser{margin-top:112px}.hero{grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:center;gap:48px;padding-top:56px;display:grid}.hero h1{letter-spacing:-.03em;text-wrap:balance;margin:0;font-size:clamp(36px,4vw,56px);font-weight:800;line-height:1.06}.hero-sub{color:var(--muted);max-width:46ch;margin:20px 0 0;font-size:18px;line-height:1.6}.hero-actions{flex-wrap:wrap;gap:12px;margin-top:28px;display:flex}.hero-langs{color:var(--muted);margin:16px 0 0;font-size:14px}.hero-moment{min-height:560px}.moment{border:1px solid var(--line);border-radius:var(--radius);background:#fff;grid-template-rows:auto auto 1fr auto;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:32px;padding:24px;display:grid}.moment>.moment-head,.moment>.moment-blurb,.moment>.moment-code,.moment>.moment-open{grid-column:1}.moment>.moment-viz{border-left:1px solid var(--line);grid-area:1/2/-1;min-width:0;margin:-24px -24px -24px 0}.moment-head{justify-content:space-between;align-items:baseline;gap:12px;display:flex}.moment-title{margin:0;font-size:19px;line-height:1.3}.moment-lang{color:var(--muted);letter-spacing:.02em;flex:none;font-size:13px;font-weight:700}.moment-blurb{color:var(--muted);margin:8px 0 16px;font-size:15px;line-height:1.6}.moment-code{border:1px solid var(--line);border-radius:var(--radius);font:14px/26px var(--mono);counter-reset:line;align-self:start;margin:0;padding:8px 0;list-style:none}.moment-code li{counter-increment:line;grid-template-columns:28px 28px minmax(0,1fr);align-items:start;padding-right:12px;display:grid}.moment-code li:before{content:counter(line);text-align:right;color:var(--muted);font-variant-numeric:tabular-nums;grid-area:1/2;padding-right:8px;font-size:13px}.moment-code .moment-marker{grid-area:1/1;justify-content:center;align-items:center;height:26px;display:flex}.moment-code .is-focus{background:var(--accent-soft)}.moment-code .is-focus .moment-marker{color:var(--accent)}.moment-code .is-crash{background:var(--danger-soft)}.moment-code .is-crash .moment-marker{color:var(--danger)}.moment-code .is-next .moment-marker{color:var(--muted)}.moment-code code{font:inherit;white-space:pre-wrap;overflow-wrap:anywhere;grid-column:3}.moment-open{align-self:end;margin-top:16px;font-size:15px;font-weight:600}.cf-tok-keyword{color:var(--tok-keyword)}.cf-tok-string{color:var(--tok-string)}.cf-tok-number{color:var(--tok-number)}.cf-tok-comment{color:var(--tok-comment);font-style:italic}.cf-tok-pre{color:var(--tok-pre)}.moment-hero{grid-template-rows:none;grid-template-columns:minmax(0,1fr)}.moment-hero>*{grid-column:1!important}.moment-hero>.moment-viz{border-left:0;border-top:1px solid var(--line);grid-row:auto;margin:16px -24px 0}.moment-hero>.moment-blurb{margin-bottom:12px}.moment-hero>.moment-open{order:9}.moment-wall{gap:24px;display:grid}.feature{border-top:1px solid var(--line);grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:start;gap:48px;padding:32px 0;display:grid}.feature:last-child{border-bottom:1px solid var(--line)}.feature h3{margin:0 0 8px;font-size:20px;line-height:1.3}.feature p{margin:0;font-size:16px;line-height:1.6}.snippet-block{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);font:14px/1.7 var(--mono);white-space:pre-wrap;overflow-wrap:anywhere;margin:0;padding:16px 20px}.snippet-block code{font-size:inherit}.tok-tag{color:var(--tok-pre)}.tok-attr{color:var(--tok-keyword)}.tok-str{color:var(--tok-string)}.steps-list{counter-reset:step;gap:8px;margin:0;padding:0;list-style:none;display:grid}.steps-list li{background:var(--surface);border-radius:var(--radius);grid-template-columns:96px minmax(0,1fr);align-items:baseline;gap:12px;padding:12px 16px;font-size:16px;display:grid}.steps-list span{color:var(--muted);letter-spacing:.02em;font-size:13px;font-weight:700}.swap-demo{font:15px/1.6 var(--mono);gap:6px;margin:0;display:grid}.swap-demo span{border-radius:var(--radius);overflow-wrap:anywhere;padding:10px 14px}.swap-old{color:var(--muted);background:var(--surface);text-decoration:line-through;-webkit-text-decoration-color:var(--line-strong);text-decoration-color:var(--line-strong)}.swap-new{background:var(--accent-soft)}.swap-new strong{color:var(--accent-ink)}.tag-list{flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none;display:flex}.tag-list li{border:1px solid var(--line-strong);border-radius:999px;padding:6px 14px;font-size:15px}.how-list{max-width:760px;margin:0}.how-list>div{border-top:1px solid var(--line);grid-template-columns:220px minmax(0,1fr);gap:24px;padding:18px 0;display:grid}.how-list>div:last-child{border-bottom:1px solid var(--line)}.how-list dt{margin:0;font-size:17px;font-weight:700}.how-list dd{margin:0;font-size:16px;line-height:1.6}.compare-table{border-collapse:collapse;width:100%;font-size:16px;line-height:1.5}.compare-table th,.compare-table td{text-align:left;vertical-align:top;border-bottom:1px solid var(--line);padding:14px 16px 14px 0}.compare-table thead th{color:var(--muted);letter-spacing:.02em;padding-top:0;font-size:13px;font-weight:700}.compare-table tbody th{width:24%;font-weight:700}.compare-table td:first-of-type{color:var(--muted)}.compare-more{margin:20px 0 0;font-size:16px;font-weight:600}.close{text-align:center;margin-top:128px;margin-bottom:96px}.close h2{letter-spacing:-.02em;margin:0 0 24px;font-size:clamp(28px,3.4vw,40px);line-height:1.15}.site-foot{border-top:1px solid var(--line);flex-wrap:wrap;align-items:center;gap:12px 28px;padding:24px 32px;display:flex}.site-foot nav{flex-wrap:wrap;gap:8px 24px;display:flex}.site-foot nav a{color:var(--muted);font-size:14px}@media (width<=1080px){.hero{grid-template-columns:minmax(0,1fr);gap:40px;padding-top:40px}.hero-moment{min-height:0}}@media (width<=900px){.moment{grid-template-rows:none;grid-template-columns:minmax(0,1fr)}.moment>*{grid-column:1!important}.moment>.moment-viz{border-left:0;border-top:1px solid var(--line);grid-row:auto;margin:16px -24px 0}.moment>.moment-open{order:9}.feature{grid-template-columns:minmax(0,1fr);gap:20px}.how-list>div{grid-template-columns:minmax(0,1fr);gap:6px}}@media (width<=640px){.hero,.moments,.courses,.how,.compare-teaser,.close{padding:0 16px}.moments,.courses,.how,.compare-teaser{margin-top:80px}.section-head h2{font-size:25px}.moment{padding:16px}.moment>.moment-viz,.moment-hero>.moment-viz{margin:16px -16px 0}.site-nav{display:none}.site-bar{position:static}.site-bar .btn{flex:none;margin-left:auto}.hero{padding-top:32px}.compare-table tbody th{width:auto}.steps-list li{grid-template-columns:minmax(0,1fr);gap:2px}}.guide.compare{max-width:860px}.guide.compare .note{color:var(--muted);margin:12px 0 0;font-size:14px;line-height:1.6}.guide.compare h3{margin:24px 0 4px;font-size:16px}.guide.compare ul{padding-left:22px}.guide.compare li{margin:6px 0}.guide.compare .compare-table{margin-top:4px;font-size:15px}.guide.compare .compare-table td:first-of-type{color:var(--fg)}
