/* A little floating studio, using Lais's own emotes. */
body { background: #fff7fb; }
body:before { background: radial-gradient(ellipse at 15% 20%, #f9dfef 0, transparent 45%), radial-gradient(ellipse at 85% 75%, #e9e2fb 0, transparent 48%), #fff9fc !important; }
.celestial-sky { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 1; }
.celestial-sky > * { position: absolute; animation: sky-float 9s ease-in-out infinite; animation-delay: var(--delay, 0s); }
.sky-star { width: var(--size, 24px); height: var(--size, 24px); color: #ca97b4; opacity: .65; }
.sky-moon { width: 115px; height: 115px; color: #ceabc8; filter: drop-shadow(0 8px 18px #dca5cb40); }
.sky-orbit { width: 280px; height: 280px; border: 1px solid #dcbdd451; border-radius: 50%; }
.sky-emote { width: 76px; height: 76px; object-fit: contain; filter: drop-shadow(0 10px 12px #a06a8c25); }
.site-wrapper { padding: 70px 22px; }
.site-main { width: 620px; max-width: 100%; }
.site-main > .inner { width: 100%; padding: 42px 32px; background: transparent; border: 0; border-radius: 0; box-shadow: none; }
.site-main > .inner:before { content: none; }
#image01 { position: relative; animation: portrait-float 6s ease-in-out infinite; }
#image01 .frame { box-shadow: 0 0 0 7px #fff, 0 0 0 8px #ebc9df, 0 12px 30px #bc88a92e; }
#image01:before, #image01:after { position: absolute; color: #c99ab8; font-size: 28px; top: 10%; left: calc(50% - 85px); content: '✧'; }
#image01:after { content: '☾'; left: calc(50% + 61px); top: 58%; font-size: 26px; }
#text03 { font-size: 1.6em; letter-spacing: .3em; }
#icons01 { gap: 12px; }
#icons01 li { animation: icon-float 5s ease-in-out infinite; }
#icons01 li:nth-child(2) { animation-delay: -.8s; }
#icons01 li:nth-child(3) { animation-delay: -1.6s; }
#icons01 li:nth-child(4) { animation-delay: -2.4s; }
#icons01 a { width: 38px; height: 38px; padding: 9px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #fceef5; box-shadow: 0 4px 10px #d6a0bf18; transition: background .2s, transform .2s; }
#icons01 a svg { width: 20px; height: 20px; }
#buttons01 a { color: #9b5e80; background: #fcf0f7; border: 1px solid #f2deeb; }
#buttons01 a:hover { background: #f6d6e7; }
#icons01 a:hover { background: #f6d6e7; transform: scale(1.12); }
.buttons-component a { box-shadow: 0 5px 14px #d698b529; transition: transform .2s, box-shadow .2s !important; }
.buttons-component a:hover { transform: translateY(-3px); box-shadow: 0 9px 20px #d698b541; }
a:focus-visible { outline: 2px solid #9c5683; outline-offset: 5px; }
.gallery-component .frame { border-radius: 12px; }
@keyframes sky-float { 0%,100% { transform: translateY(0) rotate(-6deg); } 50% { transform: translateY(-18px) rotate(5deg); } }
@keyframes portrait-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes icon-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@media (max-width: 700px) {
  .site-wrapper { padding: 66px 18px; }
  .site-main > .inner { padding: 30px 18px; }
  .sky-emote { width: 44px; height: 44px; }
  .sky-emote:nth-last-child(4) { left: 7% !important; top: 20% !important; }
  .sky-emote:nth-last-child(2) { left: 9% !important; top: 79% !important; }
  .sky-emote:last-child { left: 80% !important; top: 85% !important; }
  .sky-moon { width: 68px; height: 68px; }
  .sky-orbit { width: 150px; height: 150px; }
  .sky-star { opacity: .4; }
  #text03 { font-size: 1.4em; }
}
@media (prefers-reduced-motion: reduce) {
  .celestial-sky > *, #image01, #icons01 li { animation: none !important; }
  .buttons-component a, #icons01 a { transition: none !important; }
}