.novel-chamber {
  --novel-accent: #9adce0;
  --novel-accent-soft: rgba(154, 220, 224, .24);
  position: relative;
  isolation: isolate;
  min-height: min(1000px, 100svh);
  overflow: hidden;
  color: #e8e1d2;
  background: #020404;
  border-block: 1px solid rgba(195, 151, 76, .26);
}

.novel-chamber-backplate {
  position: absolute;
  z-index: -4;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: brightness(.78) saturate(.88) contrast(1.05);
  transform: scale(1.025) translate3d(calc(var(--chamber-x, 0) * -1px), calc(var(--chamber-y, 0) * -1px), 0);
  transition: filter .8s ease;
}

.novel-chamber::before,
.novel-chamber::after {
  content: "";
  position: absolute;
  z-index: -3;
  inset: 0;
  pointer-events: none;
}

.novel-chamber::before {
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .78) 0%, rgba(0, 0, 0, .2) 31%, rgba(0, 0, 0, .08) 68%, rgba(0, 0, 0, .54) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, .38), transparent 30%, transparent 72%, rgba(0, 0, 0, .52));
}

.novel-chamber::after {
  inset: auto 7% 5% 7%;
  height: 26%;
  opacity: .48;
  background: radial-gradient(ellipse at center, var(--novel-accent-soft), transparent 63%);
  filter: blur(18px);
  transform: perspective(500px) rotateX(70deg);
  transition: background .8s ease;
}

.novel-chamber-mist {
  position: absolute;
  z-index: -1;
  right: -10%;
  bottom: 8%;
  left: -10%;
  height: 18%;
  opacity: .16;
  background: repeating-linear-gradient(96deg, transparent 0 9%, rgba(238, 231, 209, .18) 12%, transparent 21%);
  filter: blur(17px);
  animation: novel-mist 18s linear infinite;
}

.novel-chamber-resonance {
  position: absolute;
  z-index: 0;
  top: 8%;
  left: 50%;
  width: min(58vw, 940px);
  aspect-ratio: 1;
  pointer-events: none;
  border: 1px solid rgba(204, 165, 94, .15);
  border-radius: 50%;
  transform: translateX(-50%) rotateX(66deg);
  box-shadow:
    0 0 0 44px rgba(106, 206, 213, .025),
    0 0 0 122px rgba(204, 165, 94, .018),
    0 0 70px var(--novel-accent-soft);
}

.novel-chamber-heading {
  position: absolute;
  z-index: 6;
  top: clamp(62px, 8vw, 126px);
  left: clamp(26px, 7vw, 124px);
  width: min(390px, 27vw);
  text-align: left;
}

.novel-chamber-kicker,
.novel-data-index,
.novel-data-status,
.novel-chamber-footer,
.reader-title-block span,
.reader-page-count,
.novel-details-copy > span {
  color: #c7a769;
  font: 500 10px/1.5 Arial, sans-serif;
  letter-spacing: 0;
  text-transform: uppercase;
}

.novel-chamber-heading h2 {
  margin: 11px 0 0;
  font: 400 clamp(38px, 4.5vw, 74px)/.92 Georgia, serif;
  letter-spacing: 0;
  text-transform: uppercase;
  text-shadow: 0 3px 28px #000;
}

.novel-chamber-heading h2 span {
  display: block;
  margin-top: 13px;
  font-size: .33em;
  line-height: 1.2;
  white-space: nowrap;
}

.novel-chamber-heading p {
  max-width: 280px;
  margin: 10px 0 0;
  padding-top: 8px;
  color: rgba(232, 225, 210, .72);
  border-top: 1px solid rgba(202, 164, 94, .32);
  font: italic 15px/1.4 Georgia, serif;
}

.novel-chamber-stage {
  position: absolute;
  z-index: auto;
  inset: 0;
  perspective: 1600px;
  outline: none;
  touch-action: pan-y;
}

.novel-orbit {
  position: absolute;
  inset: 7% 0 10%;
  transform-style: preserve-3d;
  transform: translate3d(calc(var(--chamber-x, 0) * .45px), calc(var(--chamber-y, 0) * .45px), 0);
}

.novel-portal {
  --portal-x: 0%;
  --portal-y: 0%;
  --portal-z: 0px;
  --portal-scale: 1;
  --portal-rotate: 0deg;
  --portal-light: rgba(126, 218, 222, .46);
  --portal-beam: rgba(213, 174, 103, .3);
  position: absolute;
  isolation: isolate;
  top: 51%;
  left: 50%;
  width: min(25vw, 380px);
  aspect-ratio: 2 / 3;
  padding: 0;
  color: inherit;
  appearance: none;
  background: transparent;
  border: 0;
  transform: translate3d(calc(-50% + var(--portal-x)), calc(-50% + var(--portal-y)), var(--portal-z)) rotateY(var(--portal-rotate)) scale(var(--portal-scale));
  transform-style: preserve-3d;
  transition: transform .72s cubic-bezier(.2, .74, .16, 1), opacity .5s ease, filter .5s ease;
  cursor: pointer;
}

.novel-portal::before,
.novel-portal::after {
  content: "";
  position: absolute;
  z-index: -2;
  pointer-events: none;
}

.novel-portal::before {
  inset: -28% -48%;
  opacity: .72;
  background:
    radial-gradient(ellipse at 50% 48%, var(--portal-light) 0%, rgba(21, 63, 66, .2) 28%, transparent 67%),
    radial-gradient(ellipse at 50% 92%, var(--portal-beam), transparent 56%);
  filter: blur(11px);
  transform: translateZ(-35px);
}

.novel-portal::after {
  top: -22%;
  bottom: -17%;
  left: 50%;
  width: 145%;
  opacity: .52;
  background:
    linear-gradient(90deg, transparent 5%, var(--portal-beam) 6%, transparent 7% 21%, var(--portal-light) 22%, transparent 23% 77%, var(--portal-light) 78%, transparent 79% 93%, var(--portal-beam) 94%, transparent 95%),
    radial-gradient(ellipse at 50% 44%, transparent 30%, rgba(2, 4, 4, .82) 71%);
  clip-path: polygon(20% 0, 80% 0, 100% 100%, 0 100%);
  filter: blur(.6px);
  transform: translateX(-50%) translateZ(-28px);
}

.novel-portal[data-novel="eleventh-staff"] {
  --portal-light: rgba(171, 229, 231, .55);
  --portal-beam: rgba(223, 199, 145, .34);
}

.novel-portal[data-novel="abandoned-timelines"] {
  --portal-light: rgba(153, 117, 224, .52);
  --portal-beam: rgba(189, 169, 234, .3);
}

.novel-portal[data-novel="aberrations"] {
  --portal-light: rgba(181, 92, 85, .4);
  --portal-beam: rgba(226, 205, 166, .3);
}

.novel-portal[data-novel="cute-nightmare"] {
  --portal-light: rgba(168, 102, 175, .5);
  --portal-beam: rgba(202, 151, 93, .3);
}

.novel-portal.is-active {
  z-index: 4;
  --portal-x: 0%;
  --portal-z: 120px;
  --portal-scale: 1;
  opacity: 1;
  filter: brightness(1.06);
}

.novel-portal.is-active::before {
  animation: novel-portal-breathe 4.8s ease-in-out infinite;
}

.novel-portal.is-prev {
  z-index: 2;
  --portal-x: -150%;
  --portal-y: 23%;
  --portal-z: -170px;
  --portal-scale: .78;
  --portal-rotate: 16deg;
  opacity: .86;
  filter: brightness(.84) saturate(.88);
}

.novel-portal.is-next {
  z-index: 2;
  --portal-x: 182%;
  --portal-y: 23%;
  --portal-z: -170px;
  --portal-scale: .78;
  --portal-rotate: -16deg;
  opacity: .86;
  filter: brightness(.84) saturate(.88);
}

.novel-portal.is-far-prev {
  z-index: 1;
  --portal-x: -245%;
  --portal-y: 19%;
  --portal-z: -520px;
  --portal-scale: .28;
  --portal-rotate: 32deg;
  opacity: .18;
  filter: brightness(.42) saturate(.62);
}

.novel-portal.is-far-next {
  z-index: 1;
  --portal-x: 245%;
  --portal-y: 19%;
  --portal-z: -520px;
  --portal-scale: .28;
  --portal-rotate: -32deg;
  opacity: .18;
  filter: brightness(.42) saturate(.62);
}

.novel-cover-glass {
  position: absolute;
  z-index: 2;
  inset: 6%;
  overflow: hidden;
  display: block;
  background: #050706;
  border: 1px solid rgba(241, 220, 174, .76);
  box-shadow:
    0 0 0 5px rgba(5, 9, 9, .92),
    0 0 0 6px rgba(194, 151, 77, .65),
    0 0 14px rgba(238, 206, 142, .3),
    0 0 48px var(--portal-light),
    inset 0 0 30px rgba(133, 222, 226, .14);
}

.novel-cover-glass::before,
.novel-cover-glass::after,
.novel-portal-architecture::before,
.novel-portal-architecture::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.novel-cover-glass::before {
  z-index: 2;
  inset: 0;
  background: linear-gradient(112deg, rgba(255,255,255,.14), transparent 19%, transparent 71%, rgba(104,213,220,.08));
  mix-blend-mode: screen;
}

.novel-cover-glass::after {
  z-index: 3;
  inset: 8px;
  border: 1px solid rgba(196, 153, 80, .26);
}

.novel-cover-glass img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform 1s cubic-bezier(.2, .7, .15, 1), filter .6s ease;
}

.novel-portal:hover .novel-cover-glass img,
.novel-portal:focus-visible .novel-cover-glass img {
  transform: scale(1.035);
  filter: brightness(1.14);
}

.novel-portal-architecture {
  position: absolute;
  z-index: 1;
  inset: -5% -10%;
  display: block;
  border: 1px solid rgba(220, 182, 112, .58);
  clip-path: polygon(18% 0, 82% 0, 82% 2%, 94% 7%, 94% 13%, 100% 17%, 100% 92%, 94% 92%, 94% 98%, 82% 98%, 82% 100%, 18% 100%, 18% 98%, 6% 98%, 6% 92%, 0 92%, 0 17%, 6% 13%, 6% 7%, 18% 2%);
  box-shadow:
    inset 0 0 52px rgba(119, 216, 220, .1),
    0 0 22px rgba(210, 170, 96, .18);
}

.novel-portal-architecture::before {
  inset: 3.5%;
  border: 1px solid rgba(144, 224, 226, .32);
  clip-path: inherit;
  box-shadow: 0 0 24px var(--portal-light), inset 0 0 22px rgba(131, 219, 222, .08);
}

.novel-portal-architecture::after {
  top: -4%;
  bottom: -4%;
  left: 50%;
  width: 1px;
  background: linear-gradient(transparent, rgba(202, 161, 87, .6), transparent);
  box-shadow: -42px 0 rgba(202, 161, 87, .13), 42px 0 rgba(202, 161, 87, .13);
}

.novel-portal-name {
  position: absolute;
  z-index: 5;
  right: 15%;
  bottom: 12%;
  left: 15%;
  display: block;
  overflow: hidden;
  color: #e7decb;
  font: 500 11px/1.2 Arial, sans-serif;
  letter-spacing: 0;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
  text-shadow: 0 2px 8px #000;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .45s ease, transform .45s ease;
}

.novel-portal:not(.is-active) .novel-portal-name {
  opacity: .9;
  transform: translateY(0);
}

.novel-portal.is-far-prev .novel-portal-name,
.novel-portal.is-far-next .novel-portal-name {
  opacity: 0;
}

.novel-portal-reflection {
  position: absolute;
  top: 95%;
  right: 7%;
  left: 7%;
  height: 38%;
  overflow: hidden;
  display: block;
  opacity: .18;
  transform: rotateX(64deg) scaleY(-1);
  transform-origin: top;
  filter: blur(2px) saturate(.8);
  mask-image: linear-gradient(#000, transparent 78%);
}

.novel-portal-reflection img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.novel-chamber-arrow {
  position: absolute;
  z-index: 8;
  top: 50%;
  width: 56px;
  aspect-ratio: 1;
  padding: 0;
  color: #bfeef0;
  background: rgba(2, 6, 7, .58);
  border: 1px solid rgba(200, 159, 83, .52);
  border-radius: 50%;
  font: 300 25px/1 Arial, sans-serif;
  transform: translateY(-50%);
  cursor: pointer;
  pointer-events: auto;
  touch-action: manipulation;
  transition: background .3s ease, box-shadow .3s ease, color .3s ease;
}

.novel-chamber-arrow:hover,
.novel-chamber-arrow:focus-visible {
  color: #fff;
  background: rgba(10, 23, 24, .82);
  box-shadow: 0 0 26px var(--novel-accent-soft);
}

.novel-chamber-arrow-left { left: clamp(14px, 2.8vw, 48px); }
.novel-chamber-arrow-right { right: clamp(14px, 2.8vw, 48px); }

.novel-chamber-data {
  position: absolute;
  z-index: 7;
  top: clamp(168px, 21%, 222px);
  right: auto;
  left: calc(50% + min(12.5vw, 190px) + 24px);
  width: min(218px, 17vw);
  text-align: left;
}

.novel-chamber-data h3 {
  margin: 11px 0 8px;
  color: #eee5d5;
  font: 400 clamp(19px, 1.75vw, 27px)/1.06 Georgia, serif;
  letter-spacing: 0;
  text-transform: uppercase;
}

.novel-data-meta {
  color: rgba(232, 225, 210, .6);
  font: 400 10px/1.45 Arial, sans-serif;
}

.novel-data-rule {
  position: relative;
  height: 1px;
  margin: 17px 0;
  background: linear-gradient(90deg, rgba(201, 160, 87, .65), transparent);
}

.novel-data-rule span {
  position: absolute;
  top: 50%;
  left: 47%;
  width: 8px;
  aspect-ratio: 1;
  border: 1px solid #b28b4d;
  transform: translate(-50%, -50%) rotate(45deg);
}

.novel-chamber-data p {
  min-height: 76px;
  margin: 0 0 17px;
  color: rgba(232, 225, 210, .72);
  font: 400 13px/1.48 Georgia, serif;
}

.novel-data-actions {
  display: grid;
  gap: 7px;
}

.novel-enter,
.novel-secondary {
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 14px;
  color: #d8ccb4;
  background: rgba(2, 5, 5, .6);
  border: 1px solid rgba(193, 150, 76, .52);
  border-radius: 0;
  font: 500 9px/1 Arial, sans-serif;
  letter-spacing: 0;
  text-decoration: none;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .3s ease, color .3s ease, border-color .3s ease, box-shadow .3s ease;
}

.novel-enter {
  min-height: 46px;
  color: #17150f;
  background: linear-gradient(100deg, #bc9656, #ead49c 48%, #ae8446);
  border-color: #e9ce91;
}

.novel-enter:hover,
.novel-enter:focus-visible {
  background: linear-gradient(100deg, #d1ad6d, #f6e6b8 48%, #c99b54);
  box-shadow: 0 0 30px rgba(218, 178, 104, .28);
}

.novel-secondary:hover,
.novel-secondary:focus-visible {
  color: #fff;
  background: rgba(14, 33, 34, .78);
  border-color: var(--novel-accent);
}

.novel-enter[disabled],
.novel-secondary.is-disabled {
  opacity: .38;
  cursor: not-allowed;
  pointer-events: none;
}

.novel-data-status {
  display: block;
  margin-top: 10px;
  color: var(--novel-accent);
}

.novel-cursor-cue {
  --cue-shift: 72px;
  position: fixed;
  z-index: 22;
  top: var(--novel-cue-y, -100px);
  left: var(--novel-cue-x, -100px);
  width: 38px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  color: #f4ddb0;
  background: rgba(3, 8, 8, .86);
  border: 1px solid rgba(225, 187, 113, .82);
  border-radius: 50%;
  box-shadow: 0 0 20px rgba(111, 229, 229, .36), inset 0 0 12px rgba(225, 187, 113, .16);
  font: 400 20px/1 Arial, sans-serif;
  opacity: 0;
  pointer-events: none;
  transform: translate(calc(-50% + var(--cue-shift)), -50%) scale(.7);
  transition: opacity .16s ease, transform .2s ease;
}

.novel-cursor-cue.is-toward-left { --cue-shift: -72px; }

.novel-cursor-cue.is-visible {
  opacity: 1;
  transform: translate(calc(-50% + var(--cue-shift)), -50%) scale(1);
}

.novel-chamber-footer {
  position: absolute;
  z-index: 7;
  right: clamp(24px, 4vw, 70px);
  bottom: clamp(22px, 4.5vw, 54px);
  left: clamp(24px, 4vw, 70px);
  display: grid;
  grid-template-columns: auto minmax(100px, 1fr) auto minmax(130px, .35fr);
  align-items: center;
  gap: 18px;
  color: rgba(224, 211, 185, .62);
}

.novel-chamber-footer span:last-child { text-align: right; }

.novel-footer-wave {
  height: 28px;
  opacity: .65;
  background: linear-gradient(90deg, transparent, rgba(149, 222, 225, .4), transparent);
  clip-path: polygon(0 49%, 8% 49%, 11% 25%, 14% 77%, 17% 41%, 20% 55%, 24% 9%, 27% 91%, 30% 36%, 34% 67%, 37% 47%, 43% 47%, 47% 20%, 50% 82%, 53% 38%, 57% 57%, 61% 4%, 64% 96%, 68% 30%, 71% 66%, 75% 47%, 100% 47%, 100% 53%, 75% 53%, 71% 72%, 68% 36%, 64% 100%, 61% 10%, 57% 63%, 53% 44%, 50% 88%, 47% 26%, 43% 53%, 37% 53%, 34% 73%, 30% 42%, 27% 97%, 24% 15%, 20% 61%, 17% 47%, 14% 83%, 11% 31%, 8% 55%, 0 55%);
  animation: novel-wave 2.4s ease-in-out infinite;
}

.novel-chamber.is-entering .novel-portal:not(.is-active),
.novel-chamber.is-entering .novel-chamber-heading,
.novel-chamber.is-entering .novel-chamber-data {
  opacity: 0;
  transition: opacity .45s ease;
}

.novel-chamber.is-entering .novel-portal.is-active {
  transform: translate3d(-50%, -50%, 480px) scale(1.32);
  filter: brightness(1.35);
}

.novel-details-dialog,
.graphic-reader {
  max-width: none;
  max-height: none;
  padding: 0;
  color: #e9e2d4;
  background: #030606;
  border: 0;
}

.novel-details-dialog::backdrop,
.graphic-reader::backdrop {
  background: rgba(0, 0, 0, .92);
  backdrop-filter: blur(7px);
}

.novel-details-dialog {
  width: min(1060px, calc(100vw - 32px));
  min-height: 620px;
  overflow: hidden;
  grid-template-columns: 43% 57%;
  border: 1px solid rgba(200, 158, 82, .48);
  box-shadow: 0 30px 100px rgba(0,0,0,.9), 0 0 55px rgba(112,205,211,.1);
}

.novel-details-dialog[open] { display: grid; }

.novel-details-cover {
  position: relative;
  min-height: 620px;
  overflow: hidden;
  background: #000;
}

.novel-details-cover::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 60%, #030606 100%);
}

.novel-details-cover img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  padding: 26px;
}

.novel-details-copy {
  position: relative;
  align-self: center;
  padding: clamp(38px, 5vw, 72px);
}

.novel-details-copy h2 {
  margin: 12px 0 22px;
  font: 400 clamp(30px, 4vw, 54px)/1 Georgia, serif;
  letter-spacing: 0;
}

.novel-details-copy p {
  color: rgba(233, 226, 212, .7);
  font: 400 15px/1.7 Georgia, serif;
}

.novel-details-copy dl {
  margin: 30px 0 0;
}

.novel-details-copy dl div {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 15px;
  padding: 12px 0;
  border-top: 1px solid rgba(196, 155, 81, .22);
}

.novel-details-copy dt,
.novel-details-copy dd {
  margin: 0;
  font: 500 11px/1.45 Arial, sans-serif;
  letter-spacing: 0;
  text-transform: uppercase;
}

.novel-details-copy dt { color: #c7a769; }
.novel-details-copy dd { color: rgba(233, 226, 212, .72); }

.novel-dialog-close {
  position: absolute;
  z-index: 4;
  top: 18px;
  right: 18px;
  width: 42px;
  aspect-ratio: 1;
  padding: 0;
  color: #e8dfce;
  background: rgba(0,0,0,.56);
  border: 1px solid rgba(199, 158, 83, .48);
  border-radius: 50%;
  font: 300 25px/1 Arial, sans-serif;
  cursor: pointer;
}

.graphic-reader {
  width: 100vw;
  height: 100dvh;
  overflow: hidden;
  cursor: default;
}

.graphic-reader[open] { display: block; }

.reader-fullscreen-surface {
  position: absolute;
  inset: 0;
  overflow: hidden;
  color: inherit;
  background: #030606;
  cursor: default;
}

.reader-fullscreen-surface:fullscreen,
.reader-fullscreen-surface:-webkit-full-screen {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background: #030606;
}

.graphic-reader button,
.graphic-reader a {
  cursor: pointer;
}

.reader-architecture {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 40%, rgba(106, 204, 210, .09), transparent 52%),
    linear-gradient(90deg, rgba(198, 156, 82, .12) 1px, transparent 1px) 0 0 / 19vw 100%,
    linear-gradient(180deg, #071011 0%, #010303 65%, #000 100%);
}

.reader-architecture::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .14;
  background: url("./assets/graphic-novel-chamber-empty-v1.webp") center / cover no-repeat;
}

.reader-header,
.reader-toolbar {
  position: absolute;
  z-index: 10;
  right: 0;
  left: 0;
  display: grid;
  align-items: center;
  transition: opacity .35s ease, transform .35s ease;
}

.reader-header {
  top: 0;
  grid-template-columns: 52px 1fr auto;
  gap: 18px;
  padding: 18px clamp(18px, 3vw, 48px);
  background: linear-gradient(180deg, rgba(0,0,0,.9), transparent);
}

.reader-title-block h2 {
  margin: 3px 0 0;
  font: 400 clamp(18px, 2vw, 28px)/1.1 Georgia, serif;
  letter-spacing: 0;
}

.reader-page-count {
  color: #e3d8c3;
  font-size: 12px;
}

.reader-icon-button,
.reader-tool,
.reader-zoom-readout {
  min-width: 42px;
  min-height: 42px;
  padding: 0;
  color: #e5dccb;
  background: rgba(3, 8, 8, .72);
  border: 1px solid rgba(198, 157, 82, .42);
  border-radius: 0;
  font: 500 13px/1 Arial, sans-serif;
  cursor: pointer;
}

.reader-icon-button:hover,
.reader-tool:hover,
.reader-zoom-readout:hover,
.reader-icon-button:focus-visible,
.reader-tool:focus-visible,
.reader-zoom-readout:focus-visible {
  color: #fff;
  border-color: #8fdce0;
  box-shadow: 0 0 18px rgba(112, 210, 215, .15);
}

.reader-stage {
  position: absolute;
  z-index: 2;
  inset: 78px 0 86px;
  display: grid;
  place-items: center;
  overflow: hidden;
  touch-action: none;
}

.reader-page-viewport {
  width: min(88vw, calc((100dvh - 190px) * 1.7917));
  aspect-ratio: 1376 / 768;
  overflow: auto;
  display: grid;
  place-items: center;
  background: #050504;
  border: 1px solid rgba(222, 197, 143, .5);
  box-shadow: 0 28px 80px rgba(0,0,0,.84), 0 0 38px rgba(105,204,210,.12);
  scrollbar-color: rgba(194, 153, 81, .45) transparent;
  scrollbar-width: thin;
}

.reader-page-media {
  width: 100%;
  height: 100%;
  flex: none;
  transform: scale(var(--reader-zoom, 1));
  transform-origin: center;
  transition: transform .28s ease, opacity .24s ease, filter .24s ease;
}

.reader-page-media.is-changing {
  opacity: 0;
  filter: blur(7px);
  transform: scale(calc(var(--reader-zoom, 1) * .96));
}

.reader-page-media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  user-select: none;
}

.reader-page-reflection {
  position: absolute;
  z-index: -1;
  top: 88%;
  left: 50%;
  width: min(82vw, 1200px);
  height: 22%;
  overflow: hidden;
  opacity: .12;
  transform: translateX(-50%) scaleY(-1) perspective(500px) rotateX(60deg);
  filter: blur(4px);
  mask-image: linear-gradient(#000, transparent);
}

.reader-page-reflection img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.reader-page-nav {
  position: absolute;
  z-index: 20;
  top: 50%;
  width: 58px;
  aspect-ratio: 1;
  padding: 0;
  color: #f1dcae;
  background: rgba(4, 10, 10, .88);
  border: 1px solid rgba(218, 179, 104, .76);
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(1, 4, 4, .55), 0 0 26px rgba(103, 215, 219, .22), inset 0 0 16px rgba(223, 187, 116, .13);
  font: 300 25px/1 Arial, sans-serif;
  cursor: pointer;
  opacity: .92;
  transform: translateY(-50%);
  touch-action: manipulation;
  transition: opacity .25s ease, color .25s ease, background .25s ease, border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}

.reader-page-nav:hover,
.reader-page-nav:focus-visible {
  opacity: 1;
  color: #fff;
  background: rgba(14, 31, 31, .96);
  border-color: #efd498;
  box-shadow: 0 0 0 4px rgba(1, 4, 4, .68), 0 0 34px rgba(111, 226, 229, .42), inset 0 0 18px rgba(239, 207, 143, .2);
  transform: translateY(-50%) scale(1.07);
}

.reader-page-nav-left { left: clamp(12px, 2.2vw, 38px); }
.reader-page-nav-right { right: clamp(12px, 2.2vw, 38px); }
.reader-page-nav[disabled] { opacity: .22; cursor: default; transform: translateY(-50%); }

.reader-progress {
  position: absolute;
  z-index: 10;
  right: 0;
  bottom: 80px;
  left: 0;
  height: 1px;
  background: rgba(206, 169, 101, .15);
}

.reader-progress span {
  display: block;
  width: 8.333%;
  height: 100%;
  background: linear-gradient(90deg, #b1884a, #9adfe1);
  box-shadow: 0 0 10px rgba(135, 221, 223, .5);
  transition: width .45s ease;
}

.reader-toolbar {
  bottom: 0;
  grid-template-columns: auto auto 1fr auto auto;
  gap: 12px;
  padding: 15px clamp(18px, 3vw, 48px) 20px;
  background: linear-gradient(0deg, rgba(0,0,0,.94), rgba(0,0,0,.4), transparent);
}

.reader-tool {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 0 14px;
  text-decoration: none;
  text-transform: uppercase;
}

.reader-zoom-controls {
  display: grid;
  grid-template-columns: 42px 64px 42px;
}

.reader-zoom-readout { border-inline: 0; }

.reader-spread-mode {
  justify-self: center;
  color: rgba(228, 218, 198, .48);
  font: 500 10px/1 Arial, sans-serif;
  text-transform: uppercase;
}

.reader-thumbnails {
  position: absolute;
  z-index: 12;
  right: 0;
  bottom: 80px;
  left: 0;
  height: min(190px, 30vh);
  overflow-x: auto;
  display: flex;
  gap: 11px;
  padding: 18px clamp(18px, 3vw, 48px);
  background: rgba(2, 5, 5, .96);
  border-top: 1px solid rgba(198, 157, 82, .32);
  scrollbar-color: #916f3c transparent;
  scrollbar-width: thin;
}

.reader-thumbnails[hidden] { display: none; }

.reader-thumbnail {
  position: relative;
  width: 230px;
  flex: 0 0 230px;
  padding: 0;
  overflow: hidden;
  background: #000;
  border: 1px solid rgba(196, 154, 80, .28);
  cursor: pointer;
}

.reader-thumbnail img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.reader-thumbnail span {
  position: absolute;
  right: 7px;
  bottom: 6px;
  padding: 4px 6px;
  color: #fff;
  background: rgba(0,0,0,.7);
  font: 500 9px/1 Arial, sans-serif;
}

.reader-thumbnail.is-current {
  border-color: #9bdfe1;
  box-shadow: 0 0 20px rgba(116, 216, 220, .18);
}

.reader-resume-note {
  position: absolute;
  z-index: 15;
  bottom: 94px;
  left: 50%;
  padding: 9px 14px;
  color: #e8deca;
  background: rgba(2,7,7,.9);
  border: 1px solid rgba(194,153,81,.42);
  font: 500 10px/1 Arial, sans-serif;
  text-transform: uppercase;
  transform: translateX(-50%);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
}

.reader-resume-note.is-visible { opacity: 1; }

.graphic-reader.reader-ui-hidden .reader-header {
  opacity: 0;
  transform: translateY(-16px);
  pointer-events: none;
}

.graphic-reader.reader-ui-hidden .reader-toolbar,
.graphic-reader.reader-ui-hidden .reader-progress {
  opacity: 0;
  transform: translateY(16px);
  pointer-events: none;
}

.graphic-reader.reader-fallback-fullscreen .reader-header,
.graphic-reader.reader-fallback-fullscreen .reader-progress {
  opacity: 0;
  pointer-events: none;
}

.graphic-reader.reader-fallback-fullscreen .reader-stage {
  inset: 0;
}

.graphic-reader.reader-fallback-fullscreen .reader-page-viewport {
  width: min(100vw, calc(100dvh * 1.7917));
  max-height: 100dvh;
  border: 0;
}

.graphic-reader.reader-fallback-fullscreen .reader-toolbar {
  right: 14px;
  bottom: 14px;
  left: auto;
  width: 48px;
  grid-template-columns: 48px;
  padding: 0;
  background: transparent;
}

.graphic-reader.reader-fallback-fullscreen .reader-toolbar > :not(#reader-fullscreen) {
  display: none;
}

.graphic-reader.reader-fallback-fullscreen #reader-fullscreen {
  width: 48px;
  height: 48px;
  padding: 0;
  background: rgba(2, 7, 7, .86);
  border-color: rgba(222, 185, 112, .72);
  box-shadow: 0 0 22px rgba(105, 216, 220, .22);
}

.graphic-reader.reader-fallback-fullscreen #reader-fullscreen span:last-child {
  display: none;
}

.graphic-reader.reader-fallback-fullscreen.reader-ui-hidden .reader-toolbar {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

body.reader-open { overflow: hidden; }

@keyframes novel-mist {
  from { transform: translateX(-5%); }
  to { transform: translateX(5%); }
}

@keyframes novel-wave {
  0%, 100% { opacity: .35; transform: scaleY(.65); }
  50% { opacity: .8; transform: scaleY(1); }
}

@keyframes novel-portal-breathe {
  0%, 100% { opacity: .62; transform: translateZ(-35px) scale(.98); }
  50% { opacity: .86; transform: translateZ(-35px) scale(1.035); }
}

@media (max-width: 1050px) {
  .novel-chamber { min-height: 960px; }
  .novel-chamber-heading { width: 280px; }
  .novel-chamber-heading p { max-width: 220px; }
  .novel-chamber-data {
    right: auto;
    left: calc(50% + min(15vw, 170px) + 22px);
    width: min(190px, 19vw);
  }
  .novel-portal { width: min(30vw, 340px); }
  .novel-portal.is-prev { --portal-x: -142%; }
  .novel-portal.is-next { --portal-x: 172%; }
  .novel-portal.is-prev,
  .novel-portal.is-next {
    --portal-z: -210px;
    --portal-scale: .66;
  }
}

@media (max-width: 900px) {
  .novel-chamber {
    min-height: 1120px;
  }

  .novel-chamber-backplate {
    object-position: center;
    filter: brightness(.62) saturate(.82) contrast(1.1);
  }

  .novel-chamber-heading {
    top: 66px;
    right: 24px;
    left: 24px;
    width: auto;
    text-align: center;
  }

  .novel-chamber-heading h2 {
    font-size: clamp(35px, 11vw, 52px);
  }

  .novel-chamber-heading h2 span {
    white-space: normal;
  }

  .novel-chamber-heading p {
    max-width: 340px;
    margin-inline: auto;
    font-size: 14px;
  }

  .novel-chamber-stage { inset: 275px 0 410px; }
  .novel-orbit { inset: 0; }

  .novel-portal {
    top: 49%;
    width: min(68vw, 340px);
  }

  .novel-portal.is-prev {
    --portal-x: -104%;
    --portal-z: -320px;
    --portal-scale: .39;
  }

  .novel-portal.is-next {
    --portal-x: 104%;
    --portal-z: -320px;
    --portal-scale: .39;
  }

  .novel-portal.is-far-prev {
    --portal-x: -172%;
    --portal-scale: .2;
  }

  .novel-portal.is-far-next {
    --portal-x: 172%;
    --portal-scale: .2;
  }

  .novel-chamber-arrow {
    top: 47%;
    width: 44px;
  }

  .novel-chamber-arrow-left { left: 8px; }
  .novel-chamber-arrow-right { right: 8px; }

  .novel-chamber-data {
    top: auto;
    right: 24px;
    bottom: 72px;
    left: 24px;
    width: auto;
    text-align: center;
  }

  .novel-chamber-data h3 { font-size: 24px; }
  .novel-data-rule { margin: 15px 0; }
  .novel-chamber-data p { min-height: 66px; margin-bottom: 15px; font-size: 13px; }
  .novel-data-actions { grid-template-columns: 1fr 1fr; }
  .novel-enter { grid-column: 1 / -1; }
  .novel-data-status { margin-top: 9px; }

  .novel-chamber-footer {
    right: 24px;
    bottom: 34px;
    left: 24px;
    grid-template-columns: auto 1fr auto;
    gap: 10px;
  }

  .novel-chamber-footer span:last-child { display: none; }

  .novel-details-dialog[open] {
    width: calc(100vw - 20px);
    height: min(860px, calc(100dvh - 20px));
    display: block;
    overflow-y: auto;
  }

  .novel-details-cover { min-height: 330px; height: 46vh; }
  .novel-details-cover::after { background: linear-gradient(180deg, transparent 58%, #030606 100%); }
  .novel-details-copy { padding: 28px 26px 38px; }

  .reader-header {
    grid-template-columns: 42px 1fr auto;
    padding: 12px 12px;
  }

  .reader-title-block h2 { font-size: 17px; }
  .reader-title-block span { display: none; }
  .reader-stage { inset: 66px 0 78px; }

  .reader-page-viewport {
    width: 100vw;
    max-height: calc(100dvh - 155px);
    border-inline: 0;
  }

  .reader-page-nav {
    top: 50%;
    width: 48px;
    opacity: .9;
  }

  .reader-page-nav-left { left: 9px; }
  .reader-page-nav-right { right: 9px; }

  .reader-toolbar {
    grid-template-columns: auto 1fr auto auto;
    gap: 8px;
    padding: 12px;
  }

  .reader-tool { min-width: 42px; padding: 0 11px; }
  .reader-tool span:last-child { display: none; }
  .reader-spread-mode { display: none; }
  .reader-zoom-controls { grid-template-columns: 38px 58px 38px; justify-self: center; }
  .reader-progress { bottom: 66px; }
  .reader-thumbnails { bottom: 66px; height: 145px; padding: 12px; }
  .reader-thumbnail { width: 190px; flex-basis: 190px; }
  .reader-resume-note { bottom: 79px; }
}

@media (max-width: 520px) {
  .novel-chamber { min-height: 1200px; }
  .novel-chamber-heading { top: 145px; }
  .novel-chamber-stage { inset: 350px 0 410px; }
}

@media (prefers-reduced-motion: reduce) {
  .novel-chamber-mist,
  .novel-footer-wave,
  .novel-portal.is-active::before {
    animation: none;
  }

  .novel-chamber-backplate,
  .novel-orbit,
  .novel-portal,
  .novel-cover-glass img,
  .reader-page-media,
  .reader-header,
  .reader-toolbar {
    transition-duration: .01ms !important;
  }
}

@media (pointer: coarse) {
  .novel-cursor-cue { display: none; }
}