body:has(.comic-app) { background: var(--comic-gutter); }
body:has(.comic-app) header {
  background: var(--paper);
  border-bottom: 0;
  max-width: var(--reading);
}
.comic-app {
  background: var(--paper);
  padding: var(--space-4) var(--space-5) var(--space-8);
  min-height: calc(100svh - 4rem);
}
.comic-app h1 {
  font-size: clamp(1.75rem, 6vw, var(--comic-title));
  line-height: 1.3;
  font-weight: 800;
  white-space: pre-line;
  margin-bottom: var(--space-5);
}
.comic-app h1:focus { outline: none; }
.comic-app .primary {
  background: var(--comic-night);
  color: var(--comic-white);
  border-radius: var(--space-2);
  margin-top: var(--space-4);
}
.comic-app button:disabled { cursor: default; }
.comic-app > .secondary { margin-top: var(--space-3); }
.comic-app > .notice, .comic-app > .retention-notice {
  font-size: var(--text-small);
  margin-top: var(--space-5);
}
.comic-cover { text-align: center; }
.comic-cover h1 {
  font-size: var(--comic-logo);
  letter-spacing: -.08em;
  line-height: 1;
  margin: 0 0 var(--space-5);
}
.comic-subtitle { font-weight: 700; margin: var(--space-4) 0 var(--space-2); }
.comic-cover-copy { font-size: var(--text-lead); margin: var(--space-5) 0 0; white-space: pre-line; }
.comic-scene {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  border: var(--comic-line) solid var(--comic-frame);
  background: var(--comic-sky);
  padding: var(--space-5) var(--space-4) var(--space-3);
  min-height: 20rem;
  margin-bottom: var(--space-5);
  overflow: hidden;
}
.comic-peach { background: var(--comic-peach); }
.comic-scene::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 130%;
  height: 32%;
  bottom: -10%;
  left: -15%;
  border-radius: 50%;
  background: var(--paper);
}
.comic-bubble {
  position: relative;
  align-self: flex-start;
  z-index: 1;
  background: var(--comic-white);
  border: var(--comic-line) solid var(--comic-frame);
  border-radius: 50% / 35%;
  padding: var(--space-4) var(--space-5);
  text-align: center;
  font-size: var(--text-lead);
  font-weight: 700;
  white-space: pre-line;
  margin: 0 0 var(--space-5);
  max-width: 100%;
}
.comic-bubble::after {
  content: "";
  width: var(--space-3);
  height: var(--space-3);
  position: absolute;
  bottom: -.45rem;
  left: 25%;
  transform: rotate(45deg);
  border-right: var(--comic-line) solid var(--comic-frame);
  border-bottom: var(--comic-line) solid var(--comic-frame);
  background: var(--comic-white);
}
.comic-peach .comic-bubble { align-self: flex-end; }
.comic-scene .stage { margin: 0; min-height: 0; gap: var(--space-5); }
.comic-scene .character { min-width: 0; max-width: 12rem; }
.comic-scene .single .character { max-width: 13rem; }
.comic-scene figcaption { font-size: var(--text-small); margin-top: var(--space-2); }
.comic-sky { color: inherit; }
.comic-sky > span { position: absolute; color: var(--comic-star); font-size: var(--text-title); z-index: -1; }
.comic-sky > span:nth-child(1) { left: 8%; top: 48%; }
.comic-sky > span:nth-child(2) { right: 7%; top: 14%; }
.comic-sky > span:nth-child(3) { left: 45%; top: 38%; }
.comic-sky > span:nth-child(4) { right: 13%; top: 48%; font-size: var(--text-lead); }
.comic-sky > span:nth-child(5) { left: 20%; top: 12%; }
.comic-caption { font-size: .75rem; color: var(--muted); text-align: center; margin: var(--space-3) 0 0; }
.comic-narration { line-height: 1.8; }
.comic-hint, .comic-page-count { font-size: var(--text-small); color: var(--muted); text-align: center; margin: var(--space-3) 0 var(--space-5); }
.comic-unrevealed { text-align: center; font-size: 5.5rem; color: var(--comic-night); line-height: 1; padding-bottom: var(--space-4); }
.comic-app:has(.comic-birth-form) > .comic-scene { min-height: 0; }
.comic-app:has(.comic-birth-form) .comic-bubble { margin-bottom: var(--space-2); }
.comic-birth-form { border: 0; padding: 0; margin: var(--space-6) 0 var(--space-4); }
.comic-birth-form legend { font-weight: 700; margin-bottom: var(--space-3); }
.comic-birth-form .birth-field { padding: var(--space-3) 0; }
.comic-birth-form input, .comic-birth-form select { background: var(--comic-white); border-color: var(--comic-frame); }
.comic-episode { margin-bottom: var(--space-7); }
.comic-episode .comic-scene { min-height: 0; }
.comic-episode .stage { max-width: 22rem; width: 100%; align-self: center; }
.comic-episode h2 { font-size: var(--text-title); margin: var(--space-4) 0 var(--space-2); }
.comic-episode p { margin-bottom: var(--space-2); }
.comic-topic { font-size: var(--text-title); margin: var(--space-4) 0; }
.comic-reader { scroll-margin-top: var(--space-4); }
.comic-reader .comic-scene { min-height: 0; padding-top: var(--space-6); touch-action: pan-y pinch-zoom; }
.comic-reading-words { line-height: 1.9; font-size: var(--text-lead); }
.comic-dialogue {
  position: relative;
  background: var(--comic-white);
  border: var(--comic-line) solid var(--comic-frame);
  border-radius: var(--space-5);
  padding: var(--space-5);
}
.comic-dialogue::before {
  content: "";
  position: absolute;
  top: -.45rem;
  left: var(--space-6);
  width: var(--space-3);
  height: var(--space-3);
  background: var(--comic-white);
  border-top: var(--comic-line) solid var(--comic-frame);
  border-left: var(--comic-line) solid var(--comic-frame);
  transform: rotate(45deg);
}
.comic-controls { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-5); }
.comic-controls .primary { width: auto; flex: 1; margin: 0; }
.comic-controls .comic-page-count { margin: 0; white-space: nowrap; }
.comic-full-reading, .comic-coverage { margin: var(--space-5) 0; }
.comic-full-reading > summary { font-weight: 700; }
.comic-app .beta-information { margin-top: var(--space-6); }
@media (prefers-reduced-motion: no-preference) {
  .comic-scene { animation: comic-arrive var(--comic-motion) ease-out both; }
  @keyframes comic-arrive { from { opacity: .6; transform: translateY(.5rem); } to { opacity: 1; transform: none; } }
}
@media (max-width: 380px) {
  .comic-app { padding-inline: var(--space-4); }
  .comic-scene { padding-inline: var(--space-3); }
  .comic-bubble { font-size: var(--text-body); }
  .comic-controls { gap: var(--space-2); }
  .comic-controls button { padding-inline: var(--space-3); }
}