:root {
  color-scheme: dark;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #06090c;
  color: #fffaf1;
}
* { box-sizing: border-box; }
html { scroll-snap-type: none; }
body { margin: 0; overflow-x: hidden; overflow-x: clip; }
a { color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a:focus-visible { outline: 2px solid #f2d69c; outline-offset: 4px; }
.skip-link {
  position: fixed;
  z-index: 10;
  top: -100px;
  left: 1rem;
  padding: .8rem;
  background: #06090c;
}
.skip-link:focus { top: .5rem; }
.reader-nav {
  position: fixed;
  z-index: 5;
  top: 0;
  left: 50%;
  width: 100%;
  transform: translateX(-50%);
  padding: max(.75rem, env(safe-area-inset-top)) 1rem 2rem;
  background: linear-gradient(#06090cf5, #06090cad 72%, transparent);
}
.masthead {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  color: #cdd5d9;
  font-size: .75rem;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.episode-links { display: flex; gap: 1.15rem; margin-top: .25rem; }
.episode-links a {
  display: flex;
  align-items: center;
  min-height: 44px;
  text-decoration: none;
  font-size: .875rem;
  font-weight: 600;
  color: #ced2d5;
}
.episode-links a[aria-current="page"] {
  color: #fffaf1;
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 8px;
}
.comic { margin: 0 auto; touch-action: pan-y pinch-zoom; }
.page-turn {
  position: fixed;
  z-index: 4;
  top: 0;
  overflow: hidden;
  background: #06090c;
  pointer-events: none;
  backface-visibility: hidden;
  will-change: transform, opacity;
}
.page-turn::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 55%, #0003 90%, #ffffff12);
}
.gesture-hint { display: none; }
@media (pointer: coarse) {
  html { scroll-snap-type: y mandatory; }
  .comic > .context, .comic > .panel {
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }
  .comic > .context:not(.opening):not(.ending) {
    scroll-margin-top: var(--reader-nav-height, 6rem);
  }
  .gesture-hint {
    display: block;
    margin: 1.75rem 0 0;
    font-size: .875rem;
    line-height: 1.65;
    color: #aebcc5;
  }
}
.context {
  padding: 3rem 1.5rem;
  background: #0c1116;
  border-top: 1px solid #263039;
  border-bottom: 1px solid #263039;
}
.context.opening { padding-top: max(8rem, calc(env(safe-area-inset-top) + 7rem)); }
.context.ending {
  min-height: 100svh;
  min-height: 100dvh;
  padding-top: max(8rem, calc(env(safe-area-inset-top) + 7rem));
}
.opening-note {
  margin: 0 0 1rem;
  font-size: 1rem;
  line-height: 1.5;
  color: #aebcc5;
}
.context h1 {
  margin: 0 0 1.75rem;
  font: 400 2rem/1.2 Georgia, ui-serif, serif;
  color: #fffaf1;
}
.scene {
  margin: 0 0 1.25rem;
  color: var(--accent);
  font-size: .875rem;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.action {
  margin: 0;
  font: 400 1.125rem/1.7 Georgia, ui-serif, serif;
  color: #d2d9de;
  text-wrap: pretty;
}
.action + .action { margin-top: 1.15rem; }
.panel {
  position: relative;
  isolation: isolate;
  margin: 0;
  width: 100%;
  height: 100vh;
  height: 100svh;
  height: 100dvh;
  overflow: hidden;
  background: #06090c;
}
.panel img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center top;
}
.panel::after {
  position: absolute;
  z-index: 1;
  inset: 0;
  content: "";
  pointer-events: none;
  background: linear-gradient(transparent 52%, #05090c1a 59%, #05090cc9 76%, #05090cf5 93%);
}
.dialogue {
  position: absolute;
  z-index: 2;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 3rem 1.5rem max(2rem, calc(env(safe-area-inset-bottom) + 1.25rem));
  text-shadow: 0 1px 12px #000a;
}
.line { margin: 0; }
.line + .line { margin-top: 1.1rem; }
.speaker {
  display: block;
  margin-bottom: .35rem;
  font-size: .875rem;
  font-weight: 650;
  letter-spacing: .12em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--accent);
}
.words {
  display: block;
  max-width: 30ch;
  font-size: clamp(1.15rem, 4.8vw, 1.45rem);
  font-weight: 450;
  letter-spacing: -.012em;
  line-height: 1.38;
  text-wrap: pretty;
}
.end-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: 1.25rem;
  font-size: .875rem;
  color: #d1d8db;
  text-decoration: none;
}
.end-link span { padding-left: .7rem; }
@media (min-aspect-ratio: 9/16) {
  .comic, .reader-nav { width: min(100%, calc(100dvh * 9 / 16)); }
}
@media (max-height: 560px) and (orientation: landscape) {
  .comic, .reader-nav { width: min(100%, 900px); }
  .panel img { width: 50%; object-fit: contain; object-position: center; }
  .panel::after { background: linear-gradient(90deg, transparent 35%, #06090c 52%); }
  .dialogue { left: 48%; padding: 1rem 1.5rem 1.5rem; }
  .words { font-size: 1.1rem; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-snap-type: none; }
}
@media print {
  .reader-nav, .skip-link, .end-link { display: none; }
  .comic { width: 100%; }
  .panel { height: 250mm; break-after: page; }
}