@charset "UTF-8";

/* The generated scene is atmosphere. Dated sky data remains in the live observatory UI. */
body::before {
  background:
    linear-gradient(90deg, #06090bb8 0%, #06090b78 37%, #06090b52 72%, #06090b8c 100%),
    linear-gradient(0deg, #070a0c 0%, transparent 31%, transparent 78%, #070a0c91 100%),
    url("assets/reading-chamber.webp") center top / cover no-repeat;
  opacity: 1;
}

.hero {
  position: relative;
  border-bottom: 1px solid #b9a77d24;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 20px 10px 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse at 45% 45%, #071015ae, transparent 70%);
}

.hero-display {
  filter: drop-shadow(0 22px 32px #000a);
}

.host-line {
  gap: 20px;
  margin: 30px 0 31px;
}

.host-portrait-frame,
.quiet-host-frame {
  position: relative;
  display: block;
  flex: none;
  width: 94px;
  height: 112px;
  overflow: hidden;
  border: 1px solid #d4bc89a8;
  border-radius: 48% 48% 12px 12px / 31% 31% 12px 12px;
  background: #0b1117;
  box-shadow: 0 0 0 5px #080d0ec7, 0 0 0 6px #c4a87634, 0 17px 30px #0009;
}

.host-portrait-frame::after,
.quiet-host-frame::after {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px solid #d8c39150;
  border-radius: inherit;
  pointer-events: none;
}

.host-portrait-frame .host-portrait,
.quiet-host-frame img {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 0;
  object-fit: cover;
  object-position: center 50%;
  transform: scale(1.52);
  transform-origin: center 51%;
}

.host-line p {
  color: #e6dcc9;
  font: 400 17px/1.65 "Songti SC", "Noto Serif SC", STSong, Georgia, serif;
  letter-spacing: .045em;
  text-shadow: 0 1px 9px #000b;
}

.host-line small {
  margin-top: 5px;
  color: #c3bdad;
  font: 11px/1.7 -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif;
  letter-spacing: .025em;
}

.prepare-host {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  max-width: 420px;
  margin: 3px auto 27px;
  text-align: left;
}

.prepare-host > span:last-child {
  color: #e8dbc3;
  font: 400 18px/1.6 "Songti SC", "Noto Serif SC", STSong, Georgia, serif;
  letter-spacing: .04em;
}

.prepare-host small {
  display: block;
  margin-top: 7px;
  color: #b5b2a8;
  font: 11px/1.7 -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif;
  letter-spacing: .015em;
}

.quiet-host { gap: 19px; margin-top: 34px; }
.quiet-host-frame { width: 70px; height: 82px; }
.quiet-host-frame img { flex: none; box-shadow: none; }
.quiet-host > span:last-child { color: #c8bdab; font-size: 12px; }

.sky-preview {
  background: linear-gradient(90deg, #070a0b94, #070a0be6 46%, #070a0bf2), url("assets/moon-instrument.webp") 15% 35% / cover no-repeat;
  box-shadow: inset 0 0 0 4px #070a0ab8, inset 0 0 0 5px #cdb58534, 0 19px 48px #0007;
}

.sky-preview::before { opacity: .21; }

.observatory {
  background:
    linear-gradient(90deg, #090c0dd9 0%, #090c0dd9 44%, #090c0d 69%),
    url("assets/moon-instrument.webp") left 8% top / 53% auto no-repeat,
    #090c0d;
}

.observatory::before { opacity: .19; }

.lunar-plate {
  padding: 29px 0 19px;
  border: 1px solid #c5a97558;
  background:
    linear-gradient(0deg, #05090bd4, transparent 25%, transparent 81%, #05090ba8),
    url("assets/moon-instrument.webp") center 29% / cover no-repeat;
  box-shadow: 0 22px 65px #0009, inset 0 0 0 7px #090c0da6;
}

.lunar-plate > img {
  box-shadow: 0 0 0 1px #d9c18d65, 0 0 0 9px #080b0dbb, 0 0 44px #e0be7735;
}

.lunar-plate figcaption {
  padding: 7px 11px;
  background: #05090bc9;
  color: #c8c8bc;
  text-shadow: 0 1px 3px #000;
}

body.quiet-reading::before { opacity: 0; }

.quiet-stage {
  background: #060809;
}

.quiet-stage::before {
  background:
    radial-gradient(ellipse at 50% 48%, #050708ec 0%, #050708e3 25%, #050708ad 54%, #05070891 100%),
    linear-gradient(0deg, #050708f2 0%, transparent 32%),
    url("assets/reading-chamber.webp") center center / cover no-repeat;
  opacity: .88;
}

.quiet-stage.is-composing::before { opacity: 1; }

.quiet-waiting {
  position: relative;
  flex-direction: column;
  gap: 2px;
  min-height: 48px;
  margin-top: 0;
}

.quiet-orbit {
  position: relative;
  display: block;
  width: 30px;
  height: 30px;
  border: 1px solid #bdad8655;
  border-radius: 50%;
  background: radial-gradient(circle, #cfbb8936 0 1px, transparent 2px);
  box-shadow: 0 0 21px #bda77b14;
}

.quiet-orbit::before {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1px solid #bdad862c;
  border-radius: 50%;
}

.quiet-orbit i {
  position: absolute;
  left: 12px;
  top: -2px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #e1d2aa;
  box-shadow: 0 0 10px 2px #d0b87985;
}

.quiet-stage .quiet-wait-option {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 0;
  border: 0;
  background: none;
  box-shadow: none;
  opacity: 0;
  color: #aaa293;
  font: 10px/1.7 -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif;
  letter-spacing: .045em;
  cursor: pointer;
}
.quiet-stage .quiet-wait-option:hover { color: #e0d0ae; }

@keyframes quietOrbit { to { transform: rotate(360deg); } }
@keyframes quietWaitingNote { to { opacity: 1; } }

body.quiet-reading:not(.reduce-motion) .quiet-orbit {
  animation: quietOrbit 11s linear infinite !important;
}

body.quiet-reading:not(.reduce-motion) .quiet-wait-option {
  animation: quietWaitingNote .6s ease 6s forwards !important;
}

body.quiet-reading.reduce-motion .quiet-wait-option { opacity: 1; }

@media (max-width: 680px) {
  body::before {
    background:
      linear-gradient(90deg, #06090bc4, #06090b75 52%, #06090ba8),
      linear-gradient(0deg, #070a0c 0%, transparent 30%, #070a0c4d 100%),
      url("assets/reading-chamber.webp") 19% center / auto 100vh no-repeat;
  }
  .hero::before { inset: 0; background: radial-gradient(ellipse at center, #071015a3, #07101530 72%); }
  .host-line { gap: 17px; margin: 24px auto 23px; max-width: 330px; width: 100%; }
  .host-portrait-frame { width: 80px; height: 96px; }
  .host-line p { font-size: 15px; }
  .host-line small { font-size: 10px; }
  .prepare-host { gap: 18px; max-width: 315px; margin-bottom: 24px; }
  .prepare-host .host-portrait-frame { width: 76px; height: 91px; }
  .prepare-host > span:last-child { font-size: 15px; }
  .prepare-host small { font-size: 10px; }
  .quiet-host-frame { width: 66px; height: 78px; }
  .observatory { background: #090c0d; }
  .lunar-plate { max-width: 325px; }
  .quiet-stage::before {
    background:
      radial-gradient(ellipse at 50% 46%, #050708ed 0%, #050708df 43%, #050708b3 100%),
      url("assets/reading-chamber.webp") 21% center / auto 100vh no-repeat;
    opacity: .88;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.quiet-reading .quiet-orbit,
  body.quiet-reading .quiet-wait-option { animation: none !important; }
  .quiet-stage .quiet-wait-option { opacity: 1; }
}