.top-page.top-is-loading { overflow: hidden; }
.top-page .top-panel-shell {
  transition: opacity 0.55s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.top-is-loading .top-panel-shell {
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
}
.top-opening {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  overflow: hidden;
  background-color: #f9dce7;
  background-image: linear-gradient(#ffffff3b 1px, transparent 1px), linear-gradient(90deg, #ffffff3b 1px, transparent 1px);
  background-size: 32px 32px;
  opacity: 1;
  transition: opacity 0.55s ease;
}
.top-opening[hidden] { display: none; }
.top-opening.is-leaving { opacity: 0; pointer-events: none; }
.top-no-script {
  position: fixed;
  inset: 0;
  z-index: 101;
  margin: 0;
  padding: 32px;
  display: grid;
  place-items: center;
  background: #fff1f6;
  color: #a93867;
}
.opening-content {
  position: relative;
  width: min(560px, 92vw, 78svh);
  aspect-ratio: 1;
  transform: translateY(-2%);
  transition: transform 0.55s ease, opacity 0.4s ease;
}
.top-opening.is-leaving .opening-content { transform: translateY(-2%) scale(1.06); opacity: 0; }
.opening-content img { display: block; position: absolute; object-fit: contain; opacity: 0; }
.opening-sticker {
  z-index: 1;
  width: 34%;
  height: 34%;
  filter: drop-shadow(0 5px 3px #8a45662b);
  transform: rotate(var(--angle));
}
.opening-sticker-one { left: 3%; top: 1%; --angle: -15deg; --arrival: -75px; }
.opening-sticker-two { right: 0; top: 2%; --angle: 13deg; --arrival: 75px; }
.opening-sticker-three { left: 35%; top: -9%; width: 30%; height: 30%; --angle: -9deg; --arrival: 45px; }
.opening-teacher { top: 84%; width: 25%; height: 25%; }
.opening-teacher-one { left: 0; --angle: -8deg; --arrival: -45px; }
.opening-teacher-two { left: 25%; --angle: 5deg; --arrival: -20px; }
.opening-teacher-three { left: 50%; --angle: -5deg; --arrival: 20px; }
.opening-teacher-four { left: 75%; --angle: 8deg; --arrival: 45px; }
.opening-title-art { z-index: 2; left: 0; top: 23%; width: 100%; height: 67%; }
.is-art-ready .opening-sticker { animation: opening-stamp 0.6s cubic-bezier(0.18, 0.85, 0.24, 1.12) both; }
.is-art-ready .opening-sticker-two { animation-delay: 0.14s; }
.is-art-ready .opening-sticker-three { animation-delay: 0.28s; }
.is-art-ready .opening-teacher-one { animation-delay: 0.3s; }
.is-art-ready .opening-teacher-two { animation-delay: 0.38s; }
.is-art-ready .opening-teacher-three { animation-delay: 0.46s; }
.is-art-ready .opening-teacher-four { animation-delay: 0.54s; }
.is-art-ready .opening-title-art { animation: opening-title-stamp 0.65s 0.38s cubic-bezier(0.16, 0.9, 0.22, 1.08) both; }
@keyframes opening-stamp {
  0% { opacity: 0; transform: translate(var(--arrival), -28px) rotate(calc(var(--angle) * 1.8)) scale(1.2); }
  55% { opacity: 1; }
  100% { opacity: 1; transform: translate(0, 0) rotate(var(--angle)) scale(1); }
}
@keyframes opening-title-stamp {
  0% { opacity: 0; transform: translateY(-16px) rotate(-4deg) scale(1.17); }
  65% { opacity: 1; }
  100% { opacity: 1; transform: translateY(0) rotate(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .is-art-ready .opening-content img { animation: none; opacity: 1; }
  .top-page .top-panel-shell { transform: none; transition: opacity 0.2s ease; }
  .top-opening { transition-duration: 0.2s; }
  .top-opening.is-leaving .opening-content { transform: translateY(-2%); }
}
.top-page.browser-notice-open {
  overflow: hidden;
}

.browser-notice {
  box-sizing: border-box;
  width: min(460px, calc(100% - 32px));
  max-height: calc(100dvh - 32px);
  margin: auto;
  padding: 28px;
  overflow: auto;
  overscroll-behavior: contain;
  border: 1px solid #ed86a9;
  border-top: 5px solid #ed86a9;
  border-radius: 8px;
  background: #fff;
  color: #49333d;
  box-shadow: 0 16px 48px #592a3b30;
  text-align: left;
  letter-spacing: 0;
  opacity: 1;
  transition: opacity 0.35s ease;
}

.browser-notice::backdrop {
  background: #37232d80;
  opacity: 1;
  transition: opacity 0.35s ease;
}

.browser-notice.is-closing,
.browser-notice.is-closing::backdrop {
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  .browser-notice,
  .browser-notice::backdrop {
    transition-duration: 0.001ms;
  }
}

.browser-notice h2 {
  margin: 0 0 18px;
  color: #742644;
  font-size: 20px;
  line-height: 1.5;
  outline: none;
}

.browser-notice p {
  margin: 0 0 16px;
  font-size: 15px;
  line-height: 1.8;
  overflow-wrap: anywhere;
}

.browser-notice .browser-notice-recommendation {
  color: #963653;
  font-weight: 700;
}

.browser-notice-confirm {
  width: 100%;
  min-height: 48px;
  margin-top: 4px;
  padding: 12px 16px;
  border: 0;
  border-radius: 6px;
  background: #ed86a9;
  color: #482134;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.browser-notice-confirm:focus-visible {
  outline: 3px solid #742644;
  outline-offset: 3px;
}