:root{--bg:#fafaf8;--fg:#1c1f1d;--muted:#555c58;--line:#cfd5d1;--card:#fff;--accent:oklch(0.508 0.118 165.6);--accent-fg:#fff;--warn:#b7791f;--code:#eef1ee;--chip:#eef1ef;--ok:#1d7f55;--ok-bg:#e1f3ea;--warn-bg:#fbf0dc;--danger:#c4372c;--danger-bg:#fbe6e3;--add-bg:#e3f5ea;--del-bg:#fbe7e5;--shadow:rgb(20 30 25/.18);--desk:linear-gradient(135deg,#bfe3d3,#d9d3f2 60%,#f4dcc8)}
@media (prefers-color-scheme:dark){:root{--bg:#121513;--fg:#e8ece9;--muted:#a3ada7;--line:#333a36;--card:#1a1e1b;--accent:oklch(0.72 0.12 165.6);--accent-fg:#0b120e;--warn:#e0a84a;--code:#1f2421;--chip:#262c28;--ok:#5fd09a;--ok-bg:#183326;--warn-bg:#3a2c14;--danger:#f08a80;--danger-bg:#3d1c19;--add-bg:#163323;--del-bg:#3a1b19;--shadow:rgb(0 0 0/.55);--desk:linear-gradient(135deg,#123b2c,#2a2450 60%,#4a2d1c)}}
*{box-sizing:border-box}
html{scroll-padding-top:72px;scroll-behavior:smooth}@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.6 Inter,system-ui,sans-serif}
.wrap{max-width:68rem;margin:0 auto;padding:0 1rem}
a{color:var(--accent)}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.skip{position:absolute;left:-999px}.skip:focus{left:8px;top:8px;background:var(--card);padding:8px;z-index:30}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
/* header */
.top{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;justify-content:space-between;align-items:center;gap:16px;height:60px}
.brand{display:flex;align-items:center;gap:8px;font-weight:700;color:var(--fg);text-decoration:none}
nav{display:flex;align-items:center;gap:20px}nav a{color:var(--muted);text-decoration:none}nav a:hover{color:var(--fg)}
.gh{display:flex}.gh svg{width:20px;height:20px;fill:currentColor}
.lang{display:flex;gap:2px;padding:2px;border:1px solid var(--line);border-radius:8px;background:var(--card)}.lang button{font:inherit;font-size:12px;font-weight:600;padding:1px 8px;border:0;border-radius:6px;background:none;color:var(--muted);cursor:pointer}.lang button[aria-pressed=true]{background:var(--accent);color:var(--accent-fg)}
.nav-dl{min-height:0;padding:6px 14px;font-size:14px}
@media(max-width:640px){nav{gap:12px}nav .nl,nav .gh{display:none}}
/* type, sections */
h1{font-size:clamp(2rem,1.4rem + 2.6vw,3.25rem);line-height:1.15;letter-spacing:-.02em;margin:0 0 1rem;text-wrap:balance}
h2{font-size:clamp(1.5rem,1.2rem + 1.2vw,2rem);line-height:1.2;margin:0 0 1rem;text-wrap:balance}
h3{font-size:1.125rem;line-height:1.3;margin:0 0 .5rem}
p{margin:0 0 1rem}
.accent{color:var(--accent)}.muted{color:var(--muted)}
.lead{max-width:42rem;font-size:1.0625rem;color:var(--muted);margin-bottom:2rem}#privacy .lead{margin-bottom:1rem}
section{padding:clamp(3rem,2rem + 4vw,5rem) 0}section+section{border-top:1px solid var(--line)}
.alt{background:color-mix(in srgb,var(--chip) 60%,var(--bg))}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:2.75rem;padding:.5rem 1.125rem;border:1px solid var(--line);border-radius:8px;background:var(--card);color:var(--fg);text-decoration:none;font-weight:600;text-align:center}
.btn:hover{border-color:var(--accent)}
.btn.primary{background:var(--accent);color:var(--accent-fg);border-color:var(--accent)}
.btn svg{flex:none;width:20px;height:20px;fill:currentColor}
/* hero */
.hero{display:grid;gap:2.5rem;align-items:center}
@media(min-width:64rem){.hero{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.hero .lead{font-size:1.1875rem;margin-bottom:1.5rem}
.actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-bottom:1rem}
.meta{margin:0;font-size:14px;color:var(--muted)}
.shot{margin:0;min-width:0}.shot figcaption{margin-top:.75rem;font-size:14px;color:var(--muted)}
/* features */
.more{margin:2.5rem 0 .75rem}
.chips{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:0 0 1.5rem;padding:0}
.chips li{padding:4px 12px;border:1px solid var(--line);border-radius:999px;background:var(--card);font-size:14px}
.kb{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:0;color:var(--muted)}
kbd{display:inline-block;min-width:26px;text-align:center;padding:2px 7px;border:1px solid var(--line);border-bottom-width:2px;border-radius:6px;background:var(--card);color:var(--fg);font:13px 'JetBrains Mono',monospace}
/* download */
.dl-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr));gap:1rem}
.dl{display:flex;flex-direction:column;gap:10px;padding:1.25rem;border:1px solid var(--line);border-radius:.75rem;background:var(--card)}
.dl.on{border:2px solid var(--accent);padding:calc(1.25rem - 1px)}
.dl h3{display:flex;align-items:center;gap:8px;margin:0}.dl h3 svg{width:22px;height:22px;fill:currentColor}
.dl small{color:var(--muted);font-size:13px}
.dl-note{margin:1.5rem 0 0}
code{font:13px/1.5 'JetBrains Mono',monospace}
.code{display:flex;gap:8px;align-items:center;margin-top:auto;padding:8px;border-radius:8px;background:var(--code)}.code code{flex:1;min-width:0;font-size:12px;overflow-wrap:anywhere}
.copy{font:inherit;font-size:13px;padding:4px 10px;border:1px solid var(--line);border-radius:6px;background:var(--card);color:var(--fg);cursor:pointer}
/* vs */
.vs-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:.75rem;background:var(--card)}
.vs{width:100%;border-collapse:collapse}
.vs th,.vs td{padding:12px 16px;text-align:left;border-bottom:1px solid var(--line)}.vs tbody tr:last-child>*{border-bottom:0}
.vs thead th{white-space:nowrap}.vs tbody th{font-weight:500}.vs td{color:var(--muted)}.vs td.y{color:var(--ok);font-weight:700}
@media(max-width:520px){.vs{font-size:.9rem}.vs th,.vs td{padding:10px}}
/* faq */
.faq{max-width:48rem}
.faq details{margin:0 0 8px;border:1px solid var(--line);border-radius:.75rem;background:var(--card)}
.faq summary{padding:12px 16px;font-weight:600;cursor:pointer}.faq summary:focus-visible{outline-offset:-3px;border-radius:.75rem}
.faq details p{margin:0;padding:0 16px 12px;color:var(--muted)}
/* footer */
.foot{border-top:1px solid var(--line);color:var(--muted);font-size:14px}
.foot .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px 20px;padding-top:2rem;padding-bottom:2rem}
.foot-links{display:flex;flex-wrap:wrap;gap:8px 20px}
/* Mock UI (hero + vignettes): base styles = final state; .play / keyframes add the motion */
.mock{width:100%;border:1px solid var(--line);border-radius:.75rem;background:var(--card);box-shadow:0 24px 60px -24px var(--shadow);overflow:hidden;font-size:13px;line-height:1.35}
.chrome{display:flex;align-items:center;gap:6px;height:32px;padding:0 12px;border-bottom:1px solid var(--line);background:var(--code)}
.chrome i{width:11px;height:11px;border-radius:50%;background:#ff5f57}.chrome i:nth-child(2){background:#febc2e}.chrome i:nth-child(3){background:#28c840}
.chrome span{flex:1;text-align:center;margin-right:45px;font-size:12px;font-weight:600;color:var(--muted)}
.app{height:540px}
.mainp{position:relative;height:100%;padding:12px 16px;overflow:hidden}
.rhead{display:flex;align-items:center;gap:8px;font-weight:600;font-size:14px;padding-bottom:8px;margin-bottom:10px;border-bottom:1px solid var(--line);white-space:nowrap}
.rhead small{margin-left:auto;font-weight:400;font-size:11px;color:var(--muted);display:flex;align-items:center;gap:5px}
.sync{width:6px;height:6px;margin:0 2px;border-radius:50%;background:var(--accent)}
.cnt{font-size:11px;padding:0 7px;border-radius:999px;background:var(--chip);color:var(--muted)}
.branch{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:6px;padding:2px 8px 2px 6px;font:600 11px 'JetBrains Mono',monospace;background:var(--card)}
.branch i{position:relative;width:7px;height:7px;border-radius:50%;background:var(--accent)}
.branch i::after{content:'';position:absolute;inset:0;border-radius:50%;background:var(--accent);animation:ping 2.4s ease-out infinite}
@keyframes ping{0%{transform:scale(1);opacity:.6}70%,100%{transform:scale(3);opacity:0}}
.tree,.tree ul{list-style:none;margin:0;padding:0 0 0 26px}
.tree li{position:relative;padding-top:8px}
.tree li::before,.tree li:not(:last-child)::after{content:'';position:absolute;top:0;left:-18px;transform-origin:top}
.tree li::before{width:14px;height:28px;border:solid var(--line);border-width:0 0 2px 2px;border-bottom-left-radius:10px}
.tree li:not(:last-child)::after{bottom:0;border-left:2px solid var(--line)}
.pc{display:flex;flex-direction:column;gap:4px;padding:9px 12px;border:1px solid var(--line);border-radius:16px;background:var(--card);transition:box-shadow .2s}
.pc.sel{box-shadow:0 0 0 2px var(--accent),0 6px 20px -8px var(--shadow)}
.r1{display:flex;align-items:baseline;gap:6px;white-space:nowrap}
.chev{flex:none;color:var(--muted);transition:transform .3s;display:inline-block}.pc.open .chev{transform:rotate(90deg)}
.num{color:var(--muted)}.ti{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;font-weight:500}
.r2{display:flex;gap:10px;padding-left:14px;font:11px 'JetBrains Mono',monospace;color:var(--muted);white-space:nowrap;overflow:hidden}
.add{color:var(--ok)}.del{color:var(--danger)}
.r3{display:flex;flex-wrap:wrap;gap:4px;padding-left:14px}
.b{flex:none;display:inline-flex;align-items:center;gap:4px;height:20px;padding:0 8px;border-radius:999px;border:1px solid var(--line);font-size:11px;font-weight:500;white-space:nowrap}
.b.ok{background:var(--ok-bg);color:var(--ok);border-color:transparent}.b.warn{background:var(--warn-bg);color:var(--warn);border-color:transparent}
.b.bad{background:var(--danger-bg);color:var(--danger);border-color:transparent}.b.go{background:var(--accent);color:var(--accent-fg);border-color:transparent}
.ci .spin{display:none;width:8px;height:8px;border-radius:50%;border:1.5px solid currentColor;border-top-color:transparent;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(1turn)}}
.thr{display:grid;grid-template-rows:1fr;transition:grid-template-rows .5s ease}.thr>div{min-height:0;overflow:hidden}
.thr-in{display:flex;flex-direction:column;gap:6px;margin-top:6px;padding-top:8px;border-top:1px solid var(--line)}
.file{font:11px 'JetBrains Mono',monospace;color:var(--muted)}
.hunk{border:1px solid var(--line);border-radius:8px;overflow:hidden;font:11px/1.6 'JetBrains Mono',monospace}.hunk,.vtype{font-variant-ligatures:none}
.hunk span{display:block;padding:0 8px;white-space:pre;overflow:hidden;text-overflow:ellipsis}.hunk .ha{background:var(--add-bg)}.hunk .hd{background:var(--del-bg)}
.msg{display:flex;gap:6px;align-items:flex-start}
.av{flex:none;display:grid;place-items:center;width:18px;height:18px;border-radius:50%;color:#fff;font:600 10px Inter,sans-serif}
.grow{display:grid;grid-template-rows:1fr;transition:grid-template-rows .4s,opacity .4s}.grow>div{min-height:0;overflow:hidden}
.reply{display:flex;gap:6px;align-items:flex-end}
.ta{flex:1;min-width:0;height:40px;padding:5px 8px;border:1px solid var(--line);border-radius:10px;background:var(--bg);white-space:nowrap;overflow:hidden}
.rbtn{flex:none;padding:5px 10px;border-radius:8px;background:var(--accent);color:var(--accent-fg);font-weight:600;font-size:12px;transition:transform .12s}
.caret{display:none;width:1.5px;height:14px;margin-left:1px;vertical-align:-2px;background:var(--fg);animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.key{position:absolute;right:14px;bottom:12px;padding:2px 8px;border:1px solid var(--line);border-bottom-width:3px;border-radius:6px;background:var(--card);font:600 12px 'JetBrains Mono',monospace;opacity:0}
.key.hit{animation:keyhit .55s ease-out}
@keyframes keyhit{0%{opacity:1;transform:translateY(2px)}30%{opacity:1;transform:none}100%{opacity:0}}
/* hero timeline: .play without a step class = initial state */
.mock .b.unres{display:none}
.mock.play .tree li::before,.mock.play .tree li::after{transition:transform .6s ease}
.mock.play .tree ul li::before{transition-delay:.35s}
.mock.play:not(.s-draw) .tree li::before,.mock.play:not(.s-draw) .tree li::after,.mock.s-out .tree li::before,.mock.s-out .tree li::after{transform:scaleY(0)}
.mock.play .pc{transition:opacity .45s,transform .45s,box-shadow .2s}
.mock.play:not(.s-c1) .c1,.mock.play:not(.s-c2) .c2,.mock.play:not(.s-c3) .c3,.mock.s-out .pc,.mock.s-out .branch{opacity:0;transform:translateY(8px)}
.mock.play .branch{transition:opacity .45s,transform .45s}
.mock.play .b.new{transition:transform .35s cubic-bezier(.3,1.7,.5,1),opacity .2s}
.mock.play:not(.s-new) .b.new{transform:scale(0);opacity:0}
.mock.play:not(.s-ci) .ci .spin{display:inline-block}.mock.play:not(.s-ci) .ci b{display:none}
.mock.play:not(.s-ci) .ci{background:none;color:var(--muted);border-color:var(--line)}
.mock.play:not(.s-sync) .sync{width:10px;height:10px;margin:0;background:none;border:1.5px solid var(--muted);border-top-color:transparent;animation:spin .8s linear infinite}
.mock.play:not(.s-open) .thr{grid-template-rows:0fr}.mock.play:not(.s-open) .pc.open .chev{transform:none}
.mock.play:not(.s-open) .pc.open{box-shadow:none}
.mock.play:not(.s-sent) .grow{grid-template-rows:0fr;opacity:0}
.mock.play:not(.s-sent) .b.unres{display:inline-flex}
.mock.s-open:not(.s-sent) .caret{display:inline-block}
.mock:not(.play) .typed::before,.mock.s-sent .typed::before{content:attr(data-ph);color:var(--muted)}
.mock.s-press:not(.s-sent) .rbtn{transform:scale(.9)}
@media(max-width:620px){.app{height:600px}.mainp{padding:10px}.tree,.tree ul{padding-left:22px}}
/* Vignettes */
.vigs{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr));gap:1rem}
.vig{margin:0;padding:12px;border:1px solid var(--line);border-radius:.75rem;background:var(--card)}
.vig figcaption{padding:12px 4px 2px;color:var(--muted)}.vig figcaption strong{display:block;margin-bottom:4px;font-size:1.125rem;color:var(--fg)}
.vm{position:relative;height:230px;padding:14px;border-radius:10px;background:var(--bg);overflow:hidden;font-size:12px;line-height:1.35}
.vm .pc{padding:8px 10px}
/* off-screen, reduced motion or no JS: no animation, so the base styles (= final state) show */
.vig:not(.run) *,.vig:not(.run) *::before,.vig:not(.run) *::after{animation:none!important}
.v-stack .tree li::before,.v-stack .tree li::after{animation:v-draw 8s ease infinite both}
.v-stack .tree ul li::before{animation-delay:1s}
.v-stack .pc{animation:v-rise 8s ease infinite both .4s}.v-stack ul .pc{animation-delay:1.3s}
.v-pop{animation:v-pop 8s ease infinite both}
@keyframes v-draw{0%,3%{transform:scaleY(0)}12%,90%{transform:none}97%,100%{transform:scaleY(0)}}
@keyframes v-rise{0%,3%{opacity:0;transform:translateY(8px)}10%,88%{opacity:1;transform:none}95%,100%{opacity:0}}
@keyframes v-pop{0%,38%{opacity:0;transform:scale(0)}44%{opacity:1;transform:scale(1.2)}48%,88%{opacity:1;transform:none}95%,100%{opacity:0}}
.v-thr{display:flex;flex-direction:column;gap:6px}
.vtype{display:inline-block;vertical-align:top;width:0;overflow:hidden;white-space:nowrap;border-right:1.5px solid var(--fg);font:11px/1.6 'JetBrains Mono',monospace;animation:v-type 8s steps(22,end) infinite both}
@keyframes v-type{0%,22%{width:0}52%,62%{width:22ch}63%,100%{width:0}}
.v-thr .rbtn{animation:v-press 8s infinite both}
@keyframes v-press{0%,58%{transform:none}60%{transform:scale(.88)}62%,100%{transform:none}}
.v-sent{animation:v-show 8s ease infinite both}
@keyframes v-show{0%,63%{opacity:0;transform:translateY(6px)}68%,93%{opacity:1;transform:none}98%,100%{opacity:0}}
.cal-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;font-weight:600}
.seg{display:flex;padding:2px;border-radius:8px;background:var(--chip);font-size:10px;font-weight:500}.seg i{font-style:normal;padding:1px 6px;border-radius:6px;color:var(--muted)}.seg i.on{background:var(--card);color:var(--fg)}
.cal{display:grid;grid-template-columns:repeat(7,1fr);grid-auto-rows:27px;gap:2px;counter-reset:d}
.cal .wd{grid-row:auto;height:14px;font-size:10px;color:var(--muted);text-align:center}
.cal b{font-weight:400;font-size:9px;color:var(--muted);padding:1px 3px;border-radius:5px;background:var(--card);overflow:hidden}
.cal b::before{counter-increment:d;content:counter(d);display:block}
.mp{display:block;font:600 8.5px/12px Inter,sans-serif;font-style:normal;padding:0 3px;border-radius:4px;background:var(--c,var(--accent));color:#fff;white-space:nowrap;animation:v-drop 8s cubic-bezier(.3,1.4,.5,1) infinite both;animation-delay:var(--d)}
@keyframes v-drop{0%,4%{opacity:0;transform:translateY(-16px)}12%,88%{opacity:1;transform:none}95%,100%{opacity:0}}
.v-notif{background:var(--desk);display:flex;flex-direction:column;align-items:flex-end;gap:8px;padding-top:34px}
.menubar{position:absolute;top:0;left:0;right:0;height:22px;display:flex;justify-content:space-between;align-items:center;padding:0 10px;font-size:10px;font-weight:600;background:color-mix(in srgb,var(--card) 55%,transparent)}
.toast{display:flex;gap:9px;width:min(100%,300px);padding:9px 11px;border-radius:14px;background:color-mix(in srgb,var(--card) 88%,transparent);box-shadow:0 8px 24px -8px var(--shadow);backdrop-filter:blur(8px);animation:v-slide 8s cubic-bezier(.2,.9,.3,1) infinite both;animation-delay:var(--d)}
.toast>div{flex:1;min-width:0;display:flex;flex-direction:column}.toast small{color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.toast time{font-size:10px;color:var(--muted)}
.appic{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:8px;background:var(--accent);color:var(--accent-fg);font:700 10px Inter,sans-serif;font-style:normal}
@keyframes v-slide{0%,6%{opacity:0;transform:translateX(110%)}14%,84%{opacity:1;transform:none}92%,100%{opacity:0;transform:translateX(110%)}}
@media(prefers-reduced-motion:reduce){.mock *,.mock *::before,.mock *::after,.vm *,.vm *::before,.vm *::after{animation:none!important;transition:none!important}}