@font-face {
	font-family: 'Ethereal';
	src: local('Ethereal'), url('https://fonts.cdnfonts.com/s/78834/Ethereal-Thin.woff') format('woff');
	font-style: normal;
	font-weight: 100;
	font-display: swap;
}

body, button, input, textarea, dialog {
	font-family: 'Ethereal', Georgia, serif;
	font-weight: 100;
	letter-spacing: 0;
}


.memory-scene { background: #081037; }
.background-stars { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.background-star { position: absolute; transform: translate(-50%, -50%); pointer-events: none; user-select: none; }
.memory-sky { position: absolute; z-index: 5; left: 8%; top: 25%; width: 84%; height: 51%; pointer-events: none; }
.memory-sky__controls { position: absolute; inset: 0; }
.memory-star { position: absolute; width: 4%; aspect-ratio: 1; padding: 0; border: 0; background: transparent; cursor: pointer; pointer-events: auto; transform: translate(-50%, -50%); -webkit-tap-highlight-color: transparent; transition: opacity 400ms ease; }
.memory-star::after { content: ""; position: absolute; inset: -12px; border-radius: 50%; }
.memory-star img { display: block; width: 100%; height: 100%; pointer-events: none; filter: brightness(1.8) drop-shadow(0 0 6px #fff) drop-shadow(0 0 14px #ffe19b); animation: star-float 3.8s ease-in-out infinite alternate; animation-delay: var(--delay); }
.memory-star:hover img, .memory-star:focus-visible img { filter: brightness(2.3) drop-shadow(0 0 10px #fff) drop-shadow(0 0 22px #ffdb78); }
.memory-star:focus-visible { outline: 2px solid #ffdb78; outline-offset: 5px; border-radius: 50%; }
.memory-star:disabled { pointer-events: none; }
@keyframes star-float { from { transform: translateY(-5px) rotate(-7deg) scale(.94); } to { transform: translateY(5px) rotate(7deg) scale(1.06); } }
.memory-form .memory-form__input { top: auto; bottom: 9.5%; width: calc(65% - 42px); height: auto; min-height: 44px; max-height: min(30dvh, 280px); padding: 10px 8px; resize: none; overflow-y: hidden; line-height: 1.4; white-space: pre-wrap; overflow-wrap: anywhere; }
.memory-form__panel { position: absolute; left: 16%; bottom: 8.5%; width: 68%; height: var(--panel-height, 52px); box-sizing: border-box; border: 1px solid #8294c7; border-radius: 10px; background: #102162; box-shadow: 0 0 18px #7586ba55; pointer-events: none; }
.memory-form__submit { position: absolute; right: 18%; bottom: 9.5%; width: 40px; height: 44px; padding: 0; border: 0; background: transparent; color: #e4e8ff; pointer-events: auto; cursor: pointer; }
.memory-form__submit .material-symbols-outlined { font-size: 30px; }
.memory-form__submit:focus-visible { outline: 2px solid #ffdb78; border-radius: 8px; }
.memory-form__submit:disabled { opacity: .5; cursor: wait; }
.memory-status { position: absolute; top: 92%; left: 15%; width: 70%; margin: 0; color: #ffdb78; text-align: center; font-size: 16px; }
.memory-flight { position: fixed; z-index: 20; pointer-events: none; filter: brightness(2) drop-shadow(0 0 10px #fff) drop-shadow(0 0 24px #ffdb78); }
@media (prefers-reduced-motion: reduce) { .memory-star img { animation: none; } .memory-star { transition: none; } }

/* A single golden note with a folded corner and a gentle opening animation. */
.memory-dialog {
  box-sizing: border-box;
  width: min(420px, calc(100% - 36px));
  height: auto;
  min-height: min(280px, 65dvh);
  max-height: 75dvh;
  padding: 42px 16px 24px;
  overflow: hidden;
  border: 0;
  border-radius: 3px;
  background: #ffdb78;
  color: #081037;
  box-shadow: 0 16px 55px #0007;
  transform-origin: center 65%;
}
.memory-dialog::backdrop { background: rgb(2 5 22 / 78%); }
.memory-dialog__page {
  box-sizing: border-box;
  max-height: calc(75dvh - 68px);
  padding: 12px 20px 28px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: #967431 #f1c764;
  background: transparent;
}
.memory-dialog__page:focus-visible { outline: 1px solid #081037; outline-offset: -3px; }
.memory-dialog__page::-webkit-scrollbar { width: 9px; }
.memory-dialog__page::-webkit-scrollbar-track { background: #f1c764; }
.memory-dialog__page::-webkit-scrollbar-thumb { background: #967431; border: 2px solid #f1c764; border-radius: 3px; }
.memory-dialog h2 {
  margin: 0 0 28px;
  padding-bottom: 18px;
  border-bottom: 1px solid #08103744;
  color: #081037;
  font-size: 21px;
  line-height: 1.35;
  font-weight: 400;
  text-align: center;
}
.memory-dialog__text {
  margin: 0;
  color: #081037;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.85;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}
.memory-dialog__text::first-letter { font-size: 1em; }
.memory-dialog__text::after { content: '✦'; display: block; margin-top: 36px; text-align: center; font-size: 17px; opacity: .65; }
.memory-dialog__close {
  position: absolute;
  z-index: 1;
  top: 2px;
  right: 5px;
  width: 36px;
  height: 36px;
  border: 0;
  background: transparent;
  color: #081037;
  font-family: Georgia, serif;
  font-size: 28px;
  cursor: pointer;
}
.memory-dialog__close:focus-visible { outline: 2px solid #081037; outline-offset: -4px; }
@media (max-width: 480px) {
  .memory-dialog__page { padding-inline: 16px; }
  .memory-dialog__text { font-size: 17px; }
}
.memory-trail { position: fixed; inset: 0; z-index: 19; pointer-events: none; overflow: hidden; }
.memory-trail__particle { position: absolute; height: auto; pointer-events: none; filter: drop-shadow(0 0 5px #fff) drop-shadow(0 0 9px #ffe19b); }

.memory-dialog::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 22px;
  height: 22px;
  background: linear-gradient(135deg, #d6ad53 0 49%, #081037 51%);
  pointer-events: none;
}
.memory-dialog[open] { animation: note-open 480ms cubic-bezier(.16, 1, .3, 1) both; }
.memory-dialog[open]::backdrop { animation: note-backdrop 300ms ease-out both; }
@keyframes note-open {
  from { opacity: 0; transform: perspective(800px) translateY(28px) rotateX(-14deg) rotate(-3deg) scale(.88); }
  to { opacity: 1; transform: perspective(800px) translateY(0) rotateX(0) rotate(0) scale(1); }
}
@keyframes note-backdrop { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .memory-dialog[open], .memory-dialog[open]::backdrop { animation: none; }
}