article a.docs-card{border:var(--pluto-border);background:var(--pluto-gray-l0);border-radius:1rem;flex-direction:column;gap:.75rem;padding:3rem 3.5rem 3.5rem;text-decoration:none;transition:border-color .15s,background .15s;display:flex;&:hover{border-color:var(--pluto-gray-l6);background:var(--pluto-gray-l1);text-decoration:none;& .docs-card__icon{color:var(--pluto-primary-z)}}& .docs-card__icon{color:var(--pluto-gray-l8);margin-bottom:1rem;transition:color .15s;display:flex;& .pluto-icon{width:4rem;height:4rem}}}.docs-choice{border:var(--pluto-border);background:var(--pluto-gray-l1);border-radius:1rem;flex-direction:column;align-items:flex-start;gap:1rem;padding:3.5rem;display:flex;&[data-primary=true]{border-color:var(--pluto-primary-z)}& .docs-choice__title{margin:0}& .docs-choice__icon{color:var(--pluto-gray-l9);margin-bottom:1rem;display:flex;& .pluto-icon{width:4rem;height:4rem}}& .docs-choice__description{padding-bottom:4rem}& .pluto-btn{margin-top:auto}}main>section:has(.docs-landing__stage),article:has(.docs-landing__stage){overflow-x:visible}main:has(.docs-landing__stage){overflow-x:clip}.docs-landing{& .docs-landing__lead p{font-size:var(--pluto-h5-size);color:var(--pluto-gray-l10);max-width:120rem;line-height:1.6}& .docs-landing__uses{grid-template-columns:repeat(2,minmax(0,1fr));gap:3rem 4rem;margin-top:5rem;display:grid;@media (width<=600px){grid-template-columns:1fr}}& .docs-landing__start{grid-template-columns:repeat(2,minmax(0,1fr));gap:2rem;margin-top:6rem;display:grid;@media (width<=600px){grid-template-columns:1fr}}& .docs-landing__note{text-align:center;color:var(--pluto-gray-l8);font-size:var(--pluto-small-size);margin-top:2.5rem}}.docs-landing__stage{--w:clamp(100% * 4 / 3, 100vw - var(--docs-page-nav-width) - 10rem, 1200px);--u:calc(100cqw / 1200);--x0:calc(150 * var(--u));--x1:calc(var(--x0) + 900 * var(--u));--y0:calc(16 * var(--u));--y1:calc(var(--y0) + 562.5 * var(--u));--ink:var(--pluto-gray-l4);width:var(--w);aspect-ratio:1200/600;margin:-6rem 0 2rem calc((100% - var(--w)) / 2);position:relative;container-type:inline-size}.docs-landing__grid,.docs-landing__lines{z-index:-1;inset:calc(-60 * var(--u)) calc(-80 * var(--u));opacity:.7;position:absolute}.docs-landing__grid{background:linear-gradient(var(--pluto-gray-l3) 1px, transparent 1px) 0 0 / calc(40 * var(--u)) calc(40 * var(--u)), linear-gradient(90deg, var(--pluto-gray-l3) 1px, transparent 1px) 0 0 / calc(40 * var(--u)) calc(40 * var(--u));mask-image:radial-gradient(60% 60% at 50% 45%,#000 35%,#0000 100%),linear-gradient(#0003,#000 25%);mask-composite:intersect}.docs-landing__lines{--dx:calc(80 * var(--u));--dy:calc(60 * var(--u));background:linear-gradient(var(--ink), var(--ink)) calc(var(--x0) + var(--dx) - 1px) 0 / 1px 100% no-repeat, linear-gradient(var(--ink), var(--ink)) calc(var(--x1) + var(--dx)) 0 / 1px 100% no-repeat, linear-gradient(var(--ink), var(--ink)) 0 calc(var(--y0) + var(--dy) - 1px) / 100% 1px no-repeat, linear-gradient(var(--ink), var(--ink)) 0 calc(var(--y1) + var(--dy)) / 100% 1px no-repeat;mask-image:linear-gradient(90deg,#0000,#000 12% 88%,#0000),linear-gradient(#0000,#000 12% 88%,#0000);mask-composite:intersect}.docs-landing__media{top:var(--y0);left:var(--x0);width:calc(900 * var(--u));border-radius:calc(10 * var(--u));box-shadow:0 0 0 1px var(--pluto-gray-l3), 0 30px 60px -30px #00000073;position:absolute;overflow:hidden;& img{width:100%;height:auto;margin:0;display:block}}.docs-landing__tick{opacity:.7;background:linear-gradient(var(--pluto-gray-l8), var(--pluto-gray-l8)) center / 100% 1px no-repeat, linear-gradient(var(--pluto-gray-l8), var(--pluto-gray-l8)) center / 1px 100% no-repeat;width:11px;height:11px;position:absolute;translate:-50% -50%;&[data-corner^=t]{top:var(--y0)}&[data-corner^=b]{top:var(--y1)}&[data-corner$=l]{left:var(--x0)}&[data-corner$=r]{left:var(--x1)}}@media (width<=1100px){.docs-landing__stage{aspect-ratio:auto;width:auto;margin:2rem 0 6rem}.docs-landing__grid,.docs-landing__lines,.docs-landing__tick{display:none}.docs-landing__media{border-radius:1rem;width:100%;position:static}}.docs-use{border-left:2px solid var(--pluto-primary-z);flex-direction:column;gap:.75rem;padding-left:2rem;display:flex}