.tools-hero{position:relative;padding-top:73px}.tools-hero-inner{margin:0 var(--rail);padding:144px 24px 96px;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:end}.tools-hero-copy{grid-column:1 / span 7;display:flex;flex-direction:column;gap:20px}.tools-hero-copy .display{max-width:720px;text-wrap:balance}.tools-hero-copy .lead{max-width:560px}.tools-jump{grid-column:9 / span 4;display:flex;flex-direction:column;gap:12px}.tools-jump ul{margin:0;padding:0;list-style:none;border-bottom:1px solid var(--border)}.tools-jump li{border-top:1px solid var(--border)}.tools-jump a{height:48px;padding:0 8px;display:grid;grid-template-columns:40px minmax(0,1fr) auto;align-items:center;font-size:15px;font-weight:500;color:var(--text);border-radius:var(--radius-xs);transition:background-color var(--duration-fast) var(--ease-out)}.tools-jump a:hover{background:var(--muted);color:var(--text)}.tools-jump a:focus-visible{outline-offset:-2px}.tools-jump-n,.tools-jump-count{font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;color:var(--text-muted)}.tools-grid{margin:0 var(--rail);padding:96px 24px 120px;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px}.tools-label{grid-column:1 / span 3;display:flex;flex-direction:column;gap:12px;align-self:start;position:sticky;top:121px}.tools-cat{font-size:var(--text-h3);letter-spacing:var(--tracking-h3);line-height:var(--leading-h3)}.tools-cards{grid-column:5 / span 8;margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--border);border-left:1px solid var(--border)}.tool-card{padding:32px;display:flex;flex-direction:column;gap:12px;border-right:1px solid var(--border);border-bottom:1px solid var(--border);transition:background-color var(--duration-base) var(--ease-out)}.tool-card:hover{background:var(--surface)}.tool-card-used{margin-top:auto;padding-top:12px}.tool-card-mark{position:relative;display:block;width:28px;height:28px;margin-bottom:8px;color:var(--text-muted)}.tool-card-logo{display:block;width:100%;height:100%;background:currentColor;-webkit-mask:var(--logo) center / contain no-repeat;mask:var(--logo) center / contain no-repeat;transition:background-color var(--duration-base) var(--ease-out),opacity var(--duration-base) var(--ease-out)}.tool-card-color{position:absolute;top:0;right:0;bottom:0;left:0;background:url(/assets/logos/figma-color.svg) center / contain no-repeat;opacity:0;transition:opacity var(--duration-base) var(--ease-out)}.tool-card:hover .tool-card-logo{background-color:var(--brand, var(--text))}.tool-card:hover .tool-card-mark--color .tool-card-logo{opacity:0}.tool-card:hover .tool-card-color{opacity:1}@media(max-width:1023px){.tools-hero{padding-top:0}.tools-hero-inner{margin:0;padding:88px 24px 56px 40px;display:flex;flex-direction:column;align-items:stretch;gap:48px}.tools-hero-copy .display{font-size:40px}.tools-grid{margin:0;padding:88px 0 0;display:flex;flex-direction:column;gap:32px}.tools-label{position:static;padding:0 24px 0 40px}.tools-cards{margin-left:24px;grid-template-columns:minmax(0,1fr);border-left:0}.tool-card{padding:32px 24px 40px 16px;border-right:0}.tool-card:last-child{border-bottom:0}}@media(min-width:640px)and (max-width:1023px){.tools-hero-copy .display{font-size:var(--text-display)}.tools-cards{grid-template-columns:repeat(2,minmax(0,1fr))}.tool-card:nth-child(odd){border-right:1px solid var(--border)}.tool-card:nth-last-child(-n+2):nth-child(odd){border-bottom:0}}@property --p{syntax: "<number>"; inherits: false; initial-value: 0;}.vid-sec{margin:0 var(--rail);padding:0 24px 120px}.vid{position:relative;aspect-ratio:16 / 9;overflow:hidden;container-type:inline-size;border:1px solid var(--border);border-radius:var(--radius-lg);background:radial-gradient(55% 65% at 72% 28%,#10b98129,#10b98100 70%),radial-gradient(45% 55% at 18% 85%,#ffffff12,#fff0 70%),var(--surface)}.vid-stage{position:absolute;top:0;right:0;bottom:0;left:0;font-size:1.5cqw}.vid-stage *{animation-duration:16s;animation-iteration-count:infinite;animation-fill-mode:both}.vid-window{position:absolute;left:10%;top:10%;width:80%;height:100%;display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--border-strong);border-radius:.9em;overflow:hidden}.vid-chrome{height:2.6em;flex:none;display:flex;align-items:center;gap:.45em;padding:0 1em;border-bottom:1px solid var(--border)}.vid-chrome>i{width:.6em;height:.6em;border-radius:50%;background:var(--border-strong)}.vid-url{margin-left:.8em;font-family:var(--font-mono);font-size:.68em;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted)}.vid-chrome-r{margin-left:auto;font-family:var(--font-mono);font-size:.62em;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted)}.vid-body{flex:1;min-height:0;display:grid;grid-template-columns:12em minmax(0,1fr)}.vid-steps{margin:0;padding:1em .8em;list-style:none;display:flex;flex-direction:column;gap:.3em;border-right:1px solid var(--border)}.vid-step{display:flex;align-items:center;gap:.7em;padding:.6em .75em;border-radius:.45em;font-size:.9em;font-weight:500;color:var(--text-muted);animation-name:vStep;animation-delay:var(--d)}.vid-logo{width:1.05em;height:1.05em;flex:none;background:currentColor;-webkit-mask:var(--logo) center / contain no-repeat;mask:var(--logo) center / contain no-repeat}.vid-main{position:relative;background:var(--background)}.vid-progress{position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--border)}.vid-progress span{display:block;height:100%;background:var(--accent);transform-origin:left;animation:vBar 4s linear infinite}.vid-scene{position:absolute;top:0;right:0;bottom:0;left:0;padding:1.6em 1.8em;animation-name:vScene;animation-delay:var(--d)}.vid-head{display:flex;align-items:baseline;justify-content:space-between;gap:1em}.vid-title{font-size:1.2em;font-weight:600;letter-spacing:-.02em;color:var(--text)}.vid-tag{font-family:var(--font-mono);font-size:.62em;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);white-space:nowrap}.vid-canvas{position:relative;margin-top:1.4em;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.2em}.vf-frame{height:12em;padding:1em;display:flex;flex-direction:column;gap:.6em;background:var(--surface);border:1px solid var(--border);border-radius:.6em}.vf-label,.vf-k{font-family:var(--font-mono);font-size:.6em;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted)}.vf-btn{align-self:flex-start;padding:.5em .85em;border:1px solid var(--primary);border-radius:.4em;background:var(--primary);color:var(--primary-foreground);font-size:.75em;font-weight:600}.vf-btn--ghost{background:transparent;border-color:var(--border-strong);color:var(--text);font-weight:500}.vf-price{font-size:1.5em;font-weight:600;letter-spacing:-.03em;color:var(--text)}.vf-ln{display:block;width:80%;height:.38em;border-radius:.2em;background:var(--border-strong);opacity:.5}.vf-ln--s{width:55%}.vf-input{padding:.5em .7em;border:1px solid var(--border-strong);border-radius:.4em;font-size:.72em;color:var(--text-muted)}.vf-sel{position:absolute;top:0;bottom:0;left:0;width:calc((100% - 2.4em) / 3);border:1px solid var(--accent);border-radius:.6em;animation-name:vSel;animation-delay:var(--d);animation-timing-function:cubic-bezier(.65,0,.35,1)}.vf-sel i{position:absolute;width:.5em;height:.5em;background:var(--background);border:1px solid var(--accent)}.vf-sel i:nth-child(1){left:-.25em;top:-.25em}.vf-sel i:nth-child(2){right:-.25em;top:-.25em}.vf-sel i:nth-child(3){left:-.25em;bottom:-.25em}.vf-sel i:nth-child(4){right:-.25em;bottom:-.25em}.vf-props{margin-top:1.4em;display:flex;flex-wrap:wrap;gap:.6em 1.8em;font-family:var(--font-mono);font-size:.66em;color:var(--text-muted)}.vf-props b{font-weight:500;color:var(--text)}.vf-props .vf-acc{color:var(--accent)}.vc-split{margin-top:1.2em;display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:1.2em;align-items:start}.vc-code{margin:0;font-family:var(--font-mono);font-size:.74em;line-height:1.8;color:var(--text-muted);white-space:pre;overflow:hidden}.vc-l{display:block;animation-name:vLine;animation-delay:calc(var(--d) + var(--i) * .2s)}.vc-code em{font-style:normal;color:var(--text)}.vc-code s{text-decoration:none;color:var(--accent)}.vc-preview{padding:1em;display:flex;flex-direction:column;gap:.8em;background:var(--surface);border:1px solid var(--border);border-radius:.6em}.vc-card{padding:1em;display:flex;flex-direction:column;gap:.6em;border:1px solid var(--border-strong);border-radius:.5em;animation-name:vPop;animation-delay:calc(var(--d) + .6s)}.vp-checks{margin:1.4em 0 0;padding:0;list-style:none;border:1px solid var(--border);border-radius:.6em;overflow:hidden}.vp-checks li{display:flex;align-items:center;gap:.8em;padding:.85em 1em;border-bottom:1px solid var(--border);font-size:.85em;color:var(--text)}.vp-checks li:last-child{border-bottom:0}.vp-dot{width:.6em;height:.6em;flex:none;border-radius:50%;border:1px solid var(--border-strong)}.vp-checks .vp-dot{animation-name:vDot;animation-delay:calc(var(--d) + var(--i) * .6s)}.vp-dot--on{background:var(--accent);border-color:var(--accent)}.vp-ok{margin-left:auto;font-family:var(--font-mono);font-size:.7em;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);animation-name:vOk;animation-delay:calc(var(--d) + var(--i) * .6s)}.vp-merge{margin-top:1em;display:flex;align-items:center;gap:.8em;padding:.85em 1em;border:1px solid var(--border);border-radius:.6em;font-size:.85em;color:var(--text);animation-name:vPop;animation-delay:calc(var(--d) + 1.3s)}.vp-merge .vid-tag{margin-left:auto}.vid-ship>.vid-tag{display:block;margin-top:1.4em}.vs-rings{margin:1em 0 .4em;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1em}.vs-ring{display:flex;flex-direction:column;align-items:center;gap:.7em}.vs-ring span{position:relative;isolation:isolate;width:4.6em;height:4.6em;display:grid;place-items:center;border-radius:50%;font-size:1em;font-weight:600;color:var(--text);background:conic-gradient(var(--text) calc(var(--p) * 3.6deg),var(--border) 0);animation-name:vRing;animation-delay:var(--d);animation-timing-function:cubic-bezier(.25,1,.5,1)}.vs-ring span:before{content:"";position:absolute;top:.24em;right:.24em;bottom:.24em;left:.24em;z-index:-1;border-radius:50%;background:var(--background)}.vs-ring em{font-style:normal;font-family:var(--font-mono);font-size:.6em;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted)}.vs-status{animation-delay:calc(var(--d) + 1.6s)}.vs-status .vid-tag{margin-left:auto}.vid-float{position:absolute;right:6%;bottom:9%;width:21%;padding:1em 1.1em;display:flex;flex-direction:column;gap:.4em;background:var(--surface);border:1px solid var(--border-strong);border-radius:.7em;animation-name:vFloat;animation-delay:var(--d)}.vid-float b{font-size:1.15em;font-weight:600;letter-spacing:-.02em;color:var(--text)}.vid-float-meta{display:flex;align-items:center;gap:.5em;font-size:.72em;color:var(--text-muted)}.vid-toggle{position:absolute;right:16px;bottom:16px;z-index:2;width:40px;height:40px;display:grid;place-items:center;padding:0;border:1px solid var(--border-strong);border-radius:50%;background:var(--background);color:var(--text);cursor:pointer;transition:background-color var(--duration-fast) var(--ease-out)}.vid-toggle:hover{background:var(--muted)}.vid-i-play{display:none}.vid.is-paused .vid-i-play{display:block}.vid.is-paused .vid-i-pause{display:none}.vid.is-paused .vid-stage *,.vid.is-offscreen .vid-stage *{animation-play-state:paused}@media(prefers-reduced-motion:reduce){.vid:not([data-ready]) .vid-stage *{animation-play-state:paused}}@keyframes vScene{0%,22%{opacity:1;transform:none}25%{opacity:0;transform:translateY(-.6em)}97%{opacity:0;transform:translateY(.6em)}to{opacity:1;transform:none}}@keyframes vStep{0%,22%,to{background:var(--muted);color:var(--text)}25%,97%{background:transparent;color:var(--text-muted)}}@keyframes vBar{0%{transform:scaleX(0)}to{transform:scaleX(1)}}@keyframes vSel{0%,6%{transform:none}9%,14%{transform:translate(calc(100% + 1.2em))}17%,24%{transform:translate(calc(200% + 2.4em))}to{transform:none}}@keyframes vLine{0%{opacity:0;transform:translate(-.5em)}2%,23%{opacity:1;transform:none}25%,to{opacity:0}}@keyframes vPop{0%,8%{opacity:0;transform:translateY(.6em)}11%,23%{opacity:1;transform:none}25%,to{opacity:0}}@keyframes vDot{0%,4%{background:transparent;border-color:var(--border-strong)}6%,23%{background:var(--accent);border-color:var(--accent)}25%,to{background:transparent;border-color:var(--border-strong)}}@keyframes vOk{0%,5%{opacity:0}7%,23%{opacity:1}25%,to{opacity:0}}@keyframes vRing{0%{--p: 0}12%,23%{--p: var(--to)}25%,to{--p: 0}}@keyframes vFloat{0%,7%{opacity:0;transform:translateY(1.2em)}10%,22%{opacity:1;transform:none}25%,to{opacity:0;transform:translateY(.6em)}}@media(max-width:1023px){.vid-sec{margin:0 0 0 24px;padding:0 24px 64px 16px}.vid{aspect-ratio:4 / 5}.vid-stage{font-size:2.9cqw}.vid-window{left:7%;top:8%;width:150%}.vid-float{left:7%;right:auto;bottom:6%;width:58%}}