/* A full-page field of cyan and violet patterns, behind the content. */
body{position:relative;isolation:isolate}
.site-shell{z-index:auto;isolation:auto}
.page-art{
  position:absolute;inset:0;z-index:-1;min-height:100%;overflow:hidden;
  pointer-events:none;contain:paint;
  background:
    radial-gradient(ellipse 65% 13% at 0 24%,#c4f6ff88,transparent 78%),
    radial-gradient(ellipse 65% 12% at 100% 45%,#e0d4ff99,transparent 78%),
    radial-gradient(ellipse 70% 12% at 0 67%,#d3faffaa,transparent 76%),
    radial-gradient(ellipse 65% 13% at 100% 84%,#e6dcffaa,transparent 76%),
    linear-gradient(180deg,#fff 0%,#fcfdff 36%,#fff 53%,#f9fcff 75%,#f2f8ff 94%,#eee9ff 100%);
}
.page-art::after{content:none}
.art-piece{
  --drift:0px;--tilt:0deg;position:absolute;display:block;
  transform:translate3d(0,var(--drift),0) rotate(var(--tilt));
  transform-origin:center;user-select:none;
}
.art-stripes{
  --stripe:#aaa6ff4d;width:310px;height:240px;border-radius:64px;
  background:repeating-linear-gradient(135deg,var(--stripe) 0 5px,transparent 5px 15px);
  mask-image:linear-gradient(100deg,#000 48%,transparent 100%);
}
.art-dots{
  --dot:#9a8cf04d;width:250px;height:260px;border-radius:50%;
  background-image:radial-gradient(circle,var(--dot) 2.7px,transparent 3.2px);
  background-size:19px 19px;
  mask-image:radial-gradient(ellipse at 38% 45%,#000 27%,transparent 73%);
}
.art-spark{
  color:#aa83f2;font:80px/1 Arial,sans-serif;filter:drop-shadow(0 3px 0 #fff);
}
.art-orbit{
  width:275px;height:108px;border:2px solid #aab9f180;border-radius:50%;
  box-shadow:0 0 0 17px #e4e9ff55;
}
.art-orbit::before,.art-orbit::after{content:"";position:absolute;border-radius:50%}
.art-orbit::before{width:20px;height:20px;left:24%;top:-10px;background:linear-gradient(120deg,#00d5e7,#7f6dff)}
.art-orbit::after{width:9px;height:9px;right:13%;bottom:3px;background:#bb91ff}
.decor-01{top:1%;left:calc(50% - 730px);--tilt:-12deg;--stripe:#61d5ed47}
.decor-02{top:7%;right:calc(50% - 710px);--dot:#9988f966}
.decor-03{top:17%;left:calc(50% - 530px);font-size:44px;color:#53c8ef;--tilt:-12deg}
.decor-04{top:20%;right:calc(50% - 700px);--tilt:12deg}
.decor-05{top:28%;left:calc(50% - 720px);--tilt:-30deg}
.decor-06{top:34%;right:calc(50% - 695px);--dot:#54ccec66}
.decor-07{top:40%;right:calc(50% - 545px);font-size:57px;--tilt:12deg}
.decor-08{top:45%;left:calc(50% - 715px);--tilt:-12deg;--stripe:#7cceff55}
.decor-09{top:53%;right:calc(50% - 690px)}
.decor-10{top:59%;left:calc(50% - 695px);--tilt:27deg}
.decor-11{top:65%;right:calc(50% - 720px);--tilt:12deg;--stripe:#b896ef55}
.decor-12{top:72%;left:calc(50% - 545px);font-size:58px;color:#49c5ec;--tilt:-9deg}
.decor-13{top:77%;left:calc(50% - 700px);--dot:#71c9f36b}
.decor-14{top:83%;right:calc(50% - 715px);--tilt:12deg;--stripe:#9398f455}
.decor-15{top:87%;left:calc(50% - 600px);--tilt:-30deg}
.decor-16{bottom:-30px;right:calc(50% - 605px);--dot:#ad87e980}
.decor-17{bottom:75px;left:calc(50% - 380px);font-size:40px;--tilt:-9deg}
.decor-18{bottom:-55px;left:calc(50% - 720px);--tilt:-12deg;--stripe:#68cdea55}
/* Keep pattern details in the margins, with a soft wash across wide gaps. */
.closing{isolation:isolate}

.flow{position:relative;background:linear-gradient(135deg,#f2fcff,#fbf7ff)}
.closing::before{
  content:"";position:absolute;z-index:-1;pointer-events:none;inset:-30px -36px -28px;
  mask-image:radial-gradient(ellipse,#000 30%,transparent 74%);
  background:radial-gradient(ellipse at 20% 60%,#b9f6ff66,transparent 60%),radial-gradient(ellipse at 90% 15%,#d9bfff66,transparent 62%);
}
.footer{position:relative}
.footer::before{
  content:"";position:absolute;left:calc(50% - 30px);top:19px;width:60px;height:2px;
  background:linear-gradient(90deg,transparent,#72cfee,#aa8ce8,transparent);
}
@media(max-width:1100px){
  .decor-01,.decor-05,.decor-08,.decor-10,.decor-13,.decor-18{left:-115px}
  .decor-02,.decor-04,.decor-06,.decor-09,.decor-11,.decor-14{right:-125px}
  .decor-03,.decor-12{left:3%}
  .decor-07{right:3%}
  .decor-15{left:-100px}
  .decor-16{right:-70px}
  .decor-17{left:12%}
}
@media(max-width:700px){
  .page-art{
    background:
      radial-gradient(ellipse 100% 10% at 0 24%,#c4f6ff70,transparent 85%),
      radial-gradient(ellipse 100% 10% at 100% 45%,#e0d4ff80,transparent 80%),
      radial-gradient(ellipse 100% 10% at 0 68%,#d3faff99,transparent 80%),
      linear-gradient(180deg,#fff 0%,#fcfdff 40%,#fff 55%,#f7fbff 82%,#eeeaff 100%);
  }
  .art-stripes{width:200px;height:180px;border-radius:43px;background-size:auto;--stripe:#a4a1ed55}
  .art-dots{width:170px;height:215px;background-size:15px 15px}
  .art-orbit{width:180px;height:75px;box-shadow:0 0 0 10px #e4e9ff66}
  .art-orbit::before{width:13px;height:13px;top:-7px}
  .art-orbit::after{width:7px;height:7px}
  .decor-01,.decor-08,.decor-18{left:-115px}
  .decor-05,.decor-10{left:-98px}
  .decor-13{left:-62px}
  .decor-02,.decor-06,.decor-09{right:-54px}
  .decor-04,.decor-11,.decor-14{right:-107px}
  .decor-03{top:19%;left:7px;font-size:25px}
  .decor-07{right:8px;font-size:31px}
  .decor-12{top:75%;left:5px;font-size:32px}
  .decor-15{top:88%;left:-104px}
  .decor-16{right:-57px;bottom:4px}
  .decor-17{left:20px;bottom:104px;font-size:26px}
  .closing::before{inset:-24px -16px}
  .footer::before{top:17px}
}
@media(prefers-reduced-motion:reduce){
  .art-piece{transform:rotate(var(--tilt));transition:none}
}