/* Speed, told for people who are not developers and kept vague on numbers: built in Rust, native,
   drawn by GPUI on the GPU, no browser inside, light on memory. Four looks in the speed-style picker:
   statement and badges, the stack inside, memory bars, and a dark build-up. */
.spd { --sp-e: cubic-bezier(.22, 1, .36, 1); border-radius: 26px; outline-offset: 10px; }
.spd > .vtag { left: 0; top: -30px; }
.sp-o { display: block; }

.sp-card { position: relative; min-width: 0; overflow: hidden; padding: 56px; border-radius: 26px; background: var(--tile); box-shadow: 0 0 0 .5px var(--line); }
.sp-k { margin: 0 0 10px; font: 600 17px/1.2 var(--sans); letter-spacing: -.01em; color: var(--ink2); }
.sp-h { margin: 0; font: 700 44px/1.06 var(--sans); letter-spacing: -.045em; color: var(--ink); text-wrap: balance; }
.sp-p { margin: 14px 0 0; max-width: 28em; font: 400 18px/1.42 var(--sans); letter-spacing: -.01em; color: var(--ink2); text-wrap: pretty; }

/* Text badges: simple marks for the tools, never a drawn logo */
.sp-bd { display: inline-flex; align-items: center; flex: none; height: 40px; padding: 0 16px; border-radius: 11px; font: 700 18px/1 var(--mono); letter-spacing: -.02em; white-space: nowrap; }
.sp-bd.rs { background: #111; color: #fff; }
.sp-bd.gp { background: #fff; color: #111; box-shadow: inset 0 0 0 1.5px #111; }
.sp-bd.gu { background: rgba(0, 0, 0, .06); color: var(--ink); }

/* A sliver of memory next to the app icon */
.sp-mt { position: relative; display: block; flex: 1; max-width: 170px; height: 12px; border-radius: 6px; background: rgba(0, 0, 0, .06); }
.sp-mt b { position: absolute; left: 0; top: 0; display: block; width: 5%; min-width: 7px; height: 100%; border-radius: 6px; background: var(--acc); }
.sp-mt b::after { content: ""; position: absolute; left: 50%; top: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; background: var(--acc); opacity: 0; pointer-events: none; }

/* Option 1: a big statement, then three columns that light up in turn */
.sp-b1 { display: grid; gap: 56px; padding: 64px 64px 56px; }
.sp-big { margin: 0; font: 700 clamp(34px, 5.4vw, 72px)/1.04 var(--sans); letter-spacing: -.045em; color: var(--ink); text-wrap: balance; }
.sp-big span { display: block; color: var(--ink3); }
.sp-cols { display: grid; grid-template-columns: repeat(3, 1fr); border-top: .5px solid var(--line2); }
.sp-col { position: relative; min-width: 0; padding: 36px 36px 0 0; }
.sp-col + .sp-col { padding-left: 36px; box-shadow: inset .5px 0 0 var(--line2); }
.sp-col::before { content: ""; position: absolute; left: 0; top: -1px; width: 0; height: 2px; background: var(--acc); }
.sp-col.on::before { animation: sp-fill 2.8s linear forwards; }
.sp-col.still::before { display: none; }
.sp-cv { display: flex; align-items: center; gap: 14px; height: 52px; }
.sp-cv img { width: 44px; height: 44px; flex: none; }
.sp-col h4 { margin: 26px 0 8px; font: 700 28px/1.12 var(--sans); letter-spacing: -.035em; color: var(--ink); }
.sp-col p { margin: 0; max-width: 20em; font: 400 17px/1.42 var(--sans); letter-spacing: -.01em; color: var(--ink2); text-wrap: pretty; }
.sp-px { display: grid; grid-template-columns: repeat(8, 7px); gap: 3px; }
.sp-px i { display: block; height: 7px; border-radius: 2px; background: var(--ink); opacity: .14; }
.sp-col.on .sp-px i { animation: sp-px 1.8s var(--d) ease-in-out infinite; }
.sp-col.on .sp-mt b::after { animation: sp-ping 1.6s var(--sp-e) .3s infinite; }
.sp-col.on .sp-bd.rs { animation: sp-ring 1.8s var(--sp-e) infinite; }
.sp-cv, .sp-col h4 { transition: opacity .5s var(--sp-e); }
.sp-col:not(.on) .sp-cv { opacity: .45; }
@keyframes sp-ring { 0% { box-shadow: 0 0 0 0 rgba(17, 17, 17, .28); } 100% { box-shadow: 0 0 0 12px rgba(17, 17, 17, 0); } }
@keyframes sp-fill { to { width: 100%; } }
@keyframes sp-px { 0%, 100% { opacity: .14; background: var(--ink); } 40% { opacity: 1; background: var(--acc); } }
@keyframes sp-ping { 0% { opacity: .3; transform: scale(.3); } 100% { opacity: 0; transform: scale(1.6); } }

/* Option 2: two stacks side by side. The tall grey one is a browser in the middle. */
.sp-two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.sp-stk > * { transition: opacity .4s var(--sp-e); }
.sp-two.fade .sp-stk > * { opacity: 0; }
.sp-stk { display: flex; flex-direction: column; gap: 36px; padding: 48px; }
.sp-ly { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.sp-ly li { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 60px; padding: 0 20px; border-radius: 14px; font: 600 18px/1.2 var(--text); letter-spacing: -.015em; color: var(--ink); opacity: 0; transform: translateY(-10px); transition: opacity .4s var(--sp-e), transform .55s var(--sp-e), background-color .3s, color .3s; }
.sp-ly li.in { opacity: 1; transform: none; }
.sp-ly li > span { display: flex; align-items: center; gap: 10px; min-width: 0; }
.sp-ly li img { width: 28px; height: 28px; flex: none; }
.sp-ly small { font: 400 16px/1.2 var(--text); letter-spacing: -.01em; color: var(--ink2); transition: color .3s; }
.sp-ly .base { height: 44px; justify-content: center; background: none; box-shadow: inset 0 0 0 .5px var(--line2); font: 500 15px/1 var(--text); color: var(--ink2); }
.sp-ly .base > span { justify-content: center; }
.sp-cap { margin: auto 0 0; font: 500 16px/1.3 var(--text); letter-spacing: -.01em; color: var(--ink2); transition: color .4s var(--sp-e); }
.sp-stk.done .sp-cap { color: var(--ink); }
.sp-stk.me.done .sp-cap { color: var(--acc); }
.sp-stk.web .sp-ly li:not(.base) { background: rgba(0, 0, 0, .05); }
.sp-stk.web .sp-ly li.x { background: repeating-linear-gradient(135deg, rgba(0, 0, 0, .05) 0 7px, rgba(0, 0, 0, .085) 7px 14px); }
.sp-stk.web .sp-ly li.lit { background: #111; color: #fff; }
.sp-stk.web .sp-ly li.lit small { color: rgba(255, 255, 255, .62); }
.sp-stk.me .sp-ly li:not(.base) { background: rgba(0, 122, 255, .08); }
.sp-stk.me .sp-ly li.lit { background: var(--acc); color: #fff; }
.sp-stk.me .sp-ly li.lit .sp-bd { box-shadow: none; }
.sp-stk.me .sp-ly .sp-bd { height: 32px; padding: 0 12px; font-size: 15px; border-radius: 9px; }
.sp-stk.web .sp-ly li.base.lit { background: none; color: var(--ink); box-shadow: inset 0 0 0 1px #111; }
.sp-stk.me .sp-ly li.base.lit { background: none; color: var(--acc); box-shadow: inset 0 0 0 1px var(--acc); }

/* Option 3: bars with no numbers. Memory bars breathe a little; the Hushpen sliver stays still. */
.sp-mem { display: grid; grid-template-columns: 5fr 7fr; gap: 64px; align-items: center; }
.sp-mem > * { transition: opacity .4s var(--sp-e); }
.sp-mem.fade > * { opacity: 0; }
.sp-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.sp-chips .sp-bd { height: 34px; padding: 0 13px; font-size: 15px; }
.sp-bars { display: grid; gap: 26px; }
.sp-br { display: grid; gap: 10px; }
.sp-bt { display: flex; align-items: center; gap: 10px; min-width: 0; font: 600 17px/1.2 var(--text); letter-spacing: -.01em; color: var(--ink); }
.sp-bt b { font-weight: 600; white-space: nowrap; }
.sp-bt small { margin-left: auto; font: 400 15px/1.2 var(--text); color: var(--ink2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-bi { display: grid; place-items: center; width: 24px; height: 24px; flex: none; }
.sp-bi svg { width: 22px; height: 22px; fill: none; stroke: var(--ink2); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.sp-bi img { width: 24px; height: 24px; }
.sp-bk { position: relative; display: block; height: 22px; border-radius: 11px; background: rgba(0, 0, 0, .05); }
.sp-bk b { display: block; width: 0; height: 100%; border-radius: 11px; background: repeating-linear-gradient(135deg, #C7C7CC 0 8px, #BEBEC4 8px 16px); transform-origin: left center; transition: width 1.5s var(--sp-e); }
.sp-br.grown .sp-bk b { width: calc(var(--w) * 1%); }
.sp-br.me .sp-bk b { background: var(--acc); min-width: 0; }
.sp-br.me.grown .sp-bk b { width: max(calc(var(--w) * 1%), 8px); }
.sp-br.me .sp-bt small { color: var(--acc); font-weight: 600; }
.sp-br.me .sp-bk b::after { content: ""; position: absolute; left: 0; top: 50%; width: 36px; height: 36px; margin: -18px 0 0 -9px; border-radius: 50%; background: var(--acc); opacity: 0; pointer-events: none; }
.sp-br.me.hit .sp-bk b::after { animation: sp-ping 2.2s var(--sp-e) infinite; }
.sp-br.live .sp-bk b { animation: sp-breathe 3.4s ease-in-out infinite; }
.sp-br:nth-child(2).live .sp-bk b { animation-duration: 4.1s; animation-delay: -1.2s; }
.sp-br:nth-child(3).live .sp-bk b { animation-duration: 3.7s; animation-delay: -2.2s; }
.sp-fn { margin: 6px 0 0; font: 400 13px/1.4 var(--text); color: var(--ink3); }
.sp-mem.z .sp-bk b { transition: none; }
@keyframes sp-breathe { 0%, 100% { transform: scaleX(1); } 50% { transform: scaleX(.93); } }

/* Option 4: a dark stage. The steps on the left, the window building up on the right. */
.sp-dk { background: #000; color: #F5F5F7; }
.sp-bu { display: grid; grid-template-columns: 5fr 7fr; gap: 56px; align-items: center; }
.sp-bu > * { transition: opacity .5s var(--sp-e); }
.sp-bu.fade > * { opacity: 0; }
.sp-r3 span { font: 500 15px/1 var(--text); color: rgba(255, 255, 255, .6); white-space: nowrap; }
.sp-sl { display: grid; gap: 26px; margin: 0; padding: 0; list-style: none; }
.sp-sl li { display: grid; grid-template-columns: 30px 1fr; gap: 16px; align-items: start; opacity: .34; transition: opacity .45s var(--sp-e); }
.sp-sl li.cur, .sp-sl li.done { opacity: 1; }
.sp-sl i { position: relative; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; font: 600 14px/1 var(--text); font-style: normal; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .4); transition: background-color .3s, box-shadow .3s, color .3s; }
.sp-sl i svg { position: absolute; width: 18px; height: 18px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transition: opacity .25s; }
.sp-sl li.cur i { box-shadow: inset 0 0 0 1.5px #0A84FF; color: #0A84FF; }
.sp-sl li.done i { background: #0A84FF; box-shadow: none; color: transparent; }
.sp-sl li.done i svg { opacity: 1; }
.sp-sl b { display: block; font: 700 24px/1.15 var(--sans); letter-spacing: -.03em; color: #F5F5F7; }
.sp-sl span { display: block; margin-top: 5px; font: 400 16px/1.4 var(--sans); letter-spacing: -.01em; color: rgba(255, 255, 255, .58); text-wrap: pretty; }
.sp-stg { display: grid; gap: 16px; min-width: 0; }
.sp-win { position: relative; aspect-ratio: 940 / 600; overflow: hidden; border-radius: 10px; background: rgba(255, 255, 255, .03); box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .16); }
.sp-win img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; clip-path: inset(0 0 100% 0); }
.sp-bu.s2 .sp-win img { clip-path: inset(0); transition: clip-path 1.4s linear; }
.sp-wf { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: #0A84FF; stroke-width: 3; transition: opacity .8s var(--sp-e); }
.sp-wf .wf { stroke-dasharray: 1; stroke-dashoffset: 1; }
.sp-bu.s1 .sp-wf .wf { stroke-dashoffset: 0; transition: stroke-dashoffset 1.1s var(--sp-e) calc(var(--i) * 70ms); }
.sp-bu.s2 .sp-wf { opacity: 0; transition-delay: .7s; }
.sp-scan { position: absolute; left: 0; right: 0; top: 0; height: 2px; background: #0A84FF; box-shadow: 0 0 18px 2px rgba(10, 132, 255, .8); opacity: 0; pointer-events: none; }
.sp-bu.s2 .sp-scan { animation: sp-scan 1.4s linear forwards; }
.sp-r1, .sp-r2 { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; min-height: 40px; }
.sp-r1 .sp-bd, .sp-r2 span, .sp-r3 { opacity: 0; transform: translateY(6px); transition: opacity .4s var(--sp-e), transform .5s var(--sp-e); }
.sp-bu.s0 .sp-r1 .sp-bd:nth-child(1), .sp-bu.s1 .sp-r1 .sp-bd:nth-child(2), .sp-bu.s2 .sp-r1 .sp-bd:nth-child(3), .sp-bu.s3 .sp-r2 span, .sp-bu.s3 .sp-r3 { opacity: 1; transform: none; }
.sp-bu.s3 .sp-r2 span:nth-child(2) { transition-delay: .35s; } .sp-bu.s3 .sp-r2 span:nth-child(3) { transition-delay: .7s; } .sp-bu.s3 .sp-r3 { transition-delay: 1.2s; }
.sp-dk .sp-bd.rs { background: #F5F5F7; color: #000; }
.sp-dk .sp-bd.gp { background: transparent; color: #F5F5F7; box-shadow: inset 0 0 0 1.5px rgba(245, 245, 247, .8); }
.sp-dk .sp-bd.gu { background: rgba(255, 255, 255, .12); color: #F5F5F7; }
.sp-r2 span { position: relative; display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px 0 11px; border-radius: 10px; background: rgba(255, 255, 255, .08); font: 500 15px/1 var(--text); color: rgba(255, 255, 255, .72); white-space: nowrap; }
.sp-r2 svg { width: 14px; height: 14px; fill: none; stroke: #FF453A; stroke-width: 2; stroke-linecap: round; }
.sp-r2 span::after { content: ""; position: absolute; left: 32px; right: 13px; top: 50%; height: 1.5px; background: rgba(255, 255, 255, .72); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--sp-e) .5s; }
.sp-bu.s3 .sp-r2 span::after { transform: none; }
.sp-bu.s3 .sp-r2 span:nth-child(2)::after { transition-delay: .85s; } .sp-bu.s3 .sp-r2 span:nth-child(3)::after { transition-delay: 1.2s; }
.sp-r3 { display: flex; align-items: center; gap: 12px; height: 34px; }
.sp-r3 img { width: 30px; height: 30px; }
.sp-dk .sp-mt { background: rgba(255, 255, 255, .12); }
.sp-dk .sp-mt b { background: #0A84FF; }
.sp-bu.s3 .sp-mt b::after { background: #0A84FF; animation: sp-ping 1.8s var(--sp-e) 1.4s infinite; }
.sp-bu.z *, .sp-bu.z *::after { transition: none !important; animation: none !important; }
@keyframes sp-scan { 0% { top: 0; opacity: 1; } 92% { opacity: 1; } 100% { top: calc(100% - 2px); opacity: 0; } }

@media (max-width: 1100px) {
  .sp-card { padding: 44px; }
  .sp-b1 { padding: 48px; }
  .sp-h { font-size: 38px; }
  .sp-stk { padding: 40px; }
  .sp-mem { gap: 44px; }
  .sp-bu { gap: 36px; }
  .sp-col { padding-right: 24px; }
  .sp-col + .sp-col { padding-left: 24px; }
  .sp-col h4 { font-size: 24px; }
}
@media (max-width: 900px) {
  .sp-two, .sp-mem, .sp-bu { grid-template-columns: 1fr; }
  .sp-mem { gap: 40px; }
  .sp-cols { grid-template-columns: 1fr; border-top: 0; }
  .sp-col, .sp-col + .sp-col { padding: 28px 0 28px; box-shadow: none; border-top: .5px solid var(--line2); }
  .sp-col::before { top: -1px; }
  .sp-col:last-child { padding-bottom: 0; }
  .sp-col h4 { margin-top: 20px; }
}
@media (max-width: 560px) {
  .sp-card, .sp-b1 { padding: 28px 22px; }
  .sp-b1 { gap: 32px; }
  .sp-h { font-size: 32px; }
  .sp-p { font-size: 16px; }
  .sp-col p { font-size: 16px; }
  .sp-stk { gap: 26px; padding: 28px 18px; }
  .sp-ly li { height: 54px; padding: 0 14px; font-size: 16px; }
  .sp-ly small { font-size: 14px; }
  .sp-stk.me .sp-ly .sp-bd { height: 28px; padding: 0 10px; font-size: 13px; }
  .sp-bt { font-size: 15px; } .sp-bt small { font-size: 13px; }
  .sp-bd { height: 36px; padding: 0 13px; font-size: 16px; }
  .sp-chips .sp-bd { height: 32px; font-size: 14px; }
  .sp-sl { gap: 20px; } .sp-sl b { font-size: 20px; } .sp-sl span { font-size: 15px; }
  .sp-bu { gap: 28px; }
  .sp-r2 span { font-size: 14px; height: 32px; }
}
@media (prefers-reduced-motion: reduce) {
  .sp-card, .sp-card *, .sp-card *::after { transition: none !important; animation: none !important; }
}