@charset "UTF-8";

/* A reading unfolds on the page; replies remain marginal notes, not chat balloons. */
.sky-note,
.story-panel,
.story-thread,
.story-bubble,
.story-composer,
.reading-basics {
  min-width: 0;
  max-width: 100%;
}

.sky-note {
  margin: 19px 0 25px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  color: #adbdc2;
  font-size: 11px;
  line-height: 1.9;
}

.sky-note > summary {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 55px;
  padding: 12px 0;
  list-style: none;
  cursor: pointer;
  color: #d5c49e;
  overflow-wrap: anywhere;
}

.sky-note > summary::-webkit-details-marker,
.reading-basics > summary::-webkit-details-marker { display: none; }

.sky-note > summary::after {
  content: "+";
  flex: 0 0 12px;
  margin-left: auto;
  color: var(--gold);
  text-align: center;
}

.sky-note[open] > summary::after { content: "−"; }
.sky-note > summary > :not(.sky-moon) { min-width: 0; }
.sky-note > summary > small { color: #94a9af; font-size: 10px; }

.sky-moon {
  display: inline-grid;
  flex: 0 0 27px;
  width: 27px;
  height: 27px;
  place-items: center;
  border: 1px solid #d4ba803b;
  border-radius: 50%;
  color: #dcc590;
  font: 17px/1 Georgia, serif;
}

.sky-facts {
  list-style: none;
  margin: 0 0 15px 38px;
  padding: 0;
  color: #bac7c9;
  overflow-wrap: anywhere;
}

.sky-facts > li { padding: 7px 0; }
.sky-facts > li + li { border-top: 1px solid #d4ba8012; }
.sky-facts small { color: #8fa4ad; font-size: 10px; }
.sky-source {
  color: #c5b78f;
  font-size: 10px;
  line-height: 1.9;
  text-decoration-color: #d4ba8045;
  text-underline-offset: 4px;
  overflow-wrap: anywhere;
}
.sky-note > .sky-source { display: inline-block; margin: 0 0 14px 38px; }
.sky-note > p { margin: 0 0 14px 38px; font-size: 10px; }

.story-panel {
  position: relative;
  margin: 27px 0 24px;
  padding: 26px 25px 24px;
  border: 1px solid #d4ba8030;
  border-radius: 7px;
  background: linear-gradient(150deg, #21394664, #101d2b24 76%);
}

.story-host {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.story-host .host-portrait { flex: 0 0 43px; width: 43px; height: 43px; }
.story-host > :not(.host-portrait) { min-width: 0; }
.story-host-name {
  color: #e0cfaa;
  font: 16px/1.6 "Songti SC", "Noto Serif SC", STSong, Georgia, serif;
  letter-spacing: .05em;
}
.story-host small { color: #91a7b0; font-size: 10px; line-height: 1.8; }
.story-host > small:last-child { margin-left: auto; text-align: right; }
.story-host-name + small { display: block; }

.story-progress { display: flex; gap: 6px; margin: 22px 0 19px; }
.story-progress > span {
  flex: 1 1 0;
  height: 2px;
  border-radius: 1px;
  background: #bcc5bd20;
  transition: background-color .3s ease;
}
.story-progress > .done { background: #b79c62a6; }
.story-progress > .active { background: #dec690; }

.story-scene {
  margin: 17px 0 23px;
  color: #bec8c7;
  font: 13px/2.1 "Songti SC", "Noto Serif SC", STSong, Georgia, serif;
  letter-spacing: .035em;
  white-space: pre-line;
  overflow-wrap: anywhere;
}

.story-question-echo {
  margin: 19px 0 24px;
  padding: 13px 0;
  border-top: 1px solid #d4ba801b;
  border-bottom: 1px solid #d4ba801b;
  color: #aebfc5;
  font-size: 12px;
  line-height: 1.95;
  white-space: pre-line;
  overflow-wrap: anywhere;
}
.story-question-echo small { color: #9aabac; font-size: 10px; letter-spacing: .04em; }
.story-question-echo p { margin-top: 5px; }

.story-thread { display: flex; flex-direction: column; gap: 27px; margin: 24px 0; }
.story-bubble {
  width: 100%;
  padding: 2px 0 3px 16px;
  border-left: 1px solid #d4ba8063;
  animation: story-page-arrive .35s ease both;
}
.story-bubble > small {
  display: block;
  margin-bottom: 10px;
  color: #bcac85;
  font-size: 10px;
  line-height: 1.8;
  letter-spacing: .08em;
}
.story-bubble p {
  color: #e0e2d7;
  font-size: 14px;
  line-height: 2.1;
  letter-spacing: .025em;
  white-space: pre-line;
  overflow-wrap: anywhere;
}
.story-bubble p + p { margin-top: 13px; }
.story-bubble.from-you {
  align-self: flex-end;
  width: fit-content;
  max-width: 88%;
  padding: 1px 13px 2px 0;
  border-left: 0;
  border-right: 1px solid #9bb2bd43;
}
.story-bubble.from-you > small { color: #8da5b0; text-align: right; margin-bottom: 5px; }
.story-bubble.from-you p { color: #adbec5; font-size: 12px; line-height: 1.95; }

.story-choices { display: flex; flex-wrap: wrap; gap: 9px; margin: 20px 0 16px; }
.story-choices .chip {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
  min-height: 42px;
  padding: 10px 13px;
  border-color: #d4ba8042;
  border-radius: 4px;
  color: #cbbfaa;
  font-size: 11px;
  line-height: 1.7;
  text-align: left;
  white-space: normal;
  overflow-wrap: anywhere;
  transition: border-color .2s ease, background-color .2s ease;
}
.story-choices .chip:hover:not(:disabled),
.story-choices .chip.active { border-color: #d4ba8099; background: #d4ba800d; color: #eed9ad; }
.story-choices .chip:disabled { cursor: default; }

.story-composer { display: flex; flex-direction: column; align-items: stretch; gap: 12px; margin-top: 19px; }
.story-composer textarea {
  display: block;
  min-height: 96px;
  max-height: 250px;
  padding: 13px 14px;
  border-color: #b7c4ad36;
  background: #09182359;
  font-size: 13px;
  line-height: 1.9;
  resize: vertical;
}
.story-composer textarea:focus { border-color: #d4ba809c; }
.story-composer .primary { align-self: flex-end; min-height: 44px; padding: 11px 19px; gap: 16px; font-size: 12px; }
.story-composer label { color: #b3c2c4; font-size: 11px; line-height: 1.8; }

.story-status { margin: 15px 0 0; color: #95aab1; font-size: 10px; line-height: 1.9; overflow-wrap: anywhere; }
.story-waiting { display: inline-flex; align-items: center; gap: 5px; min-height: 22px; padding: 3px 2px; vertical-align: middle; }
.story-waiting i { display: block; width: 4px; height: 4px; border-radius: 50%; background: var(--gold); opacity: .45; animation: story-breathe 1.5s ease-in-out infinite; }
.story-waiting i:nth-child(2) { animation-delay: .18s; }
.story-waiting i:nth-child(3) { animation-delay: .36s; }
.story-ending { margin: 24px 0 4px; padding-top: 19px; border-top: 1px solid #d4ba8029; color: #d0bd92; font: 14px/2 "Songti SC", "Noto Serif SC", STSong, Georgia, serif; white-space: pre-line; overflow-wrap: anywhere; }
.story-ending small { display: block; margin-top: 10px; color: #92a7af; font: 10px/1.9 -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif; }

.story-notes-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
  min-height: 48px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
  color: #d0bd93;
  font-size: 12px;
  line-height: 1.9;
  text-align: left;
}
.story-notes-toggle small { color: #8fa5ad; font-size: 10px; }
.reading-basics { margin: 19px 0 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.reading-basics > summary { display: flex; align-items: center; gap: 13px; min-height: 49px; padding: 13px 0; list-style: none; color: #bfb592; font-size: 11px; line-height: 1.8; cursor: pointer; }
.reading-basics > summary::after { content: "+"; margin-left: auto; color: var(--gold); }
.reading-basics[open] > summary::after { content: "−"; }
.reading-basics > p { margin: 8px 0 17px; color: #afc0c3; font-size: 12px; line-height: 2; }
.reading-basics .reading-text { padding: 4px 0 18px; font-size: 13px; }
.reading-basics .reading-text .reflection { font-size: 16px; }
.reading-basics .source-details { border-bottom: 0; }
.sky-note > summary:focus-visible,
.reading-basics > summary:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; border-radius: 2px; }

.direction-tag { display: inline-flex; align-items: center; vertical-align: middle; gap: 5px; margin-left: 9px; padding: 4px 8px; border: 1px solid #a9bcbd35; border-radius: 3px; color: #a9bdc0; font: 10px/1.4 -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif; letter-spacing: .035em; white-space: nowrap; }
.direction-tag.reversed { border-color: #d4ba8066; background: #d4ba800a; color: #e1c18a; }

@keyframes story-page-arrive { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
@keyframes story-breathe { 0%, 100% { opacity: .3; transform: translateY(0); } 50% { opacity: .9; transform: translateY(-2px); } }

@media (min-width: 621px) and (max-width: 900px) {
  .story-panel { padding: 22px 18px; }
  .story-host { gap: 9px; }
  .story-host-name { font-size: 15px; }
  .story-bubble { padding-left: 13px; }
  .story-bubble p { font-size: 13px; }
  .sky-note > summary { gap: 8px; }
  .sky-note > summary > small { max-width: 72px; text-align: right; }
}

@media (max-width: 620px) {
  .sky-note { margin-top: 17px; margin-bottom: 23px; }
  .sky-note > summary { flex-wrap: wrap; gap: 7px 10px; }
  .sky-note > summary > small { flex: 0 1 auto; font-size: 10px; }
  .sky-facts { margin-left: 0; padding-left: 12px; border-left: 1px solid #d4ba8029; }
  .sky-note > .sky-source, .sky-note > p { margin-left: 0; }
  .story-panel { margin-top: 23px; padding: 22px 20px; }
  .story-host .host-portrait { flex-basis: 39px; width: 39px; height: 39px; }
  .story-host-name { font-size: 16px; }
  .story-host > small:last-child { font-size: 9px; }
  .story-scene { font-size: 13px; line-height: 2; }
  .story-thread { gap: 25px; }
  .story-bubble { padding-left: 13px; }
  .story-bubble p { font-size: 14px; line-height: 2.05; }
  .story-bubble.from-you { max-width: 92%; }
  .story-bubble.from-you p { font-size: 12px; }
  .story-choices { gap: 8px; }
  .story-choices .chip { min-height: 44px; font-size: 11px; }
  .story-composer textarea { font-size: 16px; line-height: 1.75; }
  .story-composer .primary { min-height: 45px; }
  .story-notes-toggle { min-height: 49px; }
}

@media (max-width: 360px) {
  .story-panel { padding: 19px 15px; }
  .story-host { gap: 9px; flex-wrap: wrap; }
  .story-host > small:last-child { margin-left: 48px; flex-basis: 100%; text-align: left; }
  .story-progress { margin-top: 18px; }
  .story-bubble { padding-left: 11px; }
  .story-bubble p { font-size: 13px; }
  .story-choices .chip { flex: 1 1 100%; }
  .story-composer .primary { width: 100%; }
  .story-notes-toggle { flex-wrap: wrap; gap: 3px 10px; }
  .direction-tag { margin-left: 5px; padding-inline: 6px; }
}

body.reduce-motion .story-bubble,
body.reduce-motion .story-waiting i { animation: none !important; transform: none; }
body.reduce-motion .story-progress > span,
body.reduce-motion .story-choices .chip { transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  .story-bubble, .story-waiting i { animation: none !important; transform: none; }
  .story-progress > span, .story-choices .chip { transition: none !important; }
}
.card-object .front-face.is-reversed{transform:rotate(180deg)}
.reading-card-title{font-size:28px;margin:18px 0 8px}.story-optional{margin:14px 0 8px;color:var(--muted);font-size:11px}.story-optional summary{cursor:pointer;list-style:none;padding:9px 0;display:flex;justify-content:space-between}.story-optional summary:focus-visible{outline:1px solid var(--gold);outline-offset:4px}.story-optional form{margin-top:10px}.story-continue{margin-top:20px}.story-thread>.story-bubble:last-child{animation:story-reveal .5s ease both}
@keyframes story-reveal{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:translateY(0)}}
.hero-copy>.sky-note{max-width:370px;margin-top:21px}.hero .sky-note summary{padding:12px 14px}.hero .sky-note small{font-size:9px}.hero .sky-note .sky-moon{width:27px;height:27px;font-size:19px}
@media(max-width:620px){.hero-copy>.sky-note{order:7;width:100%;text-align:left;max-width:330px}.hero .memory{order:8}.reading-card-title{font-size:25px}}