.shape--circle{background:var(--shape-fill);border-radius:50%;width:65%;height:65%}.shape--square{background:var(--shape-fill);width:60%;height:60%}.shape--triangle{border:3em solid #0000;border-bottom:5em solid var(--shape-fill);width:0;height:0;transform:scale(.75)translateY(-25px)}@media (min-width:536px){.shape--triangle{transform:scale(.85)translateY(-20px)}}@media (min-width:642px){.shape--triangle{transform:scale(1)translateY(-20px)}}@media (min-width:999px){.shape--triangle{transform:scale(1.25)translateY(-23px)}}.shape--pentagon{box-sizing:content-box;border-style:solid;border-width:51px 18px 0;border-color:var(--shape-fill)transparent;background:0 0;width:54px;position:relative;transform:scale(.8)translateY(18px)}@media (min-width:536px){.shape--pentagon{transform:scale(.9)translateY(18px)}}@media (min-width:642px){.shape--pentagon{transform:scale(1.1)translateY(18px)}}@media (min-width:999px){.shape--pentagon{transform:scale(1.3)translateY(18px)}}.shape--pentagon:before{content:"";border-style:solid;border-width:0 45px 35px;border-color:transparent transparent var(--shape-fill);width:0;height:0;position:absolute;top:-85px;left:-18px}.shape--oval{background:var(--shape-fill);border-radius:50%;width:50%;height:70%}.shape--rectangle{background:var(--shape-fill);width:45%;height:65%}.shape--trapezoid{border-bottom:65px solid var(--shape-fill);background:0 0;border-left:30px solid #0000;border-right:30px solid #0000;width:125px;height:0;transform:scale(.7)}@media (min-width:536px){.shape--trapezoid{border-bottom:80px solid var(--shape-fill);transform:scale(.7)}}@media (min-width:642px){.shape--trapezoid{transform:scale(.8)}}@media (min-width:999px){.shape--trapezoid{transform:scale(1)}}.shape--parallelogram{background:var(--shape-fill);width:53%;height:53%;transform:skew(20deg)}.shape--hexagon{background:var(--shape-fill);width:104px;height:62px;margin-top:30px;position:relative;transform:scale(.62)translateY(-22px)}@media (min-width:536px){.shape--hexagon{transform:scale(.7)translateY(-18px)}}@media (min-width:642px){.shape--hexagon{transform:scale(.85)translateY(-13px)}}@media (min-width:999px){.shape--hexagon{transform:translateY(-10px)}}.shape--hexagon:before{content:" ";border-bottom:30.5px solid var(--shape-fill);border-left:52px solid #0000;border-right:52px solid #0000;width:0;height:0;position:absolute;top:-30px}.shape--hexagon:after{content:"";border-top:30px solid var(--shape-fill);border-left:52px solid #0000;border-right:52px solid #0000;width:0;position:absolute;bottom:-29.5px}.shape--octagon{background:var(--shape-fill);width:100px;height:100px;position:relative;transform:scale(.7)}@media (min-width:536px){.shape--octagon{transform:scale(.8)}}@media (min-width:642px){.shape--octagon{transform:scale(.92)}}@media (min-width:999px){.shape--octagon{transform:scale(1.1)}}.shape--octagon:before{content:"";border-bottom:29px solid var(--shape-fill);border-left:29px solid var(--tile-bg);border-right:29px solid var(--tile-bg);width:100px;height:0;position:absolute;top:0;left:0}.shape--octagon:after{content:"";border-top:29px solid var(--shape-fill);border-left:29px solid var(--tile-bg);border-right:29px solid var(--tile-bg);width:100px;height:0;position:absolute;bottom:0;left:0}.shape--star{border-left:100px solid #0000;border-right:100px solid #0000;border-bottom:70px solid var(--shape-fill);background:0 0;width:0;height:0;margin:50px 0;display:block;position:relative;transform:rotate(35deg)scale(.4)}@media (min-width:536px){.shape--star{transform:rotate(35deg)scale(.48)}}@media (min-width:642px){.shape--star{transform:rotate(35deg)scale(.55)}}@media (min-width:999px){.shape--star{transform:rotate(35deg)scale(.65)}}.shape--star:before{content:"";border-left:30px solid #0000;border-right:30px solid #0000;border-bottom:80px solid var(--shape-fill);width:0;height:0;display:block;position:absolute;top:-45px;left:-65px;transform:rotate(-35deg)}.shape--star:after{content:"";border-left:100px solid #0000;border-right:100px solid #0000;border-bottom:70px solid var(--shape-fill);width:0;height:0;display:block;position:absolute;top:3px;left:-105px;transform:rotate(-70deg)}.shape--heart{background:var(--shape-fill);width:30px;height:30px;margin:0 10px;display:inline-block;position:relative;transform:translateY(10px)rotate(-45deg)scale(1.35)}@media (min-width:536px){.shape--heart{transform:translateY(10px)rotate(-45deg)scale(1.55)}}@media (min-width:642px){.shape--heart{transform:translateY(10px)rotate(-45deg)scale(1.9)}}@media (min-width:999px){.shape--heart{transform:translateY(10px)rotate(-45deg)scale(2.15)}}.shape--heart:before,.shape--heart:after{content:"";background:var(--shape-fill);border-radius:50%;width:30px;height:30px;position:absolute}.shape--heart:before{top:-17px;left:0}.shape--heart:after{top:0;left:17px}
.shape-cover{padding:var(--space-7)var(--space-5)0;margin:0}.shape-cover-grid{grid-template-columns:repeat(6,minmax(0,1fr));display:grid}.shape-cover .shape-tile{--tile-bg:var(--tile-soft);--shape-fill:var(--tile-bold);aspect-ratio:1;background:var(--tile-bg);color:var(--charcoal);transition:background-color var(--motion-hover-duration)var(--motion-hover-ease);border-radius:0;justify-content:center;align-items:center;text-decoration:none;display:flex;position:relative;overflow:hidden}.shape-tile:hover,.shape-tile:focus-visible{--tile-bg:var(--tile-bold);--shape-fill:var(--cream);color:var(--cream)}.shape-tile-number{z-index:1;top:var(--space-3);left:var(--space-3);align-items:center;gap:var(--space-2);font-size:.75rem;font-weight:var(--font-medium);letter-spacing:.04em;display:inline-flex;position:absolute}.shape-tile-number:before{content:"";background:currentColor;width:5px;height:9px}.shape-cover-caption{margin-top:var(--space-2);color:var(--text-muted);font-size:.8125rem}@media (max-width:1023px){.shape-cover{padding:var(--space-6)var(--space-4)0}.shape-cover-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.shape-tile-number{top:var(--space-2);left:var(--space-2)}}.shape-cover .shape--rectangle{height:56%;margin-top:8%}@media (prefers-reduced-motion:reduce){.shape-tile{transition:none}}
.demo,.demo:before,.demo:after{box-sizing:content-box}.demo{--part-a:var(--demo-fill);--part-b:var(--demo-fill);--part-c:var(--demo-fill);--part-d:var(--demo-fill);position:relative}.demo--circle-1,.demo--circle-2,.demo--circle-3{background:var(--demo-fill);width:64px;height:64px}.demo--circle-2{border-radius:25%}.demo--circle-3{border-radius:50%}.demo--square-1{outline:1px dashed var(--charcoal);width:6px;height:6px}.demo--square-2{outline:1px dashed var(--charcoal);width:60px;height:60px}.demo--square-3{background:var(--demo-fill);width:60px;height:60px}.demo--triangle-1,.demo--triangle-2,.demo--triangle-3{width:0;height:0}.demo--triangle-1{border-top:36px solid var(--marigold-bold);border-right:36px solid var(--coral-bold);border-bottom:36px solid var(--demo-fill);border-left:36px solid var(--teal-bold)}.demo--triangle-2{border-right:36px solid var(--coral-bold);border-bottom:36px solid var(--demo-fill);border-left:36px solid var(--teal-bold)}.demo--triangle-3{border-left:36px solid #0000;border-right:36px solid #0000;border-bottom:60px solid var(--demo-fill)}.demo--pentagon-1,.demo--pentagon-3,.demo--pentagon-anatomy{border-style:solid;border-width:30px 11px 0;border-color:var(--demo-fill)transparent;width:32px;margin-top:20px}.demo--pentagon-2{border-style:solid;border-width:0 27px 21px;border-color:transparent transparent var(--demo-fill);width:0}.demo--pentagon-3:before,.demo--pentagon-anatomy:before{content:"";border-style:solid;border-width:0 27px 21px;border-color:transparent transparent var(--part-a);width:0;position:absolute;top:-51px;left:-11px}.demo--pentagon-anatomy{--part-a:var(--lilac-bold)}.demo--oval-1,.demo--oval-2,.demo--oval-3{background:var(--demo-fill);width:42px;height:72px}.demo--oval-2{border-radius:25%}.demo--oval-3{border-radius:50%}.demo--trapezoid-1,.demo--trapezoid-2{border-bottom:42px solid var(--demo-fill);width:48px;height:0}.demo--trapezoid-1{border-left:24px solid var(--coral-bold);border-right:24px solid var(--marigold-bold)}.demo--trapezoid-2{border-left:24px solid #0000;border-right:24px solid #0000}.demo--octagon-1,.demo--octagon-2,.demo--octagon-3{background:var(--demo-fill);width:64px;height:64px}.demo--octagon-2{--wedge:var(--coral-bold)}.demo--octagon-3{--wedge:var(--demo-bg)}.demo--octagon-2:before,.demo--octagon-2:after,.demo--octagon-3:before,.demo--octagon-3:after{content:"";border-left:19px solid var(--wedge);border-right:19px solid var(--wedge);width:26px;position:absolute;left:0}.demo--octagon-2:before,.demo--octagon-3:before{border-bottom:19px solid var(--demo-fill);top:0}.demo--octagon-2:after,.demo--octagon-3:after{border-top:19px solid var(--demo-fill);bottom:0}.demo--parallelogram-1,.demo--parallelogram-2{background:var(--demo-fill);width:72px;height:42px}.demo--parallelogram-2{transform:skew(20deg)}.demo--rectangle-1{background:var(--demo-fill);width:54px;height:54px}.demo--rectangle-2{background:var(--demo-fill);width:42px;height:72px}.demo--hexagon-1,.demo--hexagon-2,.demo--hexagon-3,.demo--hexagon-anatomy{background:var(--demo-fill);width:64px;height:36px}.demo--hexagon-2:before,.demo--hexagon-3:before,.demo--hexagon-3:after,.demo--hexagon-anatomy:before,.demo--hexagon-anatomy:after{content:"";border-left:32px solid #0000;border-right:32px solid #0000;width:0;position:absolute;left:0}.demo--hexagon-2:before,.demo--hexagon-3:before,.demo--hexagon-anatomy:before{border-bottom:18px solid var(--part-a);bottom:100%}.demo--hexagon-3:after,.demo--hexagon-anatomy:after{border-top:18px solid var(--part-b);top:100%}.demo--hexagon-anatomy{--part-a:var(--coral-bold);--part-b:var(--marigold-bold)}.demo--star-1,.demo--star-2,.demo--star-3,.demo--star-anatomy{border-left:50px solid #0000;border-right:50px solid #0000;border-bottom:35px solid var(--demo-fill);width:0;height:0;margin:22px 0 0;transform:rotate(35deg)}.demo--star-2:after,.demo--star-3:after,.demo--star-anatomy:after{content:"";border-left:50px solid #0000;border-right:50px solid #0000;border-bottom:35px solid var(--part-a);width:0;height:0;position:absolute;top:1.5px;left:-52.5px;transform:rotate(-70deg)}.demo--star-3:before,.demo--star-anatomy:before{content:"";border-left:15px solid #0000;border-right:15px solid #0000;border-bottom:40px solid var(--part-b);width:0;height:0;position:absolute;top:-22.5px;left:-32.5px;transform:rotate(-35deg)}.demo--star-anatomy{--part-a:var(--coral-bold);--part-b:var(--marigold-bold)}.demo--heart-1,.demo--heart-2,.demo--heart-3,.demo--heart-anatomy{background:var(--demo-fill);width:40px;height:40px;margin-top:16px;transform:rotate(-45deg)}.demo--heart-2:before,.demo--heart-3:before,.demo--heart-3:after,.demo--heart-anatomy:before,.demo--heart-anatomy:after{content:"";border-radius:50%;width:40px;height:40px;position:absolute}.demo--heart-2:before,.demo--heart-3:before,.demo--heart-anatomy:before{background:var(--part-a);top:-20px;left:0}.demo--heart-3:after,.demo--heart-anatomy:after{background:var(--part-b);top:0;left:20px}.demo--heart-anatomy{--part-a:var(--pink-bold);--part-b:var(--coral-bold)}
.shape-lesson{gap:var(--space-6);margin-top:var(--space-5);flex-direction:column;display:flex}.shape-lesson-label{align-items:center;gap:var(--space-2);margin-bottom:var(--space-3);font-size:10.5px;font-weight:var(--font-semibold);letter-spacing:var(--tracking-wider);text-transform:uppercase;display:flex}.shape-lesson-label:before{content:"";background:var(--demo-fill);width:5px;height:9px}.shape-frame{aspect-ratio:1.25;border-radius:var(--radius-xs);background:var(--demo-bg);place-items:center;display:grid;overflow:hidden}.shape-frame .demo{scale:1.35}.shape-steps{gap:var(--space-4);grid-template-columns:repeat(3,minmax(0,1fr));margin:0;padding:0;list-style:none;display:grid}.shape-steps li{flex-direction:column;gap:2px;display:flex}.shape-step-number{margin-top:var(--space-2);color:var(--cherry-bold);font-size:10.5px;font-weight:var(--font-semibold)}.shape-step-caption{font-size:.875rem;font-weight:var(--font-medium)}.shape-steps code,.shape-anatomy-key code{background:var(--ivory);border-radius:3px;align-self:flex-start;margin-top:2px;padding:1px 5px;font-family:Monaco,Consolas,monospace;font-size:.6875rem}.shape-anatomy{gap:var(--space-5);grid-template-columns:minmax(0,13rem) 1fr;align-items:center;display:grid}.shape-anatomy-key{margin:0;padding:0;font-size:.875rem;line-height:1.45;list-style:none}.shape-anatomy-key li{align-items:baseline;gap:var(--space-2);margin-bottom:var(--space-2);display:flex}.shape-anatomy-swatch{border-radius:1px;flex:none;width:9px;height:9px}.shape-lesson .code-block{margin-top:0}@media (max-width:599px){.shape-steps{gap:var(--space-2)}.shape-step-caption{font-size:.75rem}.shape-steps code{white-space:normal;font-size:.625rem}.shape-anatomy{grid-template-columns:1fr}}