.home-product-banner,.product-grain-thumbnail{--scene-dark:#397eac;--scene-mid:#87cce8;--scene-light:#e1f7fc;--tilt-a:-9deg;--tilt-b:13deg;isolation:isolate;background:radial-gradient(ellipse at 82% 16%,var(--scene-light),transparent 65%),linear-gradient(115deg,var(--scene-dark),var(--scene-mid) 75%);position:absolute;inset:0;overflow:hidden;container-type:inline-size}.home-product-banner--coding{--scene-dark:#af6547;--scene-mid:#f0b88f;--scene-light:#fff0dc;--tilt-a:6deg;--tilt-b:-12deg}.home-product-banner--meta{--scene-dark:#8464ae;--scene-mid:#c5b1ec;--scene-light:#f4edff;--tilt-a:-6deg;--tilt-b:16deg}.home-product-banner--adsense{--scene-dark:#3f9079;--scene-mid:#9bdcc2;--scene-light:#e8fbef;--tilt-a:10deg;--tilt-b:-9deg}.home-product-banner--bundle{--scene-dark:#7375b0;--scene-mid:#bfc7ed;--scene-light:#e7faff;--tilt-a:-13deg;--tilt-b:7deg}.home-product-banner-grain{pointer-events:none;z-index:0;opacity:.045;mix-blend-mode:screen;background:url(/hero/fine-grain.svg) 0 0/192px;position:absolute;inset:0}.home-product-banner-copy{inset-block:0;z-index:4;color:#fff;flex-direction:column;justify-content:center;align-items:flex-start;gap:1.8cqw;width:44%;display:flex;position:absolute;left:5%}.home-product-banner-title{letter-spacing:-.055em;white-space:nowrap;text-shadow:0 1px 10px #17334a12;font-size:3.2cqw;font-weight:850;line-height:1.15}.home-product-banner-description{color:#fffffff2;white-space:nowrap;margin:0;font-size:1.55cqw;line-height:1.4}.home-product-banner-label{font-size:1.4cqw}.home-product-banner-isolated-art{z-index:2;pointer-events:none;position:absolute;inset:0}.soap-composition{position:absolute;inset:0}.soap-part{aspect-ratio:1;position:absolute}.soap-part img{object-fit:contain}.home-product-banner .soap-part--0{width:31%;transform:translateY(-50%) rotate(var(--tilt-a));z-index:2;top:50%;left:48%}.home-product-banner .soap-part--1{width:23%;transform:translateY(-43%) rotate(var(--tilt-b));z-index:1;top:50%;left:75%}.home-product-banner--meta .soap-part--1{top:42%}.home-product-banner--adsense .soap-part--0{left:47%}.home-product-banner--bundle .soap-part--1{top:58%}.banner-backdrop-words{z-index:1;pointer-events:none;position:absolute;inset:0}.banner-backdrop-words span{color:var(--scene-light);opacity:.2;letter-spacing:-.055em;white-space:nowrap;font-weight:850;line-height:1;position:absolute}.banner-backdrop-words span:first-child{font-size:10cqw;top:-8%;left:23%;transform:rotate(-5deg)}.banner-backdrop-words span:last-child{opacity:.16;font-size:9cqw;bottom:-6%;right:0%;transform:rotate(7deg)}.home-product-banner--meta .banner-backdrop-words span:first-child{top:65%;left:32%;transform:rotate(-9deg)}.home-product-banner--meta .banner-backdrop-words span:last-child{bottom:64%;transform:rotate(10deg)}.home-product-banner--bundle .banner-backdrop-words span:last-child{font-size:7cqw;bottom:68%}.banner-floating-bubbles,.thumbnail-empty-bubbles{z-index:1;pointer-events:none;position:absolute;inset:0}.banner-background-bubble,.thumbnail-empty-bubble{aspect-ratio:1;background:radial-gradient(at 28% 16%,#ffffffdc,#0000 16%),radial-gradient(at 82% 70%,#f5a9dd59,#0000 25%),radial-gradient(at 15% 75%,#8feeff80,#0000 24%);border:1px solid #ffffffad;border-radius:49% 51% 48% 52%/52% 49% 51% 48%;position:absolute;box-shadow:inset 2px 1px 4px #fff9,inset -3px -2px 5px #c6a3f780}.banner-background-bubble:before,.thumbnail-empty-bubble:before{content:"";border-radius:inherit;background:conic-gradient(#fffc,#a5eaff,#dfafff,#ffd6e1,#ffedba,#9de5da,#b2bfff,#fffc);padding:2px;position:absolute;inset:0;-webkit-mask-image:linear-gradient(#fff 0 0),linear-gradient(#fff 0 0);mask-image:linear-gradient(#fff 0 0),linear-gradient(#fff 0 0);-webkit-mask-position:0 0,0 0;mask-position:0 0,0 0;-webkit-mask-size:auto,auto;mask-size:auto,auto;-webkit-mask-repeat:repeat,repeat;mask-repeat:repeat,repeat;-webkit-mask-clip:content-box,border-box;mask-clip:content-box,border-box;-webkit-mask-origin:content-box,border-box;mask-origin:content-box,border-box;-webkit-mask-composite:xor;mask-composite:exclude;-webkit-mask-source-type:auto,auto;mask-mode:match-source,match-source}.banner-background-bubble:first-child{opacity:.8;width:12%;top:-22%;left:40%}.banner-background-bubble:nth-child(2){opacity:.6;width:7%;top:56%;left:43%}.banner-background-bubble:nth-child(3){opacity:.5;filter:blur(1px);width:18%;bottom:-42%;left:29%}.banner-background-bubble:nth-child(4){opacity:.6;filter:blur(1px);width:16%;top:-37%;right:-7%}.banner-background-bubble:nth-child(5){opacity:.65;width:8%;bottom:-17%;left:70%}.banner-background-bubble:nth-child(6){opacity:.5;width:5%;top:15%;right:4%}.home-product-banner--coding .banner-background-bubble:first-child{left:36%}.home-product-banner--meta .banner-background-bubble:nth-child(2){top:68%}.home-product-banner--bundle .banner-background-bubble:nth-child(6){top:-4%;right:13%}.product-grain-thumbnail-art{z-index:2;pointer-events:none;position:absolute;inset:0}.product-grain-thumbnail .soap-part--0{width:70%;transform:rotate(var(--tilt-a));z-index:2;top:1%;left:-1%}.product-grain-thumbnail .soap-part--1{width:49%;transform:rotate(var(--tilt-b));z-index:1;top:25%;left:53%}.product-grain-thumbnail.home-product-banner--meta .soap-part--1{top:16%}.product-grain-thumbnail.home-product-banner--coding .soap-part--0{top:5%}.product-grain-thumbnail.home-product-banner--bundle .soap-part--1{top:20%}.product-grain-thumbnail-copy{text-align:left;color:#fff;z-index:4;position:absolute;top:67%;left:8%;right:6%}.product-grain-thumbnail-copy>span{margin-bottom:2cqw;font-size:3cqw;font-weight:650;line-height:1.3;display:block}.product-grain-thumbnail-copy>strong{letter-spacing:-.055em;font-size:8.4cqw;font-weight:850;line-height:1.13;display:block}.product-grain-thumbnail.home-product-banner--bundle .product-grain-thumbnail-copy>strong{font-size:8cqw}.product-grain-thumbnail .banner-backdrop-words span:first-child{font-size:18cqw;top:0%;left:10%}.product-grain-thumbnail .banner-backdrop-words span:last-child{font-size:17cqw;bottom:39%;right:-1%}.thumbnail-empty-bubble:first-child{opacity:.7;width:26%;top:-6%;right:-3%}.thumbnail-empty-bubble:nth-child(2){opacity:.45;width:16%;top:52%;left:4%}.thumbnail-empty-bubble:nth-child(3){opacity:.6;width:35%;bottom:-10%;right:-15%}.hero-carousel .hero-slide{aspect-ratio:4.6;height:auto}.hero-carousel .hero-arrow{top:calc(50% - 15px)}.hero-carousel .home-product-banner-copy{gap:1.25cqw;left:8%}.hero-carousel .home-product-banner-title{font-size:2.9cqw}.hero-carousel .home-product-banner-description{font-size:1.4cqw}.hero-carousel .soap-part--0{width:27%;left:50%}.hero-carousel .soap-part--1{width:21%;left:76%}.banner-copy-bubbles{z-index:1;pointer-events:none;position:absolute;inset:0}.banner-copy-bubble{aspect-ratio:1;opacity:0;width:2.5%;animation:17s linear infinite copy-rise;position:absolute;top:83%}.banner-copy-bubble:first-child{animation-delay:-3s;left:9%}.banner-copy-bubble:nth-child(2){animation-delay:-10s;left:22%}.banner-copy-bubble:nth-child(3){animation-delay:-6s;left:35%}.banner-copy-bubble:nth-child(4){animation-delay:-14s;left:43%}.banner-copy-bubble i{border:1px solid #fff9;border-radius:50%;position:absolute;inset:0}@keyframes copy-rise{0%{opacity:0;transform:translateY(0)}20%,70%{opacity:.14}90%,to{opacity:0;transform:translateY(-100px)scale(1.3)}}.hero-carousel .soap-part,.seo-detail-banner-frame .soap-part{animation:12s ease-in-out infinite logo-float}.soap-part--1{animation-delay:-5s!important}@keyframes logo-float{0%,to{translate:0}50%{translate:0 -4px}}.hero-carousel:not([data-motion=running]) :is(.soap-part,.banner-copy-bubble),.hero-slide:not(.is-active) :is(.soap-part,.banner-copy-bubble),.seo-detail-banner-frame:not([data-motion=running]) :is(.soap-part,.banner-copy-bubble){animation-play-state:paused}@media (min-width:601px) and (max-width:1023px){.hero-carousel .hero-slide{aspect-ratio:3.2}.hero-carousel .home-product-banner-copy{left:6%}}@media (max-width:600px){.hero-carousel .hero-slide{aspect-ratio:2.6}.seo-detail-banner-frame{aspect-ratio:2.1}.hero-carousel .home-product-banner-copy,.seo-detail-banner-frame .home-product-banner-copy{gap:2cqw;width:49%;left:5%}.hero-carousel .home-product-banner-title,.seo-detail-banner-frame .home-product-banner-title{white-space:normal;font-size:3.8cqw;line-height:1.15}.hero-carousel .home-product-banner-description,.seo-detail-banner-frame .home-product-banner-description{white-space:normal;font-size:2.3cqw;line-height:1.35}.hero-carousel .soap-part--0,.seo-detail-banner-frame .soap-part--0{width:35%;top:39%;left:55%}.hero-carousel .soap-part--1,.seo-detail-banner-frame .soap-part--1{width:27%;top:68%;left:74%}.banner-background-bubble:first-child{width:17%;top:-13%;left:45%}.banner-background-bubble:nth-child(2){top:70%;left:51%}.banner-background-bubble:nth-child(3){width:24%;bottom:-32%;left:35%}.banner-backdrop-words span:first-child{top:0%;left:24%}}@media (prefers-reduced-motion:reduce){.hero-carousel .soap-part,.seo-detail-banner-frame .soap-part,.banner-copy-bubble{animation:none}.banner-copy-bubbles{display:none}}.home-product-banner-art{width:40%;height:90%;position:absolute;top:5%;left:55%}.home-product-banner-art img{object-fit:contain}.banner-background-bubble{animation:14s ease-in-out infinite alternate empty-float}.banner-background-bubble:nth-child(2n){animation-duration:19s;animation-delay:-7s}@keyframes empty-float{0%{translate:0}to{translate:3px -7px}}.hero-carousel:not([data-motion=running]) .banner-background-bubble,.hero-slide:not(.is-active) .banner-background-bubble,.seo-detail-banner-frame:not([data-motion=running]) .banner-background-bubble{animation-play-state:paused}@media (prefers-reduced-motion:reduce){.banner-background-bubble{animation:none}}.home-product-banner .reference-bubble-composition{position:absolute;inset:0}.reference-bubble-composition img{object-fit:cover;object-position:center}.home-product-banner .banner-floating-bubbles,.product-grain-thumbnail .thumbnail-empty-bubbles{display:none}.product-grain-thumbnail .reference-bubble-composition{aspect-ratio:3;width:170%;height:auto;position:absolute;top:4%;left:-63%}.hero-carousel .reference-bubble-composition img{object-fit:cover}@media (max-width:600px){.hero-carousel .reference-bubble-composition,.seo-detail-banner-frame .reference-bubble-composition{left:0;right:-6%}.hero-carousel .reference-bubble-composition img,.seo-detail-banner-frame .reference-bubble-composition img{object-fit:cover}}.home-product-banner--detail{--scene-dark:#15171b;--scene-mid:#555b65;--scene-light:#e5e8ed}.home-product-banner--detail .banner-backdrop-words span:first-child{top:-5%;left:22%}.home-product-banner--detail .banner-backdrop-words span:last-child{font-size:7cqw;bottom:1%;right:-2%}