/* Three connected scenes, from a human-made sketch to a website of your own. */
.hero{padding:62px 0 48px}.hero-side>p:not(.lead){margin-bottom:21px}.hero .small{font-size:11px}.hero-mosaic{height:210px}.benefits{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid #d9dfd6;gap:0;padding:30px 0 24px}.benefit{min-width:0;position:relative}.benefit+.benefit{border-left:1px solid #d9dfd6}.benefit-scene{height:236px;position:relative;display:flex;align-items:center;justify-content:center;margin:0 16px;--scene-accent:#d6f078;--scene-ink:#354e24}.benefit-copy{padding:16px 25px 0;position:relative}.benefit-number{font-size:9px;color:#839177;letter-spacing:.12em;position:absolute;left:2px;top:21px}.benefit:first-child .benefit-copy{padding-left:25px}.benefit h2{font-size:25px;font-weight:500;letter-spacing:-.8px;margin:0 0 10px}.benefit-copy p{font-size:12px;line-height:1.55;color:#677362;max-width:300px;margin:0}.scene-caption{position:absolute;top:8px;left:0;right:0;text-align:center;font-size:7px;letter-spacing:.15em;color:#7d8973}.design-sketch{position:relative;width:260px;height:152px;background:#fff;border:1px solid #d7dece;border-radius:5px;box-shadow:0 8px 20px #17211a08;transform:rotate(-3deg);transition:transform .5s}.sketch-nav{font-size:9px;display:flex;justify-content:space-between;padding:10px 12px;border-bottom:1px solid #e8ece4;font-weight:700;letter-spacing:-.2px}.sketch-menu{letter-spacing:1px;color:#829174}.sketch-body{padding:14px 12px;position:relative;overflow:hidden;height:119px}.sketch-kicker{font-size:5px;letter-spacing:.12em;display:block;color:#687560;margin-bottom:6px}.sketch-body>strong{font-size:26px;line-height:.95;letter-spacing:-1.2px;display:block;position:relative;z-index:2;font-weight:500}.sketch-body em{font-style:normal;background:var(--scene-accent);border-radius:2px;padding:0 3px;transition:background .4s}.sketch-cta{display:inline-block;font-size:5px;padding:5px 9px;color:#fff;background:#26341f;border-radius:2px;margin-top:9px}.sketch-art{position:absolute;right:22px;top:21px;width:81px;height:86px}.sketch-art i{position:absolute;width:62px;height:72px;background:var(--scene-accent);border-radius:50% 50% 8% 8%;left:0;top:0;transform:rotate(9deg);transition:background .4s}.sketch-art b{position:absolute;bottom:4px;right:0;background:var(--scene-ink);width:49px;height:49px;border-radius:50%;mix-blend-mode:multiply;transition:background .4s}.sketch-art>span{position:absolute;left:22px;top:14px;width:36px;height:36px;border:1px solid #ffffffbd;border-radius:50%}.custom-scene[data-color=lilac]{--scene-accent:#d9c5f5;--scene-ink:#654b80}.custom-scene[data-color=peach]{--scene-accent:#f6c6a9;--scene-ink:#925b36}.style-tools{position:absolute;top:43px;left:8px;background:#fff;border:1px solid #dce2d4;border-radius:30px;padding:6px;display:flex;align-items:center;gap:4px;box-shadow:0 4px 10px #17211a0a;z-index:3}.style-swatch{width:22px;height:22px;min-width:22px;border:2px solid #fff;border-radius:50%;position:relative;padding:0}.style-swatch[aria-pressed=true]{outline:1px solid #596c49;outline-offset:1px}.style-swatch[aria-pressed=true]:after{content:'✓';color:#304128;font-size:10px;position:absolute;inset:0;display:grid;place-items:center}.swatch-green{background:#d6f078}.swatch-lilac{background:#d9c5f5}.swatch-peach{background:#f6c6a9}.style-tools>span{font-size:7px;color:#728163;margin:0 5px 0 6px}.maker-pointer{position:absolute;right:25px;top:134px;display:flex;align-items:start;transform:rotate(-2deg);z-index:4;transition:transform .6s}.maker-pointer svg{width:18px;height:22px;fill:#71964c;stroke:white;stroke-width:1.5}.maker-pointer>span{background:#71964c;color:#fff;font-size:8px;padding:5px 8px;border-radius:4px;margin-top:14px;margin-left:-4px}.collaborators{position:absolute;bottom:11px;left:0;right:0;display:flex;align-items:center;justify-content:center;font-size:9px;color:#58694c}.person{width:23px;height:23px;border:2px solid #f7f8f4;border-radius:50%;display:grid;place-items:center;font-size:8px;font-weight:700}.person.anson{background:#24331e;color:#fff}.person.you{background:#d6f078;color:#314821;margin-left:-6px;margin-right:7px}.custom-scene:hover .design-sketch{transform:rotate(0)}.custom-scene:hover .maker-pointer{transform:translate(-14px,-8px) rotate(-2deg)}
.search-scene{flex-direction:column}.search-window{background:white;width:calc(100% - 14px);max-width:316px;height:205px;overflow:hidden;border:1px solid #dce2d4;border-radius:7px;box-shadow:0 10px 22px #22311308;position:relative}.search-toolbar{display:flex;gap:9px;padding:12px;border-bottom:1px solid #edf0e8;align-items:center}.search-wordmark{font-size:13px;letter-spacing:-.6px;font-weight:500;display:flex}.search-wordmark i{font-style:normal}.search-wordmark i:nth-child(1),.search-wordmark i:nth-child(4){color:#4285f4}.search-wordmark i:nth-child(2),.search-wordmark i:nth-child(6){color:#ea4335}.search-wordmark i:nth-child(3){color:#fbbc05}.search-wordmark i:nth-child(5){color:#34a853}.search-query{display:flex;align-items:center;justify-content:space-between;gap:10px;border:1px solid #e8ebdf;background:#f9faf7;padding:8px 9px;border-radius:20px;flex:1;white-space:nowrap;font-size:8px;color:#56634d}.search-query svg{width:12px;height:12px;fill:none;stroke:#7a856f;stroke-width:1.6;flex-shrink:0}.search-result{position:relative;padding:13px 13px 12px;transition:background .4s;z-index:1}.search-identity{display:flex;align-items:center;gap:7px;margin-bottom:9px}.result-favicon{width:25px;height:25px;background:#edf3e1;color:#5a713b;border-radius:50%;display:grid;place-items:center;font-size:14px;font-weight:bold;letter-spacing:-1px}.search-identity b{font-size:9px;display:block;font-weight:500;color:#3e4c35}.search-identity small{font-size:7px;color:#7c8673;display:block;margin-top:3px}.search-star{margin-left:auto;font-size:19px;color:#94b754}.search-result>strong{display:block;color:#35519a;font-size:12px;letter-spacing:-.15px;font-weight:500;margin:0 0 7px}.search-description{font-size:7px;color:#77816d;display:block;line-height:1.4}.search-links{display:flex;gap:13px;font-size:7px;color:#5571ad;margin-top:9px}.result-ghost{opacity:.38;margin:0 14px;border-top:1px solid #f0f1eb;padding-top:12px}.result-ghost i,.result-ghost b,.result-ghost span{display:block;background:#cdd5c5;height:4px;border-radius:2px;margin:5px 0;width:57%}.result-ghost b{width:81%;background:#b8c6dc}.result-ghost span{width:95%}.search-note{position:absolute;bottom:0;font-size:7px;letter-spacing:.02em;color:#86917a}.search-scene:hover .search-result{background:#f3f8e9}
.domain-scene{flex-direction:column;overflow:hidden}.domain-control{position:relative;z-index:2;display:flex;align-items:center;text-decoration:none;background:#fff;border:1px solid #d5ddcd;border-radius:12px;box-shadow:0 9px 20px #24341b08;height:72px;padding:7px 7px 7px 18px;gap:12px;transform:rotate(-4deg);transition:transform .35s,box-shadow .35s;margin-top:4px}.domain-prefix{font-size:20px;letter-spacing:-1px;color:#8b9680}.com-key{position:relative;display:flex;align-items:center;justify-content:center;width:85px;height:61px;border-radius:10px;color:#354525;font-size:26px;font-weight:700;letter-spacing:-1px;background:linear-gradient(140deg,#e7faa8,#c5df6e);border:1px solid #abc755;box-shadow:0 5px 0 #8d9f58,0 7px 8px #6f844524,inset 0 1px 1px #fff;transition:transform .25s,box-shadow .25s}.domain-control:hover{transform:rotate(0) translateY(-2px);box-shadow:0 14px 22px #24341b0e}.domain-control:active .com-key{transform:translateY(4px);box-shadow:0 1px 0 #8d9f58,inset 0 1px 1px #fff}.key-shine{position:absolute;top:5px;left:10px;right:10px;height:1px;background:#f5ffca;border-radius:50%}.domain-stamp{margin-top:27px;display:flex;align-items:center;gap:5px;color:#67795b;font-size:9px;position:relative;z-index:2}.domain-stamp svg{width:15px;height:15px;stroke:#68894d;stroke-width:1.7;fill:#edf3e1;border-radius:50%}.domain-detail{position:absolute;bottom:0;font-size:7px;color:#86917a}.domain-orbit{position:absolute;width:270px;height:125px;border:1px solid #dfe6d6;border-radius:50%;top:55px;transform:rotate(-23deg);opacity:.7}.orbit-two{transform:rotate(25deg);width:215px;height:166px;top:34px}.library-bridge{display:flex;flex-direction:column;align-items:center;text-decoration:none;font-size:11px;color:#68795a;gap:12px;width:max-content;max-width:100%;margin:0 auto 36px;position:relative;padding-top:21px}.library-bridge:before{content:'';position:absolute;left:50%;top:0;height:12px;width:1px;background:#c2ceae}.bridge-arrow{display:grid;place-items:center;width:31px;height:31px;border:1px solid #d2ddc3;border-radius:50%;background:#edf3e1;font-size:16px;color:#6e864e;transition:transform .3s}.library-bridge:hover .bridge-arrow{transform:translateY(4px)}.section-heading>p{max-width:310px}.section-heading h2{font-size:36px}.benefits.is-visible .benefit-scene{animation:scene-in .8s cubic-bezier(.16,1,.3,1) both}.benefits.is-visible .benefit-search .benefit-scene{animation-delay:.13s}.benefits.is-visible .benefit-domain .benefit-scene{animation-delay:.26s}.benefits.is-visible .search-result{animation:result-in .9s cubic-bezier(.16,1,.3,1) .3s both}@keyframes scene-in{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}@keyframes result-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:1100px) and (min-width:701px){.benefit-scene{margin:0 7px}.design-sketch{width:220px}.style-tools{left:0}.style-tools>span{display:none}.maker-pointer{right:10px}.domain-prefix{font-size:16px}.domain-control{padding-left:13px;gap:7px}.com-key{width:72px}.search-toolbar{gap:6px;padding:10px 8px}.search-query{gap:5px;padding:7px 6px;font-size:7px}.search-wordmark{font-size:12px}.benefit h2{font-size:23px}.benefit-copy{padding-right:12px}.search-result>strong{font-size:10px}.search-description{font-size:6px}}
@media(max-width:700px){.benefits{grid-template-columns:1fr;padding:7px 0 0}.benefit+.benefit{border-left:0;border-top:1px solid #d9dfd6}.benefit{display:grid;grid-template-columns:1fr;padding:20px 0 25px}.benefit-scene{width:100%;max-width:390px;margin:0 auto;height:222px}.benefit-copy{padding:18px 0 0 26px;max-width:390px;width:100%;margin:0 auto}.benefit h2{font-size:25px}.benefit-number{top:24px;left:0}.benefit-copy p{max-width:none;font-size:12px}.scene-caption{top:0}.style-tools{left:9px;top:28px}.maker-pointer{right:30px;top:126px}.search-window{height:192px;max-width:310px}.search-result{padding-top:11px;padding-bottom:11px}.domain-control{margin-top:0}.domain-stamp{margin-top:25px}.domain-scene .scene-caption{top:8px}.domain-detail{bottom:8px}.library-bridge{padding-top:18px;margin:0 auto 33px}.hero{padding:38px 0 32px}.hero .lead{font-size:21px}.hero-mosaic{height:200px}.section-heading>p{font-size:11px}.section-heading h2{font-size:32px;max-width:100%}.domain-prefix{font-size:20px}}
.benefits:after{content:'';position:absolute;bottom:0;left:16.666%;right:16.666%;height:1px;background:#cddbb7;transform-origin:center}.benefit:after{content:'';position:absolute;left:calc(50% - 3px);bottom:-27px;width:6px;height:6px;border-radius:50%;background:#b4c98b;box-shadow:0 0 0 4px #f7f8f4}.benefits.is-visible:after{animation:track-in 1s cubic-bezier(.16,1,.3,1) .4s both}@keyframes track-in{from{transform:scaleX(0);opacity:0}to{transform:scaleX(1);opacity:1}}@media(max-width:700px){.benefits:after,.benefit:after{display:none}.style-swatch{width:28px;height:28px;min-width:28px}.style-tools{gap:7px}}
@media(prefers-reduced-motion:reduce){.benefits.is-visible .benefit-scene,.benefits.is-visible .search-result,.benefits.is-visible:after{animation:none}.design-sketch,.maker-pointer,.domain-control,.com-key,.bridge-arrow,.search-result{transition:none}}