@layer components{.product-illustration{--illustration-ease:cubic-bezier(.23, 1, .32, 1);isolation:isolate;background:#f8f8f8;border:1px solid #e7e7e7;border-radius:18px;min-width:0;margin:0;position:relative;overflow:hidden;box-shadow:0 20px 50px -35px #00000025}.illustration-topline{color:#656565;align-items:center;gap:8px;padding:19px 22px;font-size:11px;display:flex}.illustration-topline-end{color:#8b8b8b;margin-left:auto;font-size:10px}.template-art-scene,.contacts-art-scene{height:430px;position:relative}.illustration-grid{background-image:radial-gradient(#bcbcbc .6px,#0000 .6px);background-size:12px 12px;position:absolute;inset:-20px 0;-webkit-mask-image:radial-gradient(#00000090,#0000 70%);mask-image:radial-gradient(#00000090,#0000 70%)}.illustration-caption{color:#777;justify-content:space-between;align-items:center;gap:12px;padding:5px 17px 10px 22px;font-size:10px;display:flex}.illustration-caption>span{align-items:center;gap:7px;display:flex}.illustration-status-dot{background:#777;border-radius:50%;width:5px;height:5px}.illustration-motion-control{color:#555;background:#fff;border:1px solid #dedede;border-radius:50%;place-items:center;width:36px;height:36px;display:grid}.illustration-motion-control:hover{background:#ededed}.template-back-sheet{color:#aaa;background:#fdfdfd;border:1px solid #dedede;border-radius:9px;width:48%;max-width:250px;height:285px;padding:24px;font-size:13px;position:absolute;top:40px;left:31%;box-shadow:0 12px 25px #00000005}.back-sheet-one{animation:sheet-fan-one 9s var(--illustration-ease) infinite;transform:translate(28px,-6px)rotate(12deg)}.back-sheet-two{animation:sheet-fan-two 9s var(--illustration-ease) infinite;transform:translate(-25px,12px)rotate(-12deg)}.template-back-sheet i{background:#ededed;border-radius:3px;width:80%;height:5px;margin-top:16px;display:block}.template-composition{z-index:2;background:#fff;border:1px solid #d5d5d5;border-radius:9px;width:48%;max-width:250px;position:absolute;top:38px;left:31%;transform:rotate(-3deg);box-shadow:0 20px 40px #00000012,0 2px 4px #00000005}.composition-toolbar{color:#777;border-bottom:1px solid #eee;justify-content:space-between;align-items:center;gap:8px;padding:10px 12px;font-size:9px;display:flex}.composition-dots{color:#bbb;letter-spacing:2px;font-size:6px}.composition-content{padding:20px}.composition-brand{letter-spacing:-.08em;align-items:center;gap:7px;font-size:24px;font-weight:650;display:flex}.composition-brand>span{color:#737373;letter-spacing:0;font-size:9px;font-weight:400}.composition-art{perspective:600px;background:#f5f5f5;border-radius:4px;justify-content:center;align-items:center;height:70px;margin:12px 0 18px;display:flex;overflow:hidden}.composition-art>span{width:55px;height:55px;animation:composition-sculpture 9s var(--illustration-ease) infinite;background:linear-gradient(140deg,#fff,#dedede);border:1px solid #bbb;border-radius:12px;flex:0 0 55px;margin-inline:-13px;transform:rotateX(50deg)rotate(40deg)}.composition-art>span:nth-child(2){z-index:1;background:linear-gradient(140deg,#666,#222);border-color:#222;animation-delay:.15s}.composition-art>span:nth-child(3){animation-delay:.3s}.composition-content h3{letter-spacing:-.055em;font-size:20px;font-weight:550;line-height:1.2}.composition-content p{color:#777;margin-top:9px;font-size:10px;line-height:1.7}.composition-cta{color:#fff;background:#242424;border-radius:4px;justify-content:space-between;align-items:center;margin-top:17px;padding:10px;font-size:9px;display:flex}.composition-signoff{color:#8a8a8a;border-top:1px solid #eee;margin-top:16px;padding-top:12px;font-size:8px;display:block}.template-block-palette{z-index:3;background:#fffe;border:1px solid #dfdfdf;border-radius:10px;width:126px;padding:12px;position:absolute;top:108px;left:4%;transform:rotate(-5deg);box-shadow:0 16px 30px #0000000a}.template-block-palette>span{color:#777;margin-bottom:10px;font-size:9px;display:block}.assembly-block{color:#666;animation:block-assemble 9s var(--illustration-ease) infinite;background:#fafafa;border:1px solid #e5e5e5;border-radius:4px;align-items:center;gap:7px;margin-top:6px;padding:8px;font-size:9px;display:flex}.assembly-block b{width:13px;font-size:13px;font-weight:500}.assembly-block i{background:#bbb;border-radius:50%;width:3px;height:3px;margin-left:auto}.block-text{animation-delay:.35s}.block-button{animation-delay:.7s}.template-variable-token{z-index:4;color:#eee;font:9px var(--font-mono);animation:variable-arrive 9s var(--illustration-ease) infinite;background:#252525;border:1px solid #454545;border-radius:7px;align-items:center;gap:9px;padding:11px 12px;display:flex;position:absolute;top:213px;right:4%;transform:rotate(4deg);box-shadow:0 8px 20px #00000020}.template-variable-token>strong{color:#fff;font-weight:500}.variable-arrow{color:#888}.template-art-cursor{z-index:5;color:#171717;animation:builder-cursor 9s var(--illustration-ease) infinite;position:absolute;top:235px;left:48%}.template-art-cursor>svg{filter:drop-shadow(0 1px #fff);width:23px;height:23px}.template-art-cursor>span{color:#fff;background:#242424;border-radius:3px;margin-left:18px;padding:3px 7px;font-size:8px;display:block}.template-published{z-index:4;color:#555;animation:publish-confirm 9s var(--illustration-ease) infinite;background:#fff;border:1px solid #ddd;border-radius:100px;align-items:center;gap:6px;padding:9px 12px;font-size:9px;display:flex;position:absolute;bottom:7px;right:7%;box-shadow:0 8px 25px #00000008}.illustration-personalize{justify-content:center;align-items:center;gap:5px;padding:14px 20px 8px;display:flex}.illustration-personalize legend{float:left;color:#777;margin-right:10px;padding:12px 0;font-size:10px}.illustration-personalize button{color:#666;border:1px solid #0000;border-radius:6px;min-width:49px;min-height:36px;padding-inline:10px;font-size:11px;transition:background .18s,color .18s}.illustration-personalize button[aria-pressed=true]{color:#171717;background:#fff;border-color:#dedede;box-shadow:0 2px 3px #00000005}.contacts-art-scene{height:433px}.contact-orbit{border:1px solid #ddd;border-radius:50%;position:absolute;top:49%;left:50%;transform:translate(-50%,-50%)}.orbit-inner{aspect-ratio:1;border-style:dashed;width:64%}.orbit-outer{aspect-ratio:1;border-color:#e8e8e8;width:88%}.orbit-signal{aspect-ratio:1;border:0;width:64%;animation:15s linear infinite orbit-transmit}.orbit-signal>i{background:#555;border-radius:50%;width:6px;height:6px;position:absolute;top:50%;left:-3px;box-shadow:0 0 0 5px #00000008}.orbit-signal>i+i{background:#aaa;left:auto;right:-3px}.contacts-art-connectors{position:absolute;inset:0;overflow:hidden}.contacts-art-connectors>span{background:linear-gradient(90deg,#0000,#ccc,#0000);width:80%;height:1px;position:absolute;top:49%;left:10%;transform:rotate(-35deg)}.contacts-art-connectors>span:nth-child(2){transform:rotate(42deg)}.contacts-art-connectors>span:nth-child(3){transform:rotate(90deg)}.contact-profile-card{z-index:2;background:#fff;border:1px solid #d9d9d9;border-radius:12px;width:50%;padding:16px;position:absolute;top:27%;left:25%;box-shadow:0 20px 45px #00000012,0 2px 4px #00000004}.profile-card-label{color:#999;justify-content:space-between;font-size:9px;display:flex}.profile-card-person{align-items:center;gap:10px;margin-block:21px;display:flex}.profile-monogram{color:#fff;background:linear-gradient(140deg,#555,#181818);border:1px solid #3d3d3d;border-radius:12px;flex:0 0 40px;place-items:center;height:40px;font-size:19px;display:grid}.profile-card-person>div{gap:4px;min-width:0;display:grid}.profile-card-person strong{letter-spacing:-.03em;font-size:17px;font-weight:550}.profile-email{color:#888;overflow-wrap:anywhere;font-size:9px}.profile-card-properties{border-top:1px solid #eee;grid-template-columns:1fr auto;gap:12px;padding-top:14px;font-size:9px;display:grid}.profile-card-properties>span{color:#888}.profile-card-properties>strong{color:#444;align-items:center;gap:3px;font-weight:450;display:flex}.profile-card-properties svg{width:10px;height:10px}.contact-orbit-people{z-index:3;pointer-events:none;position:absolute;inset:0}.orbit-person{color:#777;pointer-events:auto;background:#fffe;border:1px solid #e0e0e0;border-radius:100px;align-items:center;gap:7px;min-height:44px;padding:7px 11px 7px 7px;transition:background .18s,border-color .18s,box-shadow .18s;display:flex;position:absolute;box-shadow:0 7px 15px #00000006}.orbit-person>span{color:#777;background:#ededed;border-radius:50%;place-items:center;width:27px;height:27px;font-size:11px;display:grid}.orbit-person>strong{font-size:11px;font-weight:500}.orbit-person>svg{opacity:0;width:11px}.orbit-person[aria-pressed=true]{color:#171717;background:#fff;border-color:#aaa;box-shadow:0 5px 20px #00000010}.orbit-person[aria-pressed=true]>span{color:#fff;background:#222}.orbit-person[aria-pressed=true]>svg{opacity:1}.orbit-person-1{top:13%;left:7%}.orbit-person-2{top:8%;right:12%}.orbit-person-3{top:47%;right:2%}.orbit-person-4{bottom:13%;right:13%}.orbit-person-5{bottom:23%;left:3%}.contact-context{color:#777;align-items:center;gap:7px;font-size:9px;display:flex;position:absolute}.context-one{transform-origin:0 0;top:40%;left:4%;transform:rotate(-90deg)}.context-plus{font-size:13px}.context-two{animation:context-connect 7s var(--illustration-ease) infinite;background:#fff;border:1px solid #e2e2e2;border-radius:5px;padding:7px 10px;bottom:4%;left:11%}.contact-illustration-hint{color:#777;text-align:center;padding:14px 20px 16px;font-size:10px}.product-illustration[data-playing=false] *,.product-illustration[data-playing=false] :before,.product-illustration[data-playing=false] :after{animation-play-state:paused}@media (hover:hover) and (pointer:fine){.orbit-person:hover{background:#fff;border-color:#999}.illustration-personalize button:hover{color:#171717;background:#eee}}@keyframes sheet-fan-one{0%,80%,to{transform:translate(28px,-6px)rotate(12deg)}15%,60%{transform:translate(42px,-16px)rotate(16deg)}}@keyframes sheet-fan-two{0%,80%,to{transform:translate(-25px,12px)rotate(-12deg)}15%,60%{transform:translate(-39px,4px)rotate(-16deg)}}@keyframes composition-sculpture{0%,85%,to{transform:rotateX(50deg)rotate(40deg)translateZ(0)}20%,65%{transform:rotateX(50deg)rotate(40deg)translateZ(14px)}}@keyframes block-assemble{0%,9%,85%,to{opacity:.65;transform:translate(0)}16%,70%{opacity:1;transform:translate(6px)}}@keyframes variable-arrive{0%,20%,93%,to{opacity:.3;transform:translateY(6px)rotate(4deg)}32%,80%{opacity:1;transform:translateY(0)rotate(4deg)}}@keyframes builder-cursor{0%,to{opacity:0;transform:translate(-95px,-80px)}10%,20%{opacity:1;transform:translate(-95px,-80px)}38%,48%{opacity:1;transform:translate(70px,5px)}58%,72%{opacity:1;transform:translateY(75px)}85%{opacity:0;transform:translateY(75px)}}@keyframes publish-confirm{0%,52%,to{opacity:.25;transform:translateY(6px)}65%,88%{opacity:1;transform:translateY(0)}}@keyframes orbit-transmit{to{transform:translate(-50%,-50%)rotate(360deg)}}@keyframes context-connect{0%,to{opacity:.45;transform:translateY(5px)}30%,80%{opacity:1;transform:translateY(0)}}@media (width<=1050px){.template-block-palette{width:105px;padding:9px}.template-variable-token{gap:5px;font-size:8px;right:2%}.contact-profile-card{width:56%;left:22%}.orbit-person{gap:4px;padding-right:7px}.orbit-person>svg{display:none}}@media (width<=850px){.product-illustration{width:100%;max-width:640px;margin-inline:auto}.template-block-palette{width:126px;padding:12px}.template-variable-token{gap:9px;font-size:9px;right:4%}.contact-profile-card{width:50%;left:25%}.orbit-person{gap:7px;padding-right:11px}.orbit-person>svg{display:block}}@media (width<=480px){.illustration-topline{padding-inline:15px;font-size:10px}.illustration-topline-end{font-size:9px}.template-art-scene{height:410px}.template-composition{width:60%;top:34px;left:28%}.template-back-sheet{width:54%;height:260px;top:43px;left:28%}.composition-content{padding:15px}.composition-content h3{font-size:18px}.composition-toolbar{padding-inline:8px;font-size:8px}.composition-dots{letter-spacing:1px}.template-block-palette{width:87px;padding:8px;top:116px;left:3%}.template-block-palette>span{font-size:8px}.assembly-block{gap:5px;padding:7px 4px;font-size:8px}.assembly-block i{display:none}.template-variable-token{gap:5px;padding:9px 8px;font-size:8px;top:2px;right:3%}.template-published{bottom:5px;right:6%}.illustration-personalize{gap:2px;padding-inline:10px}.illustration-personalize legend{margin-right:5px;font-size:9px}.illustration-personalize button{min-width:45px;padding-inline:8px;font-size:10px}.contacts-art-scene{height:374px}.contact-profile-card{width:59%;padding:12px;top:28%;left:22%}.profile-card-person{gap:7px;margin-block:18px}.profile-monogram{border-radius:10px;flex-basis:33px;height:33px}.profile-card-person strong{font-size:16px}.profile-email{font-size:8px}.profile-card-properties{gap:10px;font-size:8px}.orbit-person{gap:5px;padding:6px 9px 6px 6px}.orbit-person>strong{font-size:10px}.orbit-person>svg{display:none}.orbit-person-1{top:12%;left:5%}.orbit-person-2{top:6%;right:8%}.orbit-person-3{top:67%;right:1%}.orbit-person-4{bottom:7%;right:22%}.orbit-person-5{bottom:28%;left:2%}.context-one{font-size:8px;top:52%;left:5%}.context-two{padding:6px;font-size:8px;bottom:13%;left:5%}.orbit-inner,.orbit-signal{width:76%}.orbit-outer{width:104%}}@media (prefers-reduced-motion:reduce){.illustration-motion-control{display:none}.illustration-caption{min-height:42px}.template-art-cursor{display:none}}.product-illustration{border-color:var(--line);border-radius:var(--radius-feature);background:radial-gradient(70% 60% at 60% 40%, #fff, transparent 80%), var(--shell);box-shadow:var(--shadow-float)}.illustration-status-dot{background:var(--signal);box-shadow:0 0 0 3px var(--signal-soft)}.illustration-motion-control{border-color:var(--line);transition:background-color .15s ease, transform .16s var(--ease-out)}.illustration-motion-control:active{transform:scale(.94)}.delivery-art-scene{height:430px;position:relative}.delivery-message{border:1px solid var(--line);background:var(--surface);width:60%;box-shadow:var(--shadow-card);border-radius:14px;position:absolute;top:26px;left:7%;overflow:hidden}.delivery-message-head{border-bottom:1px solid var(--line-soft);align-items:center;gap:10px;padding:14px 16px;display:flex}.delivery-message-head>div{min-width:0;display:grid}.delivery-message-head strong{font-size:13px;font-weight:600}.delivery-message-head span:not(.delivery-message-avatar){color:var(--text-faint);text-overflow:ellipsis;white-space:nowrap;font-size:11px;overflow:hidden}.delivery-message-avatar{background:linear-gradient(140deg,#f1f1f1,#e2e2e2);border-radius:50%;flex:none;place-items:center;width:30px;height:30px;font-size:12px;font-weight:600;display:grid}.delivery-timeline{gap:4px;margin:0;padding:14px 14px 16px;list-style:none;display:grid;position:relative}.delivery-timeline:before{content:"";background:var(--line);width:1px;position:absolute;top:30px;bottom:34px;left:26px}.delivery-timeline li{color:var(--text-faint);animation:timeline-step 7s var(--illustration-ease) infinite;animation-delay:calc(var(--i) * .7s);align-items:center;gap:12px;padding:7px 4px;animation-play-state:paused;display:flex;position:relative}.delivery-timeline li>div{flex:1;min-width:0;display:grid}.delivery-timeline strong{font-size:12.5px;font-weight:600}.delivery-timeline li span:not(.delivery-timeline-dot){text-overflow:ellipsis;white-space:nowrap;font-size:11px;overflow:hidden}.delivery-timeline code{background:var(--surface-sunken);border-radius:5px;padding:2px 6px;font-size:10px}.delivery-timeline-dot{z-index:1;border:1px solid var(--line-strong);background:var(--surface);color:#0000;width:20px;height:20px;animation:timeline-dot 7s var(--illustration-ease) infinite;animation-delay:calc(var(--i) * .7s);border-radius:50%;flex:none;place-items:center;animation-play-state:paused;display:grid;position:relative}.delivery-timeline-dot svg{width:11px;height:11px}[data-playing=true] .delivery-timeline li,[data-playing=true] .delivery-timeline-dot,[data-playing=true] .delivery-webhook-pulse{animation-play-state:running}@keyframes timeline-step{0%,4%{color:var(--text-faint)}10%,82%{color:var(--text)}92%,to{color:var(--text-faint)}}@keyframes timeline-dot{0%,4%{border-color:var(--line-strong);background:var(--surface);color:#0000;transform:scale(1)}8%{transform:scale(1.18)}10%,82%{border-color:var(--success);background:var(--success);color:#fff;transform:scale(1)}92%,to{border-color:var(--line-strong);background:var(--surface);color:#0000}}.delivery-domain{z-index:2;border:1px solid var(--line);width:34%;box-shadow:var(--shadow-float);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#ffffffeb;border-radius:12px;gap:8px;padding:14px;display:grid;position:absolute;top:64px;right:6%;transform:rotate(2deg)}.delivery-domain-name{align-items:center;gap:6px;font-size:12px;font-weight:600;display:flex}.delivery-domain-name svg{width:13px;height:13px;color:var(--text-muted)}.delivery-domain-status{background:var(--success-soft);width:fit-content;color:var(--success);border-radius:999px;align-items:center;gap:4px;padding:2px 8px 2px 6px;font-size:10.5px;font-weight:500;display:inline-flex}.delivery-domain-status svg{width:11px;height:11px}.delivery-domain-records{flex-wrap:wrap;gap:4px;display:flex}.delivery-domain-records span{border:1px solid var(--line);color:var(--text-muted);font-family:var(--font-mono);border-radius:5px;padding:2px 6px;font-size:9.5px}.delivery-webhook{z-index:2;background:var(--ink);box-shadow:var(--shadow-float);color:#fff;border:1px solid #ffffff1a;border-radius:10px;align-items:center;gap:8px;padding:9px 12px;font-size:11.5px;font-weight:500;display:flex;position:absolute;bottom:44px;right:9%;transform:rotate(-2deg)}.delivery-webhook code{color:#4ade80;background:#4ade8029;border-radius:5px;padding:1px 6px;font-size:10px}.delivery-webhook-pulse{background:#4ade80;border-radius:50%;width:7px;height:7px;animation:1.75s ease-out infinite paused webhook-pulse}@keyframes webhook-pulse{0%{box-shadow:0 0 #4ade8080}to{box-shadow:0 0 0 8px #4ade8000}}@media (width<=560px){.delivery-art-scene{height:400px}.delivery-message{width:78%;left:5%}.delivery-domain{width:46%;top:auto;bottom:92px;right:4%}.delivery-timeline code{display:none}}@media (prefers-reduced-motion:reduce){.delivery-timeline li,.delivery-timeline-dot,.delivery-webhook-pulse{animation:none}.delivery-timeline li{color:var(--text)}.delivery-timeline-dot{border-color:var(--success);background:var(--success);color:#fff}}}