
body.home{background:#fff}
.home main > section{background:#fff;color:var(--ink)}
.home{--gut:calc((100vw - min(1120px, 87.5vw)) / 2)}

.home .sec-head{display:flex;justify-content:space-between;align-items:last baseline;gap:var(--s-12) var(--s-24);flex-wrap:wrap} 
.home .sec-head .links{display:flex;gap:var(--s-24)}
.home .sec-head .links{align-items:last baseline}.home .sec-head .more{align-items:last baseline}.home .sec-head .more::after{align-self:center} 

.page .btn.pro{background:var(--pro);color:var(--pro-on)}
@media (hover:hover){.page .btn.pro:hover{background:var(--pro-hover)}.page .btn.pro-outline:hover{background:rgba(2,138,238,.06)}}
.page .btn.pro:active{background:var(--pro-active)}
.page .btn.pro-outline{border:1.5px solid var(--pro-ink);color:var(--pro-ink)}
.home .dark .btn.outline{border-color:var(--neu-ink-dark);color:var(--neu-ink-dark)}
.home .dark .btn.pro-outline{border-color:var(--pro-ink-dark);color:var(--pro-ink-dark)}
.page .btn.sm{min-height:var(--btn-h-sm)} 
html .hc-car{animation:none}
.hc-g > .hc{--k:0}.hc-g > .hc:nth-child(2){--k:1}.hc-g > .hc:nth-child(3){--k:2}.hc-g > .hc:nth-child(4){--k:3}.hc-g > .hc:nth-child(5){--k:4}.hc-g > .hc:nth-child(6){--k:5}
.hc-g > .hc{animation:ca-wave 1000ms cubic-bezier(.3,1.25,.5,1) calc(900ms + var(--k) * 90ms) both}
.hc-g > .hc .hc-m{animation:ca-in 900ms cubic-bezier(.2,.8,.2,1) calc(1150ms + var(--k) * 90ms) both}
@keyframes ca-wave{from{opacity:0;transform:translateY(120px) scale(.96)}40%{opacity:1}to{opacity:1;transform:none}}
@keyframes ca-in{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.hc-g > .hc,.hc-g > .hc .hc-m{animation:none}}
.hh-si{display:flex;gap:var(--s-8)}
.hh-si a{display:flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:50%;background:#fff;color:var(--ink);
  transition:background-color .15s var(--ease)}
.hh-si svg{width:24px;height:24px;fill:currentColor;transition:color .15s var(--ease),fill .15s var(--ease)}
.hh-si .s-ig{width:23px;height:23px}.hh-si .s-th{width:23px;height:23px}.hh-si .s-tg{width:25px;height:25px;translate:-2px 0} 
.hh-si .sn-tg{--bc:var(--pro)}.hh-si .sn-ig{--bc:#D62976}.hh-si .sn-th{--bc:currentColor} 
@media (hover:hover){.hh-si a:hover svg{color:var(--bc)}.hh-si a.sn-ig:hover svg{fill:url(#ig-g)}.hh-si a:hover,.hh-si a:hover svg{transition:none}} 
.hh-si a:focus-visible{outline:2px solid var(--neu);outline-offset:2px}
.hc-car{grid-area:cards;min-width:0}
.hc-g{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap-tile)}
.hc{position:relative;display:flex;flex-direction:column;min-height:168px;padding:var(--s-24);border-radius:var(--r-card);background:#fff;color:var(--ink);overflow:hidden}
.hc-h{display:flex;justify-content:space-between;align-items:center;gap:var(--s-12);min-height:28px}
.hc-k{font:var(--text-callout);font-weight:600;letter-spacing:var(--track-callout);color:var(--ink2)}
.hc-k.pro{color:var(--pro-ink)}.hc-k.lab{color:var(--lab-ink)}
.hc-ic{flex:none;width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;color:var(--ink2)}
.hc.pro .hc-ic{color:var(--pro-ink)}.hc.lab .hc-ic{color:var(--lab-ink)}
.hc-t{margin-top:var(--s-12);font:600 19px/24px var(--font-sans);letter-spacing:-.01em;text-wrap:balance}
.hc .more{align-self:flex-start;margin-top:auto;padding-top:var(--s-16);font:var(--text-callout);letter-spacing:var(--track-callout);color:var(--neu-ink)}
.hc.lab .more{color:var(--lab-ink)}
@media (hover:hover){.hc .more:hover > span{border-bottom-color:var(--hover-line)}}
.hc-m{display:none}

.hc-rib{display:flex;flex-direction:column;justify-content:flex-end;gap:8px;align-self:stretch;width:100%;margin-bottom:28px;overflow:hidden;
  -webkit-mask:linear-gradient(90deg,transparent,#000 16%,#000 84%,transparent);mask:linear-gradient(90deg,transparent,#000 16%,#000 84%,transparent)}
.hc-rib > span{display:flex;width:max-content;animation:hc-run 48s linear infinite}
.hc-rib > span:nth-child(2){animation-duration:56s;animation-direction:reverse}
.hc-rib img{flex:none;width:144px;height:81px;margin-right:8px;border-radius:10px;object-fit:cover} 
@keyframes hc-run{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.hc-rib > span{animation:none}}
.hc-tasks{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;gap:8px;padding-bottom:24px;overflow:hidden;
  -webkit-mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent),linear-gradient(180deg,transparent,#000 16%);-webkit-mask-composite:source-in;
  mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent) intersect,linear-gradient(180deg,transparent,#000 16%)}
.hc-tasks > span{display:flex;justify-content:center;gap:8px;transform:translateX(var(--sx))}
.hc-tasks > span{--sx:0px}.hc-tasks > span:nth-child(2n){--sx:26px} 
.hc-tasks i{position:relative;flex:none;display:flex;align-items:center;gap:8px;padding:5px 14px 5px 5px;border-radius:999px;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.07);
  font:600 14px/20px var(--font-sans);font-style:normal;color:#1d1d1f;white-space:nowrap}
.hc-tasks img{width:28px;height:28px;border-radius:8px}
.hc-tasks i::after{content:"";position:absolute;inset:0;border-radius:inherit;opacity:0;pointer-events:none} 
.hc-tasks i.tap{animation:la-tap 700ms cubic-bezier(.3,1.4,.5,1)}
.hc-tasks i.tap img{animation:la-icon 800ms cubic-bezier(.3,1.4,.5,1)}
.hc-tasks i.tap::after{animation:la-ring 1000ms cubic-bezier(.2,.7,.2,1)}
@keyframes la-tap{25%{transform:scale(.93)}}
@keyframes la-icon{30%{transform:scale(.86)}65%{transform:scale(1.1)}}
@keyframes la-ring{from{opacity:1;box-shadow:0 0 0 0 rgba(0,0,0,.14)}to{opacity:0;box-shadow:0 0 0 16px rgba(0,0,0,0)}}
@media (prefers-reduced-motion:reduce){.hc-tasks i,.hc-tasks i img,.hc-tasks i::after{animation:none}}
.hc-glow{position:absolute;inset:0;background:radial-gradient(60% 70% at 50% 92%, rgba(255,255,255,.16), rgba(255,255,255,0) 70%)}
.hc-ask{position:relative;display:flex;align-items:center;gap:10px;width:calc(100% - 56px);height:52px;margin-bottom:var(--s-40);padding:0 8px 0 16px;border-radius:26px;
  background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.hc-ask svg{flex:none;width:20px;height:20px;fill:none;stroke:#a1a1a6;stroke-width:2.6;stroke-linejoin:round}
.hc-askt{flex:1;min-width:0;font:var(--text-callout);color:#a1a1a6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hc-ask i{flex:none;width:36px;height:36px;border-radius:50%;background:#3a3a3c}
.hc-st{display:block;height:210px;width:auto}
html .hc.dev{--ink:#fff;--ink2:rgba(255,255,255,.82);background:var(--lab)} 
html .hc.dev :is(.hc-k,.hc-ic,.more){color:#fff}
.hc-code{display:block;width:calc(100% - 56px);height:176px;padding:14px 16px;border-radius:14px 14px 0 0;background:#1d1d1f;box-sizing:border-box;overflow:hidden}
.hc-dots{display:flex;gap:6px;margin-bottom:6px}.hc-dots i{width:9px;height:9px;border-radius:50%;background:#ff5f57}.hc-dots i:nth-child(2){background:#febc2e}.hc-dots i:nth-child(3){background:#28c840}
.hc-clip{display:block;height:calc(100% - 15px);overflow:hidden} 
.hc-lines{display:block}
.hc-lines.up{transform:translateY(-18px);transition:transform .45s cubic-bezier(.4,0,.2,1)} 
.hc-code .cl{display:flex;align-items:center;gap:4px;height:8px;margin-top:10px;padding-left:var(--x)}
.hc-code .cl i{flex:none;display:block;width:var(--w);height:8px;border-radius:4px;background:#86868b;transition:width .7s steps(7,end)}
.hc-code .cl.new i{width:0;transition:none}
.hc-code .cl.cur::after{content:"";flex:none;width:2px;height:13px;border-radius:1px;background:#f5f5f7;animation:hc-blink 1s steps(1) infinite}
.hc-code .cl i.k{background:var(--lab-ink-dark)}.hc-code .cl i.s{background:var(--pro-ink-dark)}.hc-code .cl i.f{background:#c792ea}
@keyframes hc-blink{50%{opacity:0}}
.hc-reel{position:relative;width:calc(100% - 56px);margin-bottom:28px}
.hc-reel .fr{position:relative;display:block;border-radius:12px;overflow:hidden;line-height:0;background:#d2d2d7}
.hc-reel video{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.hc-reel .ad{position:absolute;top:8px;left:8px;padding:3px 8px;border-radius:6px;background:rgba(0,0,0,.55);font:600 11px/14px var(--font-sans);color:#fff;line-height:14px}
.hc-reel .bar{position:relative;display:block;height:6px;margin-top:14px;border-radius:3px;background:#d2d2d7}
.hc-reel .sg{position:absolute;left:38%;width:28%;top:0;bottom:0;border-radius:3px;background:var(--pro)} 
.hc-reel .sg b{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);padding:4px 10px;border-radius:99px;background:var(--pro);box-shadow:0 4px 12px rgba(2,138,238,.35);
  font:600 12px/16px var(--font-sans);color:#fff;white-space:nowrap}
.hc-reel .pk{position:absolute;top:-4px;left:38%;width:14px;height:14px;margin-left:-7px;border-radius:50%;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.3)}
@media (prefers-reduced-motion:reduce){.hc-code .cl.cur::after{animation:none}}

.hc-hl,.hc-act,.hc-sr{display:none}
.page section.hcs{display:block;padding:var(--gap-tile) 0 var(--sec)} 
.page section.hcs > .wrap{max-width:none;padding:0 var(--gap-tile)} 
.hcs .hc-g{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap-tile)}
.hcs .hc{min-height:580px;padding:var(--s-56) var(--s-40) 0;align-items:center;text-align:center;background:var(--bg2);animation:none}
.hcs .hc:is(.lab:not(.dev),.ads){background:#E8E8ED}
.hcs .hc.dkc{--ink:#f5f5f7;--ink2:#86868b;background:#000}
.hcs .hc-h{justify-content:center;min-height:0}
.hcs .hc-ic{display:none} 
.hcs .hc-k{font:var(--text-body);font-weight:600;letter-spacing:var(--track-body)}
.hcs .hc.dkc .hc-k.pro{color:var(--pro-ink-dark)}
.hcs .hc-k.host{color:#F5B94A}
.hcs .hc-k.ai{color:#A4F000}
.hcs .hc-hl{display:block;margin-top:4px;font:var(--text-headline);letter-spacing:var(--track-headline);text-wrap:balance}
.hcs .hc-t{max-width:460px;margin-top:8px;font:var(--text-lead);letter-spacing:var(--track-lead)}
.hcs .hc .more{display:none} 
.hcs .hc .more.hc-sr{display:inline-flex;align-self:center;margin-top:var(--s-16);padding:0;color:var(--neu-ink-dark)} 
.hcs .hc-act{display:flex;justify-content:center;margin-top:var(--s-20)}
.hcs .dkc .btn.outline{border-color:var(--neu-ink-dark);color:var(--neu-ink-dark)}
.hcs .hc.dev .btn.neutral{background:#fff;color:var(--lab)}.hcs .hc.dev .btn.outline{border-color:#fff;color:#fff}
@media (hover:hover){.home .dark .btn.outline:hover,.hcs .dkc .btn.outline:hover{background:var(--neu-ink-dark);color:#fff}.hcs .hc.dev .btn.outline:hover{background:#fff;color:var(--lab)}}
.hcs .hc-m{position:relative;display:flex;justify-content:center;align-items:flex-end;align-self:stretch;min-height:280px;margin:auto calc(-1 * var(--s-40)) 0;padding-top:var(--to-media)}
.hcs .hc-g > .hc .hc-m{animation:none} 
.hcs .hc-rib img{width:192px;height:108px}
.hcs :is(.hc-ask,.hc-code){max-width:440px;text-align:left} 
.hcs .hc-code{height:220px}
.hcs .hc-reel{max-width:400px}
.hcs .hc-st{height:280px}
@media (max-width:1068px){
  .hcs .hc{min-height:520px;padding:var(--s-40) var(--s-24) 0}
  .hcs .hc-m{min-height:240px;margin-inline:calc(-1 * var(--s-24))}
  .hcs .hc-rib img{width:144px;height:81px}
  .hcs .hc-st{height:220px}
  .hcs .hc-code{height:190px}
}
@media (max-width:734px){
  .hcs .hc-g{grid-template-columns:minmax(0,1fr)}
  .hcs .hc{min-height:500px}
}
.hcs .hc.soon{--ai:#A4F000;--ink2:#a1a1a6}
.hcs .hc.soon > :not(.hc-glow){position:relative}
.hcs .hc.soon .hc-glow{pointer-events:none}
.hcs .hc.soon .ai-q{width:100%;max-width:460px;margin:var(--s-32) auto 0;padding:0;background:none;box-shadow:none;text-align:left}
.hcs .hc.soon .ai-qf :is(.ai-qh,.ai-qs,.ai-ql){position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.hcs .hc.soon .ai-taw{margin-top:0}
.hcs .hc.soon .ai-ta{height:88px}
.hcs .hc.soon .ai-note{margin-top:var(--s-12);text-align:center}
.hcs .hc.soon .ai-ok{align-items:center;text-align:center}
.hc-nn{display:block;align-self:stretch;margin:auto calc(-1 * var(--s-40)) 0;padding-top:var(--s-32);
  -webkit-mask:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);mask:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent)}
.nn{display:block;width:100%;height:156px} 
@media (max-width:1068px){.hc-nn{margin-inline:calc(-1 * var(--s-24))}.nn{height:118px}} 
@media (max-width:734px){.nn{height:124px}}

html.js-rv .hcs .hc.host .hc-st{opacity:0;transform-origin:50% 100%}
html.js-rv .hcs .hc.host.in .lit .hc-st{animation:hp-on 2400ms cubic-bezier(.33,0,.2,1) 150ms both}
@keyframes hp-on{0%{opacity:0;transform:scale(1.03)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){html.js-rv .hcs .hc.host .hc-st,html.js-rv .hcs .hc.host.in .lit .hc-st{opacity:1;animation:none}}


.home main > .prox{--ink:#f5f5f7;--ink2:#a1a1a6;--ex:0;background:#000;color:var(--ink);padding:var(--sec) 0;overflow:hidden;
  clip-path:inset(calc((1 - var(--ex)) * var(--sec) * .5) calc((1 - var(--ex)) * max(12px, var(--gut) - 48px)) round calc(var(--r-card) * min(1, (1 - var(--ex)) / .15)))} 
.home main > .prox > .wrap{transform:scale(calc(.94 + .06 * var(--ex)));transform-origin:50% 40%}
.pvl{display:block;width:150px;height:auto} 
.prox-l{max-width:560px;text-wrap:balance;margin-top:var(--s-16);font:var(--text-lead);letter-spacing:var(--track-lead);color:var(--ink2)}
.prox-go{display:flex;flex-wrap:wrap;gap:var(--s-8) var(--s-24);font:var(--text-body)}.prox .more{color:var(--neu-ink-dark)}
.prox-e{font:var(--text-body);font-weight:600;letter-spacing:var(--track-body);color:var(--pro-ink-dark)}
.py-h{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:var(--s-16) var(--s-40)}
.py-g{display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);gap:var(--s-40);margin-top:var(--s-56)}
.py-pl{position:relative;display:block;overflow:hidden;border-radius:var(--r-inner);line-height:0}.py-pl img{display:block;width:100%;height:auto}
.py-pl:focus-visible{outline:2px solid var(--neu-ink-dark);outline-offset:3px}
.py-pl::after{content:"";position:absolute;inset:auto 0 0;height:45%;background:linear-gradient(0deg,rgba(0,0,0,.5),rgba(0,0,0,0));pointer-events:none}
.py-go{position:absolute;z-index:1;left:20px;bottom:20px;display:flex;align-items:center;gap:6px;padding:10px 20px 10px 14px;border-radius:999px;
  background:rgba(255,255,255,.9);-webkit-backdrop-filter:blur(16px) saturate(1.6);backdrop-filter:blur(16px) saturate(1.6);box-shadow:0 6px 20px rgba(0,0,0,.25);
  font:600 17px/22px var(--font-sans);color:#1d1d1f;line-height:22px;transition:background-color var(--dur-fast) var(--ease)}
.py-go svg{width:22px;height:22px;fill:currentColor}
@media (hover:hover){.py-pl:hover .py-go{background:#fff}}
.py-m .prox-e{margin-top:var(--s-20)}
.py-t{margin-top:6px;font:600 32px/38px var(--font-sans);letter-spacing:-.01em;color:#f5f5f7;text-wrap:balance}
.py-n{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s-16)}
.py-nh{font:600 17px/22px var(--font-sans);color:#f5f5f7}
.py-r{display:grid;grid-template-columns:160px minmax(0,1fr);gap:12px;align-items:start;width:100%;color:#f5f5f7}
.py-r .th{display:block;overflow:hidden;border-radius:10px;line-height:0}
.py-r img{display:block;width:160px;height:90px;object-fit:cover;transition:transform var(--dur-base) var(--ease)}
.py-r > span:last-child{display:flex;flex-direction:column;gap:4px;font:400 13px/18px var(--font-sans);color:#a1a1a6}
.py-r b{font:600 15px/20px var(--font-sans);color:#f5f5f7;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
@media (hover:hover){.py-r:hover img{transform:scale(1.05)}}
.py-r:focus-visible{outline:2px solid var(--neu-ink-dark);outline-offset:4px;border-radius:10px}
@media (max-width:1068px){.py-g{grid-template-columns:1fr}.py-n{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-20)}.py-nh,.py-n > .more{grid-column:1/-1}}
@media (max-width:734px){.py-g{margin-top:var(--s-40)}.py-t{font-size:24px;line-height:30px}.py-n{display:flex}
  .py-r{grid-template-columns:132px minmax(0,1fr)}.py-r img{width:132px;height:74px}
  .py-go{left:12px;bottom:12px;padding:7px 14px 7px 10px;font-size:15px;line-height:20px}.py-go svg{width:18px;height:18px}}

@media (max-width:1068px){
  .hc{min-height:156px;padding:var(--s-20)}
  .hc-t{font-size:17px;line-height:22px}
}
@media (max-width:734px){
  .prox-l{margin-top:var(--s-12);font:var(--text-body)}
  .hh-si{gap:6px}
  .hh-si a{width:44px;height:44px}
}
