html[data-theme=light] .container.pro .used-by .logos-cloud a{mix-blend-mode:difference}html[data-theme=light] .container.pro .variants-showcase .controls .variants label:has(input:checked) .color:before{background-color:#ffffff80}html[data-theme=light] .container.pro .light-variant{color:var(--color-body)}html[data-theme=light] .container.pro .light-variant .content h3{color:var(--color-heading)}html[data-theme=light] .container.pro .bento .palette .illustration{background-image:url(/images/pro/palette-light.png);background-color:var(--background-color-primary)}html[data-theme=light] .container.pro .book .book-wrapper .cover img{box-shadow:.375rem .375rem 1.5rem var(--background-color-tertiary)}html[data-theme=light] .container.pro .book .book-wrapper .cover:after{box-shadow:-.625rem 0 3.375rem .625rem var(--background-color-tertiary)}.container.pro{flex-direction:column;align-items:center;gap:6rem;display:flex;position:relative}.container.pro h3{color:var(--color-display)}.container.pro em{color:var(--color);font-style:normal}.container.pro .description{width:100%;max-width:32rem;color:var(--color-heading);text-align:center;line-height:1.8;position:relative}.container.pro .description:before,.container.pro .description:after{color:var(--color);pointer-events:none;font-size:2.5rem;font-weight:700;position:absolute;top:0}.container.pro .description:before{content:"“";left:0}.container.pro .description:after{content:"”";right:0}.container.pro .used-by{flex-direction:column;justify-content:center;align-items:center;gap:2.625rem;width:100%;display:flex}.container.pro .used-by .logos-cloud{--columns:7;grid:auto/repeat(var(--columns),minmax(0,1fr));place-items:center;gap:2.625rem;width:100%;max-width:80%;margin:0;padding:0;list-style:none;display:grid}.container.pro .used-by .logos-cloud a{opacity:.66;transition:opacity var(--duration-standard)var(--ease-fluid)}.container.pro .used-by .logos-cloud a:hover{opacity:1}.container.pro .used-by .logos-cloud a img{object-fit:contain;object-position:center;width:100%;height:auto}.container.pro .variants-showcase{border:.0313rem solid var(--background-color-tertiary);border-radius:var(--radius-lg);background-color:var(--background-color-secondary);flex-direction:column;align-items:center;gap:1.5rem;width:100%;max-width:80%;padding:3.75rem 1.875rem;display:flex;position:relative;overflow:hidden}.container.pro .variants-showcase .header,.container.pro .variants-showcase .controls,.container.pro .variants-showcase .preview{flex-direction:column;justify-content:center;align-items:center;width:100%;display:flex}.container.pro .variants-showcase .header{gap:.5rem}.container.pro .variants-showcase .controls{gap:2.25rem}.container.pro .variants-showcase .controls select{border:.0625rem solid var(--background-color-secondary);border-radius:var(--radius-sm);background-color:var(--background-color-primary);width:100%;max-width:20rem;height:2.5rem;transition:border-color .24s var(--ease-fluid),outline-color .24s var(--ease-fluid),outline-width .18s var(--ease-fluid),color .24s var(--ease-fluid),background-color .24s var(--ease-fluid);-webkit-user-select:none;user-select:none;outline:0 solid #0000;padding-left:.75rem;padding-right:.75rem;position:relative}.container.pro .variants-showcase .controls select::placeholder{color:var(--color-body)}.container.pro .variants-showcase .controls select:focus-visible,.container.pro .variants-showcase .controls select:hover{outline-color:var(--background-color-tertiary);border-color:#0000;outline-width:.0625rem}.container.pro .variants-showcase .controls .variants{justify-content:center;align-items:stretch;gap:1.5rem;width:100%;display:flex;overflow:auto hidden}.container.pro .variants-showcase .controls .variants label{flex-direction:column;justify-content:center;align-items:center;gap:.75rem;min-width:4.5rem;height:100%;font-weight:500;display:flex;position:relative}:is(.container.pro .variants-showcase .controls .variants label:focus-within,.container.pro .variants-showcase .controls .variants label:hover) .color{transform:scale(.9)}:is(.container.pro .variants-showcase .controls .variants label:focus-within,.container.pro .variants-showcase .controls .variants label:hover) span{color:var(--color-display)}.container.pro .variants-showcase .controls .variants label:has(input:checked) .color:before{background-color:#00000080;width:.5rem;height:.5rem}.container.pro .variants-showcase .controls .variants label input{display:none}.container.pro .variants-showcase .controls .variants label .color{background-color:var(--color);width:2.625rem;height:2.625rem;transition:transform var(--duration-standard)var(--ease-elastic);will-change:transform;border-radius:100%;position:relative}.container.pro .variants-showcase .controls .variants label .color:before{content:"";pointer-events:none;width:0;height:0;transition:width .24s var(--ease-elastic),height .24s var(--ease-elastic),background-color .24s var(--ease-fluid);background-color:#0000;border-radius:100%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.container.pro .variants-showcase .controls .variants label span{transition:color var(--duration-standard)var(--ease-fluid)}.container.pro .variants-showcase .preview img{object-fit:contain;object-position:center;width:100%;height:auto}.container.pro .variants-showcase .illustration{pointer-events:none;position:absolute;inset:0}.container.pro .variants-showcase .illustration img{object-fit:contain;object-position:bottom;width:auto;height:100%}.container.pro .why-pro{border:.0313rem solid var(--background-color-tertiary);border-radius:var(--radius-lg);background-color:var(--background-color-secondary);width:100%;max-width:80%;display:flex;position:relative;overflow:hidden}.container.pro .why-pro .content{flex-direction:column;max-width:50%;padding:2.625rem;line-height:1.8;display:flex}.container.pro .why-pro .content h3{color:var(--color-display);margin-bottom:1.5rem}.container.pro .why-pro .content p:not(:last-child){margin-bottom:1em}.container.pro .why-pro .photo{flex:1 0 0;display:flex;position:relative}.container.pro .why-pro .photo img{object-fit:cover;object-position:center;width:100%;height:100%}.container.pro .light-variant{border:.0313rem solid var(--background-color-tertiary);border-radius:var(--radius-lg);background-image:linear-gradient(-45deg,var(--hero-background-color-secondary),#fff);width:100%;max-width:80%;min-height:20rem;color:var(--background-color-primary);background-color:#fff;display:flex;position:relative;overflow:hidden}.container.pro .light-variant .content{flex-direction:column;justify-content:center;max-width:50%;padding:2.625rem;line-height:1.8;display:flex}.container.pro .light-variant .content h3{color:var(--background-color-primary);margin-bottom:1.125rem}.container.pro .light-variant .content p:not(:last-child){margin-bottom:1em}.container.pro .light-variant .preview{flex:1 0 0;display:flex;position:relative;overflow:hidden}.container.pro .light-variant .preview img{object-fit:contain;object-position:center;border-radius:var(--radius-sm);width:100%;height:100%;position:absolute;top:90%;left:72%;transform:skew(1turn,10deg)scale(1.2)translate(-50%,-50%)}.container.pro .bento{flex-wrap:wrap;gap:1.5rem 1.375rem;width:100%;max-width:80%;display:flex}.container.pro .bento .header{text-align:center;flex-direction:column;gap:.375rem;width:100%;margin-bottom:1.875rem;display:flex}.container.pro .bento .card{border:.0313rem solid var(--background-color-tertiary);border-radius:var(--radius-lg);background-color:var(--background-color-secondary);flex:1 0 0;gap:.75rem;padding:1.875rem 1.5rem;display:flex;position:relative;overflow:hidden}.container.pro .bento .card .content{flex-direction:column;line-height:1.8;display:flex}.container.pro .bento .card .content h3{margin-bottom:1.125rem}.container.pro .bento .card .content p{text-wrap:balance}.container.pro .bento .card .content p:not(:last-child){margin-bottom:1em}.container.pro .bento .palette,.container.pro .bento .hand-picked-typography{flex:none;width:100%;padding:0}:is(.container.pro .bento .palette,.container.pro .bento .hand-picked-typography) .content{width:50%;padding:1.875rem 0 1.875rem 1.5rem}:is(.container.pro .bento .palette,.container.pro .bento .hand-picked-typography) .illustration,:is(.container.pro .bento .palette,.container.pro .bento .hand-picked-typography) .animation{flex:1 0 0;display:flex;position:relative}.container.pro .bento .palette{--color:var(--cyan);--mask-image-direction:right}.container.pro .bento .palette .illustration{-webkit-mask-image:linear-gradient(to var(--mask-image-direction),hsl(var(--main-hue),0%,0%,0),hsl(var(--main-hue),0%,0%,1)20%,hsl(var(--main-hue),0%,0%,1)80%,hsl(var(--main-hue),0%,0%,0));mask-image:linear-gradient(to var(--mask-image-direction),hsl(var(--main-hue),0%,0%,0),hsl(var(--main-hue),0%,0%,1)20%,hsl(var(--main-hue),0%,0%,1)80%,hsl(var(--main-hue),0%,0%,0));background-image:url(/images/pro/palette.png);background-position:50%;background-repeat:no-repeat;background-size:cover;flex-direction:column;justify-content:center;align-items:center}.container.pro .bento .palette .illustration .wheel{--y:-1.5rem;--x:-.75rem;--speed:5.4s;z-index:2;width:8rem;height:8rem;animation:up-down var(--speed)alternate infinite;transition:transform .24s var(--ease-fluid),animation-play-state var(--duration-standard)var(--ease-fluid);will-change:transform;background-image:radial-gradient(#fff,#fff0 95%),conic-gradient(#ff5757,#f1fa89,#52fa7c,#bf95f9,#ff5757);border-radius:100%}.container.pro .bento .palette .illustration .wheel:focus,.container.pro .bento .palette .illustration .wheel:hover{animation-play-state:paused;transform:scale(2)}.container.pro .bento .palette .illustration .wheel:before{z-index:2;content:"CLASSIC";color:hsl(var(--hue),12%,24%);font-weight:900;font-size:var(--font-size-caption);font-family:var(--font-mono);position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.container.pro .bento .palette .illustration .wheel.pro{--y:-.75rem;--x:1.5rem;--speed:4.002s;background-image:radial-gradient(#fff,#fff0 95%),conic-gradient(var(--red),var(--pink),var(--purple),var(--cyan),var(--green),var(--yellow),var(--orange),var(--red));filter:saturate(3);width:12rem;height:12rem}.container.pro .bento .palette .illustration .wheel.pro:before{content:"PRO";color:hsl(var(--hue),12%,6%)}.container.pro .bento .easy-on-the-eyes{--color:var(--green)}.container.pro .bento .less-context-switch{--color:var(--yellow)}.container.pro .bento .precise-contrast{--color:var(--orange)}.container.pro .bento .hand-picked-typography{--color:var(--pink)}.container.pro .bento .hand-picked-typography .content{width:48%}.container.pro .bento .hand-picked-typography .animation{background-color:#25232f;padding:1.5rem 1.5rem 1.5rem 2.25rem}.container.pro .bento .hand-picked-typography .animation video{mix-blend-mode:lighten;width:100%;height:100%}.container.pro .book{--color:var(--yellow);border:.0313rem solid var(--background-color-tertiary);border-radius:var(--radius-lg);background-color:var(--background-color-secondary);align-items:center;width:100%;max-width:80%;display:flex;position:relative}.container.pro .book .book-wrapper{--width:12.5rem;--height:20rem;perspective:37.5rem;justify-content:center;align-items:center;width:36%;padding:3.75rem 0;display:flex;position:relative}.container.pro .book .book-wrapper .cover{width:var(--width);height:var(--height);transform-style:preserve-3d;will-change:transform;transition:all 1.002s;animation:1.002s book-animation;position:relative;transform:rotateY(-30deg)}.container.pro .book .book-wrapper .cover:hover{transform:rotateY(0)}.container.pro .book .book-wrapper .cover img{width:var(--width);height:var(--height);border-radius:0 var(--radius-sm)var(--radius-sm)0;background-color:#01060e;position:absolute;transform:translateZ(1.5625rem);box-shadow:.375rem .375rem 1.5rem #333}.container.pro .book .book-wrapper .cover:before,.container.pro .book .book-wrapper .cover:after{content:"";position:absolute}.container.pro .book .book-wrapper .cover:before{background-image:linear-gradient(90deg,#f8e559 0%,#fafafa 5%,#fff 10%,#fafafa 15%,#fff 20%,#fafafa 25%,#fff 30%,#fafafa 35%,#fff 40%,#fafafa 45%,#fff 50%,#fafafa 55%,#fff 60%,#fafafa 65%,#fff 70%,#fafafa 75%,#fff 80%,#fafafa 85%,#fff 90%,#fafafa 95%,#fff 100%);width:3.375rem;height:96%;top:50%;left:0;transform:translate(315%,-50%)rotateY(90deg)}.container.pro .book .book-wrapper .cover:after{width:var(--width);height:var(--height);border-radius:0 var(--radius-sm)var(--radius-sm)0;background-color:#01060e;top:0;left:0;transform:translateZ(-1.5625rem);box-shadow:-.625rem 0 3.375rem .625rem #333}.container.pro .book .content{flex-direction:column;flex:1 0 0;padding:2.625rem;line-height:1.8;display:flex}.container.pro .book .content h3{margin-bottom:1.125rem}.container.pro .book .content p{text-wrap:balance}.container.pro .book .content p:not(:last-child){margin-bottom:1em}.container.pro .book .content .action{background-color:var(--color);color:var(--background-color-primary);transition:background-color .24s var(--ease-fluid),color .24s var(--ease-fluid);margin-top:1.5rem}.container.pro .book .content .action:hover{background-color:var(--background-color-primary);color:var(--color-display)}.container.pro .testimonials{--color:var(--orange);flex-direction:column;width:100%;max-width:60%;display:flex}.container.pro .testimonials .header{text-align:center;flex-direction:column;gap:.375rem;width:100%;margin-bottom:2.625rem;display:flex}.container.pro .testimonials .grid{flex-direction:column;gap:1.125rem;width:100%;display:flex}.container.pro .testimonials .grid .testimonial{border:.0313rem solid var(--background-color-tertiary);border-radius:var(--radius-lg);background-color:var(--background-color-secondary);width:100%;color:var(--color-heading);transition:transform .24s var(--ease-elastic),background-color .24s var(--ease-fluid);will-change:transform;flex-direction:column;align-items:center;gap:1em;line-height:1.8;display:flex;position:relative;overflow:hidden}.container.pro .testimonials .grid .testimonial:focus-within,.container.pro .testimonials .grid .testimonial:hover{transform:translateY(-.125rem)}.container.pro .testimonials .grid .testimonial .content,.container.pro .testimonials .grid .testimonial .author{width:100%;display:flex}.container.pro .testimonials .grid .testimonial .content{flex-direction:column;padding:1.5rem 1.5rem 0;overflow-y:scroll}.container.pro .testimonials .grid .testimonial .content p:not(:last-child){margin-bottom:1em}.container.pro .testimonials .grid .testimonial .author{border-top:.0313rem solid var(--background-color-tertiary);background-color:var(--background-color-secondary);align-items:center;gap:1.5rem;padding:1.5rem;position:relative}.container.pro .testimonials .grid .testimonial .author .avatar{background-color:var(--background-color-primary);pointer-events:none;border-radius:100%;justify-content:center;align-items:center;width:2.625rem;height:2.625rem;font-weight:900;display:flex;position:relative;overflow:hidden}.container.pro .testimonials .grid .testimonial .author .avatar img{object-fit:cover;object-position:center;width:100%;height:100%}.container.pro .testimonials .grid .testimonial .author .info{flex-direction:column;flex:1 0 0;display:flex}.container.pro .testimonials .grid .testimonial .author .info .name{color:var(--color-display);font-weight:700}.container.pro .testimonials .grid .testimonial .author .info .meta{color:var(--color-caption);font-size:var(--font-size-caption)}.container.pro .testimonials .read-more{margin:1.875rem auto 0}.container.pro #pricing{--color:var(--green);flex-direction:column;gap:2.625rem;max-width:22rem;display:flex}.container.pro #pricing .header{text-align:center;flex-direction:column;gap:.375rem;width:100%;display:flex}.container.pro #pricing .wrapper{border:.125rem solid var(--green);border-radius:var(--radius-lg);background-color:var(--background-color-secondary);color:var(--color-heading);flex-direction:column;justify-content:center;align-items:center;display:flex;position:relative;overflow:hidden;box-shadow:0 1rem 2rem #8aff803d}.container.pro #pricing .wrapper .price{width:100%;font-family:var(--font-mono);justify-content:center;align-items:center;gap:.75rem;padding:3.75rem 1.5rem 0;display:flex;position:relative}.container.pro #pricing .wrapper .price h3{font-size:1.875rem}.container.pro #pricing .wrapper .price h3.base{color:var(--color-caption);text-decoration:line-through;-webkit-text-decoration-color:var(--green);text-decoration-color:var(--green)}.container.pro #pricing .wrapper .price h3.promo{font-size:2.25rem}.container.pro #pricing .wrapper .price span{width:100%;color:var(--green);font-size:var(--font-size-caption);text-align:center;text-transform:uppercase;display:block;position:absolute;top:2.25rem;left:50%;transform:translate(-50%)}.container.pro #pricing .wrapper .one-time{width:100%;color:var(--color-heading);text-align:center;margin:.375rem 0 1.125rem}.container.pro #pricing .wrapper .features{border-top:.0313rem solid var(--background-color-tertiary);border-bottom:.0313rem solid var(--background-color-tertiary);flex-direction:column;align-items:center;gap:.75rem;width:100%;margin:0 0 1.875rem;padding:1.125rem 1.5rem 1.125rem 2rem;line-height:1.8;list-style:none;display:flex}.container.pro #pricing .wrapper .features li{align-items:center;gap:1.125rem;width:fit-content;min-width:12rem;display:inline-flex}.container.pro #pricing .wrapper .features li .icon{color:var(--green)}.container.pro #pricing .wrapper .action{background-color:var(--green);width:calc(100% - 3rem);color:var(--background-color-primary);transition:background-color .24s var(--ease-fluid),color .24s var(--ease-fluid);font-weight:700;line-height:1.8}.container.pro #pricing .wrapper .action:hover{background-color:var(--background-color-primary);color:var(--green)}.container.pro #pricing .wrapper .ppp-banner{border-top:.0313rem solid var(--background-color-tertiary);width:100%;color:var(--color-caption);font-size:var(--font-size-caption);text-align:center;flex-direction:column;margin-top:1.875rem;padding:1.125rem 1.125rem 1.5rem;line-height:1.8;display:flex;position:relative}.container.pro #pricing .wrapper .ppp-banner code,.container.pro #pricing .wrapper .ppp-banner em{color:var(--color-display)}.container.pro #pricing .wrapper .ppp-banner em{font-style:normal}.container.pro #pricing .wrapper .ppp-banner .flag{vertical-align:middle;display:inline}.container.pro #pricing .wrapper .ppp-banner .checkbox{color:var(--color-heading);justify-content:center;align-items:center;gap:.375rem;margin-top:.375rem;display:flex}.container.pro #pricing .wrapper .ppp-banner .checkbox input{margin:0}.container.pro #pricing .info{text-align:center}.container.pro #pricing .info a{color:var(--color);text-decoration:underline;-webkit-text-decoration-color:var(--color);text-decoration-color:var(--color);text-underline-offset:.1875rem;transition:color var(--duration-standard)var(--ease-fluid);font-weight:500}.container.pro #pricing .info a:focus,.container.pro #pricing .info a:hover{color:var(--color-display)}.container.pro .faqs{flex-direction:column;align-items:center;gap:2.625rem;width:100%;max-width:48%;scroll-margin-top:14rem;display:flex}.container.pro .faqs h3{width:100%;color:var(--color-display);text-align:center}.container.pro .faqs ul{width:100%;margin:0;padding:0;list-style:none}@media (max-width:60rem){.container.pro{gap:4.125rem}.container.pro .description{max-width:100%}.container.pro .description p:first-child{text-wrap:balance}.container.pro .description p:not(:last-child){margin-bottom:1em}.container.pro .used-by .logos-cloud{--columns:3;max-width:100%}.container.pro .variants-showcase{max-width:100%;padding:1.875rem 1.5rem}.container.pro .variants-showcase .controls .variants{justify-content:flex-start}.container.pro .variants-showcase .controls .variants label{min-width:fit-content}.container.pro .variants-showcase .controls .variants label .color{width:2.25rem;height:2.25rem}.container.pro .why-pro{flex-direction:column;max-width:100%}.container.pro .why-pro .content{max-width:100%;padding:1.875rem 1.5rem}.container.pro .light-variant{flex-direction:column;max-width:100%}.container.pro .light-variant .content{max-width:100%;padding:1.875rem 1.5rem 0}.container.pro .light-variant .preview{min-height:18.75rem}.container.pro .light-variant .preview img{top:84%}.container.pro .bento{max-width:100%}.container.pro .bento .card{flex-direction:column;flex:none;width:100%}.container.pro .bento .card:not(.palette,.hand-picked-typography){padding:1.875rem 1.5rem}.container.pro .bento .card .content p{text-wrap:pretty}:is(.container.pro .bento .palette,.container.pro .bento .hand-picked-typography) .content{width:100%;padding:1.875rem 1.5rem 0}.container.pro .bento .palette .illustration{--mask-image-direction:top}.container.pro .book{flex-direction:column;max-width:100%}.container.pro .book .book-wrapper{width:100%}.container.pro .book .content{padding:1.875rem 1.5rem}.container.pro .testimonials{max-width:100%}.container.pro #pricing{max-width:100%}.container.pro #pricing .wrapper{width:100%}.container.pro .faqs{max-width:100%}}@keyframes up-down{0%{transform:translateY(calc(var(--y)*-.5))translateX(var(--x))}to{transform:translateY(var(--y))translateX(var(--x))}}@keyframes book-animation{0%{transform:rotateY(0)}to{transform:rotateY(-30deg)}}