/* Soft volume around the workspace; purely decorative and non-interactive. */
/* Continuous lavender grid from the header through the footer. */
body {
 background-color:var(--paper,#f8f7f3);
 background-image:linear-gradient(#ad95ce22 1px,transparent 1px),linear-gradient(90deg,#ad95ce22 1px,transparent 1px);
 background-size:48px 48px;
 background-position:center top;
}
body > main { position:relative; isolation:isolate; }
.apira-depth { position:absolute; inset:0 0 auto; height:1100px; overflow:hidden; pointer-events:none; z-index:-1; }
.apira-depth span { position:absolute; display:block; }
.apira-depth-orb { width:clamp(200px,20vw,340px); aspect-ratio:1; left:clamp(-180px,-7vw,-70px); top:145px; border-radius:50%; opacity:.65; background:radial-gradient(circle at 29% 25%,#fff 2%,#f4eefe 30%,#ded0fb 65%,#ba9eec 100%); box-shadow:inset -18px -15px 25px #a58ac929,22px 28px 50px #ac94d524; }
.apira-depth-small { width:clamp(140px,14vw,240px); aspect-ratio:1; right:clamp(-130px,-5vw,-45px); top:560px; border-radius:50%; opacity:.65; background:radial-gradient(circle at 28% 24%,#fff9,#e9e3f7 48%,#bdabd8); box-shadow:20px 25px 40px #afa0c524; }
.apira-depth-ribbon { width:clamp(250px,26vw,410px); aspect-ratio:1; right:clamp(-290px,-17vw,-170px); top:90px; border:clamp(38px,4vw,60px) solid #ece7f4; border-radius:30%; opacity:.65; transform:rotate(35deg); box-shadow:inset 3px 5px 9px #fff,7px 12px 18px #b7a6ce20; }
.hero .workspace { box-shadow:0 25px 55px #735d8f1c,0 4px 9px #735d8f07; }
@media(max-width:680px) {
 body { background-size:36px 36px; }
 .apira-depth { height:950px; }
 .apira-depth-orb { width:210px; left:-155px; top:100px; opacity:.5; }
 .apira-depth-small { width:150px; right:-115px; top:520px; opacity:.5; }
 .apira-depth-ribbon { width:280px; right:-245px; top:95px; opacity:.45; }
 .hero .workspace { box-shadow:0 14px 30px #735d8f14; }
}