@class-kit/react 0.1.0

package/dist/styles/components/novel-reader.css

@@ -0,0 +1,1163 @@
+@import "../base.css";
+
+.cc-novel-reader {
+  box-sizing: border-box;
+  clip-path: inset(0);
+  color: var(--cc-business-text-color);
+  contain: layout paint;
+  display: grid;
+  grid-template-rows: minmax(0, 1fr);
+  height: var(--cc-novel-reader-height, 100%);
+  max-width: 100%;
+  min-height: var(--cc-novel-reader-min-height, 520px);
+  overflow: hidden;
+  overflow: clip;
+  overflow-x: hidden;
+  position: relative;
+  overscroll-behavior: contain;
+  touch-action: none;
+  user-select: none;
+  -webkit-user-select: none;
+  width: 100%;
+}
+
+.cc-novel-reader__book {
+  background:
+    linear-gradient(
+      90deg,
+      rgba(0, 0, 0, 0.08),
+      transparent 10%,
+      transparent 90%,
+      rgba(0, 0, 0, 0.08)
+    ),
+    var(--cc-business-surface);
+  border: 1px solid var(--cc-business-border-color);
+  border-radius: var(--cc-radius-lg);
+  box-shadow: 0 18px 42px
+    color-mix(in srgb, var(--cc-form-color-accent) 14%, transparent);
+  clip-path: inset(0 round var(--cc-radius-lg));
+  contain: layout paint;
+  display: grid;
+  height: 100%;
+  max-width: 100%;
+  min-height: 0;
+  min-width: 0;
+  overflow: hidden;
+  overflow: clip;
+  overflow-x: hidden;
+  perspective: 1900px;
+  perspective-origin: 50% 48%;
+  position: relative;
+  transform-style: preserve-3d;
+}
+
+.cc-novel-reader__book::before {
+  background:
+    linear-gradient(
+      90deg,
+      rgba(0, 0, 0, 0.13),
+      transparent 10%,
+      transparent 90%,
+      rgba(0, 0, 0, 0.08)
+    ),
+    radial-gradient(
+      120% 90% at 50% 0,
+      rgba(255, 255, 255, 0.4),
+      transparent 58%
+    );
+  content: "";
+  inset: 0;
+  pointer-events: none;
+  position: absolute;
+  z-index: 2;
+}
+
+.cc-novel-reader__book::after {
+  background:
+    linear-gradient(
+      90deg,
+      transparent,
+      rgba(0, 0, 0, 0.16) 48%,
+      rgba(255, 255, 255, 0.34) 50%,
+      rgba(0, 0, 0, 0.12) 52%,
+      transparent
+    ),
+    linear-gradient(
+      90deg,
+      rgba(0, 0, 0, 0.06),
+      transparent 16%,
+      transparent 84%,
+      rgba(0, 0, 0, 0.05)
+    );
+  content: "";
+  inset: 0;
+  mix-blend-mode: multiply;
+  opacity: 0.36;
+  pointer-events: none;
+  position: absolute;
+  z-index: 3;
+}
+
+.cc-novel-reader__page {
+  backface-visibility: hidden;
+  background:
+    linear-gradient(
+      90deg,
+      rgba(255, 255, 255, 0.28),
+      transparent 18%,
+      transparent 82%,
+      rgba(0, 0, 0, 0.04)
+    ),
+    var(--cc-business-surface);
+  box-sizing: border-box;
+  height: 100%;
+  max-width: 100%;
+  min-height: var(--cc-novel-reader-page-min-height, 320px);
+  overflow: auto;
+  overflow-x: hidden;
+  overscroll-behavior: contain;
+  padding: 24px;
+  position: relative;
+  transform-origin: left center;
+  transform-style: preserve-3d;
+  z-index: 1;
+  will-change: opacity, transform, border-radius, filter, clip-path;
+}
+
+.cc-novel-reader__page--base {
+  animation: none;
+  transition:
+    filter 160ms ease,
+    opacity 160ms ease,
+    transform 160ms ease;
+}
+
+.cc-novel-reader[data-turning="true"] .cc-novel-reader__page--base {
+  filter: brightness(0.94) saturate(0.98);
+}
+
+.cc-novel-reader__page--preview {
+  filter: brightness(0.985) saturate(1.02);
+  inset: 0;
+  opacity: 0;
+  overflow: hidden;
+  pointer-events: none;
+  position: absolute;
+  transform: translate3d(calc(var(--cc-novel-drag-x, 0px) * -0.25), 0, -24px)
+    scale(0.992);
+  transition:
+    opacity 90ms linear,
+    transform 90ms linear;
+  z-index: 2;
+}
+
+.cc-novel-reader[data-dragging="true"] .cc-novel-reader__page--base {
+  opacity: calc(0.68 + var(--cc-novel-drag-progress, 0) * 0.32);
+  transform: translate3d(calc(var(--cc-novel-drag-x, 0px) * -0.12), 0, -10px);
+}
+
+.cc-novel-reader[data-dragging="true"] .cc-novel-reader__page--preview {
+  opacity: var(--cc-novel-drag-next-opacity, 0.42);
+  transform: translate3d(calc(var(--cc-novel-drag-x, 0px) * -0.18), 0, 0)
+    scale(1);
+}
+
+.cc-novel-reader__page--turning {
+  animation: cc-novel-page-next var(--cc-novel-reader-duration, 720ms)
+    cubic-bezier(0.2, 0.8, 0.22, 1) both;
+  backface-visibility: hidden;
+  clip-path: polygon(0 0, 100% 1.8%, 100% 98.5%, 0 100%);
+  filter: drop-shadow(-28px 12px 32px rgba(0, 0, 0, 0.18));
+  inset: 0;
+  overflow: hidden;
+  overflow: clip;
+  position: absolute;
+  transform-style: preserve-3d;
+  will-change: transform, opacity, filter, clip-path, border-radius;
+  z-index: 4;
+}
+
+.cc-novel-reader__page--turning::marker {
+  content: "";
+}
+
+.cc-novel-reader__page--turning {
+  background:
+    radial-gradient(
+      75% 128% at 86% 18%,
+      rgba(255, 255, 255, 0.72),
+      transparent 28%
+    ),
+    radial-gradient(64% 118% at 91% 82%, rgba(0, 0, 0, 0.18), transparent 48%),
+    linear-gradient(
+      96deg,
+      rgba(255, 255, 255, 0.52),
+      transparent 12%,
+      transparent 54%,
+      rgba(0, 0, 0, 0.1) 73%,
+      rgba(255, 255, 255, 0.2) 82%,
+      rgba(0, 0, 0, 0.16) 92%
+    ),
+    repeating-linear-gradient(
+      92deg,
+      rgba(0, 0, 0, 0.026) 0 1px,
+      transparent 1px 7px
+    ),
+    var(--cc-business-surface);
+}
+
+.cc-novel-reader__page--turning .cc-novel-reader__content,
+.cc-novel-reader__page--turning .cc-novel-reader__header {
+  position: relative;
+  z-index: 3;
+}
+
+.cc-novel-reader__page::before,
+.cc-novel-reader__page::after {
+  content: "";
+  inset: 0;
+  pointer-events: none;
+  position: absolute;
+}
+
+.cc-novel-reader__page::before {
+  background:
+    radial-gradient(
+      50% 145% at 44% 22%,
+      rgba(255, 255, 255, 0.95),
+      transparent 34%
+    ),
+    radial-gradient(42% 138% at 72% 82%, rgba(0, 0, 0, 0.32), transparent 62%),
+    linear-gradient(
+      101deg,
+      transparent 3%,
+      rgba(0, 0, 0, 0.24) 20%,
+      rgba(255, 255, 255, 0.88) 39%,
+      rgba(0, 0, 0, 0.2) 57%,
+      rgba(255, 255, 255, 0.32) 72%,
+      transparent 96%
+    );
+  border-radius: 86% 12% 22% 72% / 42% 10% 34% 78%;
+  filter: blur(0.2px);
+  opacity: 0;
+  transform: translateX(48%) rotateZ(-2deg) skewY(-8deg) scaleX(0.5)
+    scaleY(1.08);
+  transform-origin: center right;
+  z-index: 2;
+}
+
+.cc-novel-reader__page::after {
+  background:
+    radial-gradient(76% 112% at 5% 42%, rgba(0, 0, 0, 0.4), transparent 58%),
+    radial-gradient(
+      66% 118% at 24% 84%,
+      rgba(255, 255, 255, 0.24),
+      transparent 54%
+    ),
+    linear-gradient(
+      97deg,
+      rgba(0, 0, 0, 0.3),
+      transparent 44%,
+      rgba(255, 255, 255, 0.22) 76%,
+      transparent
+    );
+  opacity: 0;
+  transform-origin: center;
+  z-index: 1;
+}
+
+.cc-novel-reader[data-direction="previous"] .cc-novel-reader__page--turning {
+  animation-name: cc-novel-page-previous;
+  transform-origin: right center;
+}
+
+.cc-novel-reader[data-dragging="true"] .cc-novel-reader__page--turning {
+  animation: none;
+  clip-path: polygon(
+    var(--cc-novel-drag-clip-x, 0%) 0,
+    100% var(--cc-novel-drag-clip-end, 4.5%),
+    100% calc(100% - var(--cc-novel-drag-clip-end, 4.5%)),
+    calc(var(--cc-novel-drag-clip-x, 0%) + 9%) 100%,
+    0 calc(100% - var(--cc-novel-drag-clip-y, 0%)),
+    0 var(--cc-novel-drag-clip-y, 0%)
+  );
+  filter: drop-shadow(
+      var(--cc-novel-drag-filter-shadow, 0px) 10px 34px rgba(0, 0, 0, 0.22)
+    )
+    brightness(0.96);
+  opacity: var(--cc-novel-drag-opacity, 1);
+  transform: perspective(1700px) translateX(var(--cc-novel-drag-x, 0px))
+    rotateY(var(--cc-novel-drag-angle, 0deg))
+    translateX(var(--cc-novel-drag-translate, 0%))
+    skewY(var(--cc-novel-drag-skew, 0deg))
+    scaleY(calc(1 + var(--cc-novel-drag-curl, 0) * 0.035));
+  transform-origin: left center;
+}
+
+.cc-novel-reader[data-dragging="true"][data-direction="previous"]
+  .cc-novel-reader__page--turning {
+  filter: drop-shadow(
+      var(--cc-novel-drag-filter-shadow, 0px) 10px 34px rgba(0, 0, 0, 0.22)
+    )
+    brightness(0.96);
+  transform: perspective(1700px) translateX(var(--cc-novel-drag-x, 0px))
+    rotateY(var(--cc-novel-drag-angle, 0deg))
+    translateX(var(--cc-novel-drag-translate, 0%))
+    skewY(var(--cc-novel-drag-skew, 0deg))
+    scaleY(calc(1 + var(--cc-novel-drag-curl, 0) * 0.035));
+  transform-origin: right center;
+}
+
+.cc-novel-reader[data-dragging="true"] .cc-novel-reader__page--turning::before,
+.cc-novel-reader[data-dragging="true"] .cc-novel-reader__page--turning::after {
+  animation: none;
+}
+
+.cc-novel-reader[data-dragging="true"] .cc-novel-reader__page--turning::before {
+  background:
+    radial-gradient(
+      54% 160% at 62% 16%,
+      rgba(255, 255, 255, 0.98),
+      transparent 31%
+    ),
+    radial-gradient(42% 150% at 68% 88%, rgba(0, 0, 0, 0.28), transparent 64%),
+    linear-gradient(
+      96deg,
+      transparent 2%,
+      rgba(0, 0, 0, 0.3) 16%,
+      rgba(255, 255, 255, 0.96) 35%,
+      rgba(0, 0, 0, 0.24) 54%,
+      rgba(255, 255, 255, 0.34) 74%,
+      transparent 98%
+    );
+  border-radius: 92% 10% 20% 78% / 34% 8% 34% 86%;
+  inset: -5% -16% -7% 32%;
+  opacity: var(--cc-novel-drag-fold-opacity, 0.18);
+  transform: translateX(var(--cc-novel-drag-fold-translate-signed, 54%))
+    rotateZ(calc(var(--cc-novel-drag-skew, 0deg) - 4.5deg))
+    skewY(var(--cc-novel-drag-fold-skew, 0deg))
+    scaleX(var(--cc-novel-drag-fold-scale, 0.48))
+    scaleY(calc(1.08 + var(--cc-novel-drag-curl, 0) * 0.18));
+}
+
+.cc-novel-reader[data-dragging="true"] .cc-novel-reader__page--turning::after {
+  background:
+    radial-gradient(80% 132% at 8% 28%, rgba(0, 0, 0, 0.46), transparent 58%),
+    radial-gradient(
+      64% 124% at 28% 86%,
+      rgba(255, 255, 255, 0.26),
+      transparent 48%
+    ),
+    linear-gradient(
+      98deg,
+      rgba(0, 0, 0, 0.34),
+      transparent 45%,
+      rgba(255, 255, 255, 0.24) 78%,
+      transparent
+    );
+  opacity: var(--cc-novel-drag-shadow-opacity, 0.12);
+  transform: translateX(var(--cc-novel-drag-shadow-translate-signed, -18%))
+    rotateZ(var(--cc-novel-drag-skew, 0deg))
+    skewY(var(--cc-novel-drag-skew, 0deg))
+    scaleX(var(--cc-novel-drag-shadow-scale, 0.8))
+    scaleY(calc(1 + var(--cc-novel-drag-curl, 0) * 0.12));
+}
+
+.cc-novel-reader[data-dragging="true"][data-direction="previous"]
+  .cc-novel-reader__page--turning::before {
+  border-radius: 10% 92% 78% 20% / 8% 34% 86% 34%;
+  inset: -5% 32% -7% -16%;
+  transform: translateX(var(--cc-novel-drag-fold-translate-signed, -54%))
+    rotateZ(calc(var(--cc-novel-drag-skew, 0deg) + 3.5deg))
+    skewY(var(--cc-novel-drag-fold-skew, 0deg))
+    scaleX(var(--cc-novel-drag-fold-scale, 0.48)) scaleY(1.16);
+}
+
+.cc-novel-reader[data-dragging="true"][data-direction="previous"]
+  .cc-novel-reader__page--turning::after {
+  transform: translateX(var(--cc-novel-drag-shadow-translate-signed, 18%))
+    rotateZ(var(--cc-novel-drag-skew, 0deg))
+    skewY(var(--cc-novel-drag-skew, 0deg)) scaleX(-1);
+}
+
+.cc-novel-reader[data-animation="fade-slide"] .cc-novel-reader__page--turning {
+  animation-delay: 0ms;
+  animation-duration: var(
+    --cc-novel-release-duration,
+    var(--cc-novel-reader-duration, 420ms)
+  );
+  animation-name: cc-novel-slide-leave-next;
+  clip-path: none;
+  filter: none;
+  transform-origin: center;
+}
+
+.cc-novel-reader[data-animation="fade-slide"][data-direction="previous"]
+  .cc-novel-reader__page--turning {
+  animation-name: cc-novel-slide-leave-previous;
+}
+
+.cc-novel-reader[data-animation="fade-slide"][data-turning="true"]
+  .cc-novel-reader__page--base {
+  animation: cc-novel-slide-enter-next
+    var(--cc-novel-release-duration, var(--cc-novel-reader-duration, 420ms))
+    cubic-bezier(0.18, 0.88, 0.24, 1) both;
+  animation-delay: 0ms;
+  inset: 0;
+  overflow: auto;
+  position: absolute;
+  z-index: 2;
+}
+
+.cc-novel-reader[data-animation="fade-slide"][data-direction="previous"][data-turning="true"]
+  .cc-novel-reader__page--base {
+  animation-name: cc-novel-slide-enter-previous;
+}
+
+.cc-novel-reader[data-animation="fade-slide"][data-turning="true"]
+  .cc-novel-reader__book {
+  background:
+    linear-gradient(
+      90deg,
+      rgba(0, 0, 0, 0.05),
+      transparent 18%,
+      transparent 82%,
+      rgba(0, 0, 0, 0.05)
+    ),
+    var(--cc-business-surface);
+}
+
+.cc-novel-reader[data-animation="fade-slide"] .cc-novel-reader__page--preview {
+  display: block;
+}
+
+.cc-novel-reader[data-animation="fade-slide"]
+  .cc-novel-reader__page--turning::before,
+.cc-novel-reader[data-animation="fade-slide"]
+  .cc-novel-reader__page--turning::after {
+  display: none;
+}
+
+.cc-novel-reader[data-animation="fade-slide"][data-dragging="true"]
+  .cc-novel-reader__page--base {
+  animation: none;
+  filter: brightness(calc(0.9 + var(--cc-novel-drag-progress, 0) * 0.1))
+    saturate(calc(0.94 + var(--cc-novel-drag-progress, 0) * 0.06));
+  opacity: calc(0.18 + var(--cc-novel-drag-progress, 0) * 0.82);
+  position: absolute;
+  transform: translate3d(
+      calc((1 - var(--cc-novel-drag-progress, 0)) * 10%),
+      0,
+      -4px
+    )
+    scale(calc(0.992 + var(--cc-novel-drag-progress, 0) * 0.008));
+  z-index: 2;
+}
+
+.cc-novel-reader[data-animation="fade-slide"][data-direction="previous"][data-dragging="true"]
+  .cc-novel-reader__page--base {
+  transform: translate3d(
+      calc((var(--cc-novel-drag-progress, 0) - 1) * 10%),
+      0,
+      -4px
+    )
+    scale(calc(0.992 + var(--cc-novel-drag-progress, 0) * 0.008));
+}
+
+.cc-novel-reader[data-animation="fade-slide"][data-dragging="true"]
+  .cc-novel-reader__page--turning {
+  animation: none;
+  clip-path: none;
+  filter: drop-shadow(
+      calc(var(--cc-novel-drag-progress, 0) * -18px) 10px 28px
+        rgba(0, 0, 0, 0.16)
+    )
+    brightness(calc(1 - var(--cc-novel-drag-progress, 0) * 0.06));
+  opacity: calc(1 - var(--cc-novel-drag-progress, 0) * 0.82);
+  transform: translate3d(calc(var(--cc-novel-drag-progress, 0) * -18%), 0, 0)
+    scale(calc(1 - var(--cc-novel-drag-progress, 0) * 0.01));
+  z-index: 3;
+}
+
+.cc-novel-reader[data-animation="fade-slide"][data-direction="previous"][data-dragging="true"]
+  .cc-novel-reader__page--turning {
+  filter: drop-shadow(
+      calc(var(--cc-novel-drag-progress, 0) * 18px) 10px 28px
+        rgba(0, 0, 0, 0.16)
+    )
+    brightness(calc(1 - var(--cc-novel-drag-progress, 0) * 0.06));
+  transform: translate3d(calc(var(--cc-novel-drag-progress, 0) * 18%), 0, 0)
+    scale(calc(1 - var(--cc-novel-drag-progress, 0) * 0.01));
+}
+
+.cc-novel-reader[data-animation="page"] .cc-novel-reader__page--turning {
+  animation-name: cc-novel-page-next;
+  box-shadow: -30px 0 46px rgba(0, 0, 0, 0.16);
+  transform-origin: left center;
+}
+
+.cc-novel-reader[data-animation="page"]
+  .cc-novel-reader__page--turning::before {
+  animation: cc-novel-page-fold-next var(--cc-novel-reader-duration, 720ms)
+    cubic-bezier(0.2, 0.8, 0.22, 1) both;
+}
+
+.cc-novel-reader[data-animation="page"] .cc-novel-reader__page--turning::after {
+  animation: cc-novel-page-shadow-next var(--cc-novel-reader-duration, 720ms)
+    cubic-bezier(0.2, 0.8, 0.22, 1) both;
+}
+
+.cc-novel-reader[data-animation="page"][data-direction="previous"]
+  .cc-novel-reader__page--turning {
+  animation-name: cc-novel-page-previous;
+  box-shadow: 30px 0 46px rgba(0, 0, 0, 0.16);
+  transform-origin: right center;
+}
+
+.cc-novel-reader[data-animation="page"][data-direction="previous"]
+  .cc-novel-reader__page--turning::before {
+  animation-name: cc-novel-page-fold-previous;
+}
+
+.cc-novel-reader[data-animation="page"][data-direction="previous"]
+  .cc-novel-reader__page--turning::after {
+  animation-name: cc-novel-page-shadow-previous;
+}
+
+.cc-novel-reader[data-animation="corner"] .cc-novel-reader__page--turning {
+  animation-name: cc-novel-corner-next;
+  box-shadow: -22px 16px 38px rgba(0, 0, 0, 0.18);
+  transform-origin: left top;
+}
+
+.cc-novel-reader[data-animation="corner"]
+  .cc-novel-reader__page--turning::before {
+  animation: cc-novel-corner-fold-next var(--cc-novel-reader-duration, 720ms)
+    cubic-bezier(0.2, 0.8, 0.22, 1) both;
+}
+
+.cc-novel-reader[data-animation="corner"]
+  .cc-novel-reader__page--turning::after {
+  animation: cc-novel-corner-shadow-next var(--cc-novel-reader-duration, 720ms)
+    cubic-bezier(0.2, 0.8, 0.22, 1) both;
+}
+
+.cc-novel-reader[data-animation="corner"][data-direction="previous"]
+  .cc-novel-reader__page--turning {
+  animation-name: cc-novel-corner-previous;
+  box-shadow: 22px -16px 38px rgba(0, 0, 0, 0.18);
+  transform-origin: right bottom;
+}
+
+.cc-novel-reader[data-animation="corner"][data-direction="previous"]
+  .cc-novel-reader__page--turning::before {
+  animation-name: cc-novel-corner-fold-previous;
+}
+
+.cc-novel-reader[data-animation="corner"][data-direction="previous"]
+  .cc-novel-reader__page--turning::after {
+  animation-name: cc-novel-corner-shadow-previous;
+}
+
+.cc-novel-reader[data-animation="notebook"] .cc-novel-reader__page--turning {
+  animation-name: cc-novel-notebook-next;
+  box-shadow: -20px 18px 36px rgba(0, 0, 0, 0.16);
+  transform-origin: left top;
+}
+
+.cc-novel-reader[data-animation="notebook"]
+  .cc-novel-reader__page--turning::before {
+  animation: cc-novel-notebook-fold-next var(--cc-novel-reader-duration, 720ms)
+    cubic-bezier(0.2, 0.8, 0.22, 1) both;
+}
+
+.cc-novel-reader[data-animation="notebook"]
+  .cc-novel-reader__page--turning::after {
+  animation: cc-novel-notebook-shadow-next
+    var(--cc-novel-reader-duration, 720ms) cubic-bezier(0.2, 0.8, 0.22, 1) both;
+}
+
+.cc-novel-reader[data-animation="notebook"][data-direction="previous"]
+  .cc-novel-reader__page--turning {
+  animation-name: cc-novel-notebook-previous;
+  box-shadow: 20px 18px 36px rgba(0, 0, 0, 0.16);
+  transform-origin: right top;
+}
+
+.cc-novel-reader[data-animation="notebook"][data-direction="previous"]
+  .cc-novel-reader__page--turning::before {
+  animation-name: cc-novel-notebook-fold-previous;
+}
+
+.cc-novel-reader[data-animation="notebook"][data-direction="previous"]
+  .cc-novel-reader__page--turning::after {
+  animation-name: cc-novel-notebook-shadow-previous;
+}
+
+.cc-novel-reader__header,
+.cc-novel-reader__actions,
+.cc-comic-reader__toolbar {
+  align-items: center;
+  display: flex;
+  gap: 10px;
+  justify-content: space-between;
+}
+
+.cc-novel-reader__actions {
+  bottom: 16px;
+  justify-content: center;
+  left: 50%;
+  pointer-events: none;
+  position: absolute;
+  transform: translateX(-50%);
+  z-index: 5;
+}
+
+.cc-reader-icon {
+  display: block;
+  height: 18px;
+  width: 18px;
+}
+
+.cc-novel-reader__header span,
+.cc-comic-reader__toolbar span {
+  color: var(--cc-business-muted-color);
+  font-size: 13px;
+}
+
+.cc-novel-reader__content {
+  font-size: 16px;
+  line-height: 1.9;
+  margin-top: 18px;
+  white-space: pre-wrap;
+}
+
+.cc-novel-reader[data-dragging="false"] .cc-novel-reader__content,
+.cc-novel-reader[data-dragging="false"] .cc-novel-reader__header {
+  user-select: none;
+  -webkit-user-select: none;
+}
+
+.cc-novel-reader button,
+.cc-comic-reader button,
+.cc-live-room button {
+  background: color-mix(
+    in srgb,
+    var(--cc-form-color-accent) 14%,
+    var(--cc-form-color-surface)
+  );
+  border: 1px solid
+    color-mix(
+      in srgb,
+      var(--cc-form-color-accent) 26%,
+      var(--cc-business-border-color)
+    );
+  border-radius: var(--cc-radius-md);
+  color: var(--cc-business-text-color);
+  cursor: pointer;
+  min-height: 34px;
+  padding: 0 12px;
+  transition:
+    background-color var(--cc-animation-duration) var(--cc-animation-easing),
+    border-color var(--cc-animation-duration) var(--cc-animation-easing),
+    transform var(--cc-animation-duration) var(--cc-animation-easing);
+}
+
+.cc-novel-reader__actions button,
+.cc-comic-reader__toolbar button {
+  align-items: center;
+  border-radius: var(--cc-radius-pill);
+  display: inline-flex;
+  height: 36px;
+  justify-content: center;
+  min-height: 0;
+  padding: 0;
+  width: 36px;
+}
+
+.cc-novel-reader__actions button {
+  backdrop-filter: blur(12px);
+  pointer-events: auto;
+}
+
+.cc-novel-reader button:hover:not(:disabled),
+.cc-comic-reader button:hover:not(:disabled),
+.cc-live-room button:hover {
+  background: color-mix(
+    in srgb,
+    var(--cc-form-color-accent) 22%,
+    var(--cc-form-color-surface)
+  );
+  transform: translateY(-1px);
+}
+
+.cc-novel-reader button:disabled,
+.cc-comic-reader button:disabled {
+  cursor: not-allowed;
+  opacity: var(--cc-form-disabled-opacity);
+}
+
+@keyframes cc-novel-page-next {
+  0% {
+    border-radius: 0 112px 62px 0 / 0 30px 76px 0;
+    clip-path: polygon(46% 0, 100% 5.5%, 100% 94.8%, 32% 100%, 0 92%, 0 8%);
+    filter: drop-shadow(-40px 14px 36px rgba(0, 0, 0, 0.26));
+    opacity: 0.34;
+    transform: translate3d(86px, 0, 0) rotateY(-86deg) rotateX(4deg)
+      rotateZ(-4deg) skewY(-14deg) scaleX(0.66) scaleY(1.02);
+  }
+
+  34% {
+    border-radius: 0 88px 48px 0 / 0 24px 68px 0;
+    clip-path: polygon(24% 0, 100% 3.6%, 100% 97.2%, 16% 100%, 0 91%, 0 9%);
+    filter: drop-shadow(-30px 10px 34px rgba(0, 0, 0, 0.22));
+    opacity: 0.76;
+    transform: translate3d(36px, 0, 24px) rotateY(-54deg) rotateX(2.1deg)
+      rotateZ(-1.7deg) skewY(-8deg) scaleX(0.84) scaleY(1.04);
+  }
+
+  72% {
+    border-radius: 0 34px 18px 0 / 0 12px 30px 0;
+    clip-path: polygon(0 0, 100% 1.6%, 100% 99%, 0 100%);
+    filter: drop-shadow(-10px 4px 18px rgba(0, 0, 0, 0.14));
+    opacity: 0.96;
+    transform: translate3d(8px, 0, 8px) rotateY(-12deg) rotateX(0.6deg)
+      rotateZ(-0.25deg) skewY(-1.6deg) scaleX(0.982);
+  }
+
+  100% {
+    border-radius: 0;
+    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
+    filter: drop-shadow(0 0 0 rgba(0, 0, 0, 0));
+    opacity: 1;
+    transform: rotateY(0deg) translateX(0);
+  }
+}
+
+@keyframes cc-novel-page-previous {
+  0% {
+    border-radius: 62px 0 0 112px / 76px 0 0 30px;
+    clip-path: polygon(0 5.5%, 54% 0, 100% 8%, 100% 92%, 68% 100%, 0 94.8%);
+    filter: drop-shadow(40px 14px 36px rgba(0, 0, 0, 0.26));
+    opacity: 0.34;
+    transform: translate3d(-86px, 0, 0) rotateY(86deg) rotateX(-4deg)
+      rotateZ(4deg) skewY(14deg) scaleX(0.66) scaleY(1.02);
+  }
+
+  34% {
+    border-radius: 48px 0 0 88px / 68px 0 0 24px;
+    clip-path: polygon(0 3.6%, 76% 0, 100% 9%, 100% 91%, 84% 100%, 0 97.2%);
+    filter: drop-shadow(30px 10px 34px rgba(0, 0, 0, 0.22));
+    opacity: 0.76;
+    transform: translate3d(-36px, 0, 24px) rotateY(54deg) rotateX(-2.1deg)
+      rotateZ(1.7deg) skewY(8deg) scaleX(0.84) scaleY(1.04);
+  }
+
+  72% {
+    border-radius: 18px 0 0 34px / 30px 0 0 12px;
+    clip-path: polygon(0 1.6%, 100% 0, 100% 100%, 0 99%);
+    filter: drop-shadow(10px 4px 18px rgba(0, 0, 0, 0.14));
+    opacity: 0.96;
+    transform: translate3d(-8px, 0, 8px) rotateY(12deg) rotateX(-0.6deg)
+      rotateZ(0.25deg) skewY(1.6deg) scaleX(0.982);
+  }
+
+  100% {
+    border-radius: 0;
+    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
+    filter: drop-shadow(0 0 0 rgba(0, 0, 0, 0));
+    opacity: 1;
+    transform: rotateY(0deg) translateX(0);
+  }
+}
+
+@keyframes cc-novel-page-fold-next {
+  0% {
+    opacity: 0.96;
+    border-radius: 96% 8% 18% 80% / 34% 10% 34% 86%;
+    transform: translateX(58%) rotateZ(-4deg) skewY(-16deg) scaleX(0.36)
+      scaleY(1.18);
+  }
+
+  46% {
+    opacity: 0.86;
+    border-radius: 88% 10% 20% 72% / 38% 12% 34% 82%;
+    transform: translateX(8%) rotateZ(-1.8deg) skewY(-8deg) scaleX(1.04)
+      scaleY(1.12);
+  }
+
+  100% {
+    opacity: 0;
+    border-radius: 58% 10% 16% 52% / 44% 10% 32% 62%;
+    transform: translateX(-30%) rotateZ(0deg) skewY(-1.4deg) scaleX(1.28)
+      scaleY(1.04);
+  }
+}
+
+@keyframes cc-novel-page-fold-previous {
+  0% {
+    opacity: 0.96;
+    border-radius: 8% 96% 80% 18% / 10% 34% 86% 34%;
+    transform: translateX(-58%) rotateZ(4deg) skewY(16deg) scaleX(0.36)
+      scaleY(1.18);
+  }
+
+  46% {
+    opacity: 0.86;
+    border-radius: 10% 88% 72% 20% / 12% 38% 82% 34%;
+    transform: translateX(-8%) rotateZ(1.8deg) skewY(8deg) scaleX(1.04)
+      scaleY(1.12);
+  }
+
+  100% {
+    opacity: 0;
+    border-radius: 10% 58% 52% 16% / 10% 44% 62% 32%;
+    transform: translateX(30%) rotateZ(0deg) skewY(1.4deg) scaleX(1.28)
+      scaleY(1.04);
+  }
+}
+
+@keyframes cc-novel-page-shadow-next {
+  0% {
+    opacity: 0.5;
+    transform: translateX(-20%) scaleX(0.86);
+  }
+
+  58% {
+    opacity: 0.22;
+    transform: translateX(-4%) scaleX(1.04);
+  }
+
+  100% {
+    opacity: 0;
+    transform: translateX(0) scaleX(1.12);
+  }
+}
+
+@keyframes cc-novel-page-shadow-previous {
+  0% {
+    opacity: 0.5;
+    transform: translateX(20%) scaleX(-0.86);
+  }
+
+  58% {
+    opacity: 0.22;
+    transform: translateX(4%) scaleX(-1.04);
+  }
+
+  100% {
+    opacity: 0;
+    transform: translateX(0) scaleX(-1.12);
+  }
+}
+
+@keyframes cc-novel-slide-enter-next {
+  0% {
+    opacity: var(--cc-novel-slide-enter-start-opacity, 0.18);
+    transform: var(
+      --cc-novel-slide-enter-next-start-transform,
+      translate3d(10%, 0, -4px) scale(0.992)
+    );
+  }
+
+  100% {
+    opacity: 1;
+    transform: translate3d(0, 0, 0) scale(1);
+  }
+}
+
+@keyframes cc-novel-slide-enter-previous {
+  0% {
+    opacity: var(--cc-novel-slide-enter-start-opacity, 0.18);
+    transform: var(
+      --cc-novel-slide-enter-previous-start-transform,
+      translate3d(-10%, 0, -4px) scale(0.992)
+    );
+  }
+
+  100% {
+    opacity: 1;
+    transform: translate3d(0, 0, 0) scale(1);
+  }
+}
+
+@keyframes cc-novel-slide-leave-next {
+  0% {
+    opacity: var(--cc-novel-slide-leave-start-opacity, 1);
+    transform: var(
+      --cc-novel-slide-leave-next-start-transform,
+      translate3d(0, 0, 0) scale(1)
+    );
+  }
+
+  100% {
+    opacity: 0.06;
+    transform: translate3d(-18%, 0, 0) scale(0.99);
+  }
+}
+
+@keyframes cc-novel-slide-leave-previous {
+  0% {
+    opacity: var(--cc-novel-slide-leave-start-opacity, 1);
+    transform: var(
+      --cc-novel-slide-leave-previous-start-transform,
+      translate3d(0, 0, 0) scale(1)
+    );
+  }
+
+  100% {
+    opacity: 0.06;
+    transform: translate3d(18%, 0, 0) scale(0.99);
+  }
+}
+
+@keyframes cc-novel-corner-next {
+  0% {
+    border-radius: 0 0 54px 0;
+    clip-path: polygon(100% 100%, 100% 100%, 100% 100%, 100% 100%);
+    filter: drop-shadow(-18px 16px 26px rgba(0, 0, 0, 0.2));
+    opacity: 0.4;
+    transform: rotateZ(6deg) rotateY(-48deg) rotateX(8deg) skewY(-7deg)
+      scaleX(0.84) translate3d(42px, 32px, 0);
+  }
+
+  55% {
+    border-radius: 0 0 38px 0;
+    clip-path: polygon(18% 0, 100% 0, 100% 100%, 0 100%);
+    filter: drop-shadow(-12px 10px 20px rgba(0, 0, 0, 0.16));
+    opacity: 0.9;
+    transform: rotateZ(2deg) rotateY(-22deg) rotateX(3deg) skewY(-4deg)
+      scaleX(0.93) translate3d(14px, 12px, 8px);
+  }
+
+  100% {
+    border-radius: 0;
+    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
+    filter: drop-shadow(0 0 0 rgba(0, 0, 0, 0));
+    opacity: 1;
+    transform: rotateZ(0deg) rotateY(0deg) translate3d(0, 0, 0);
+  }
+}
+
+@keyframes cc-novel-corner-previous {
+  0% {
+    border-radius: 54px 0 0 0;
+    clip-path: polygon(0 0, 0 0, 0 0, 0 0);
+    filter: drop-shadow(18px -16px 26px rgba(0, 0, 0, 0.2));
+    opacity: 0.4;
+    transform: rotateZ(-6deg) rotateY(48deg) rotateX(-8deg) skewY(7deg)
+      scaleX(0.84) translate3d(-42px, -32px, 0);
+  }
+
+  55% {
+    border-radius: 38px 0 0 0;
+    clip-path: polygon(0 0, 82% 0, 100% 100%, 0 100%);
+    filter: drop-shadow(12px -10px 20px rgba(0, 0, 0, 0.16));
+    opacity: 0.9;
+    transform: rotateZ(-2deg) rotateY(22deg) rotateX(-3deg) skewY(4deg)
+      scaleX(0.93) translate3d(-14px, -12px, 8px);
+  }
+
+  100% {
+    border-radius: 0;
+    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
+    filter: drop-shadow(0 0 0 rgba(0, 0, 0, 0));
+    opacity: 1;
+    transform: rotateZ(0deg) rotateY(0deg) translate3d(0, 0, 0);
+  }
+}
+
+@keyframes cc-novel-notebook-next {
+  0% {
+    border-radius: 0 42px 46px 0;
+    filter: drop-shadow(-18px 18px 26px rgba(0, 0, 0, 0.18));
+    opacity: 0.45;
+    transform: rotateX(22deg) rotateY(-18deg) rotateZ(7deg) skewY(-6deg)
+      scaleX(0.86) translate3d(40px, 34px, 0);
+  }
+
+  45% {
+    border-radius: 0 28px 32px 0;
+    filter: drop-shadow(-12px 12px 20px rgba(0, 0, 0, 0.14));
+    opacity: 0.85;
+    transform: rotateX(10deg) rotateY(-8deg) rotateZ(2deg) skewY(-3deg)
+      scaleX(0.94) translate3d(14px, 12px, 8px);
+  }
+
+  100% {
+    border-radius: 0;
+    filter: drop-shadow(0 0 0 rgba(0, 0, 0, 0));
+    opacity: 1;
+    transform: rotateX(0) rotateZ(0) translate3d(0, 0, 0);
+  }
+}
+
+@keyframes cc-novel-notebook-previous {
+  0% {
+    border-radius: 42px 0 0 46px;
+    filter: drop-shadow(18px 18px 26px rgba(0, 0, 0, 0.18));
+    opacity: 0.45;
+    transform: rotateX(22deg) rotateY(18deg) rotateZ(-7deg) skewY(6deg)
+      scaleX(0.86) translate3d(-40px, 34px, 0);
+  }
+
+  45% {
+    border-radius: 28px 0 0 32px;
+    filter: drop-shadow(12px 12px 20px rgba(0, 0, 0, 0.14));
+    opacity: 0.85;
+    transform: rotateX(10deg) rotateY(8deg) rotateZ(-2deg) skewY(3deg)
+      scaleX(0.94) translate3d(-14px, 12px, 8px);
+  }
+
+  100% {
+    border-radius: 0;
+    filter: drop-shadow(0 0 0 rgba(0, 0, 0, 0));
+    opacity: 1;
+    transform: rotateX(0) rotateZ(0) translate3d(0, 0, 0);
+  }
+}
+
+@keyframes cc-novel-corner-fold-next {
+  0% {
+    border-radius: 92% 0 0 92% / 0 0 72% 72%;
+    opacity: 0.9;
+    transform: translate(44%, 42%) rotateZ(-32deg) skewY(-16deg) scaleX(0.42);
+  }
+
+  55% {
+    border-radius: 72% 0 0 72% / 0 0 58% 58%;
+    opacity: 0.64;
+    transform: translate(8%, 12%) rotateZ(-13deg) skewY(-8deg) scaleX(1.06);
+  }
+
+  100% {
+    opacity: 0;
+    transform: translate(-18%, -5%) rotateZ(0deg) skewY(-1.2deg) scaleX(1.28);
+  }
+}
+
+@keyframes cc-novel-corner-fold-previous {
+  0% {
+    border-radius: 0 92% 92% 0 / 72% 72% 0 0;
+    opacity: 0.9;
+    transform: translate(-44%, -42%) rotateZ(32deg) skewY(16deg) scaleX(0.42);
+  }
+
+  55% {
+    border-radius: 0 72% 72% 0 / 58% 58% 0 0;
+    opacity: 0.64;
+    transform: translate(-8%, -12%) rotateZ(13deg) skewY(8deg) scaleX(1.06);
+  }
+
+  100% {
+    opacity: 0;
+    transform: translate(18%, 5%) rotateZ(0deg) skewY(1.2deg) scaleX(1.28);
+  }
+}
+
+@keyframes cc-novel-corner-shadow-next {
+  0% {
+    opacity: 0.52;
+    transform: translate(-12%, -8%) rotateZ(-8deg) scaleX(0.82);
+  }
+
+  55% {
+    opacity: 0.24;
+    transform: translate(-4%, -2%) rotateZ(-3deg) scaleX(1.02);
+  }
+
+  100% {
+    opacity: 0;
+    transform: translate(0, 0) rotateZ(0deg) scaleX(1.12);
+  }
+}
+
+@keyframes cc-novel-corner-shadow-previous {
+  0% {
+    opacity: 0.52;
+    transform: translate(12%, 8%) rotateZ(8deg) scaleX(-0.82);
+  }
+
+  55% {
+    opacity: 0.24;
+    transform: translate(4%, 2%) rotateZ(3deg) scaleX(-1.02);
+  }
+
+  100% {
+    opacity: 0;
+    transform: translate(0, 0) rotateZ(0deg) scaleX(-1.12);
+  }
+}
+
+@keyframes cc-novel-notebook-fold-next {
+  0% {
+    border-radius: 84% 0 0 84% / 62% 0 0 62%;
+    opacity: 0.84;
+    transform: translate(40%, 28%) rotateZ(-16deg) skewY(-14deg) scaleX(0.5);
+  }
+
+  45% {
+    border-radius: 68% 0 0 68% / 52% 0 0 52%;
+    opacity: 0.6;
+    transform: translate(10%, 8%) rotateZ(-5deg) skewY(-7deg) scaleX(1.1);
+  }
+
+  100% {
+    opacity: 0;
+    transform: translate(-16%, 0) rotateZ(0deg) skewY(-1.2deg) scaleX(1.3);
+  }
+}
+
+@keyframes cc-novel-notebook-fold-previous {
+  0% {
+    border-radius: 0 84% 84% 0 / 0 62% 62% 0;
+    opacity: 0.84;
+    transform: translate(-40%, 28%) rotateZ(16deg) skewY(14deg) scaleX(0.5);
+  }
+
+  45% {
+    border-radius: 0 68% 68% 0 / 0 52% 52% 0;
+    opacity: 0.6;
+    transform: translate(-10%, 8%) rotateZ(5deg) skewY(7deg) scaleX(1.1);
+  }
+
+  100% {
+    opacity: 0;
+    transform: translate(16%, 0) rotateZ(0deg) skewY(1.2deg) scaleX(1.3);
+  }
+}
+
+@keyframes cc-novel-notebook-shadow-next {
+  0% {
+    opacity: 0.46;
+    transform: translate(-18%, 8%) scaleX(0.86);
+  }
+
+  45% {
+    opacity: 0.2;
+    transform: translate(-5%, 3%) scaleX(1.04);
+  }
+
+  100% {
+    opacity: 0;
+    transform: translate(0, 0) scaleX(1.12);
+  }
+}
+
+@keyframes cc-novel-notebook-shadow-previous {
+  0% {
+    opacity: 0.46;
+    transform: translate(18%, 8%) scaleX(-0.86);
+  }
+
+  45% {
+    opacity: 0.2;
+    transform: translate(5%, 3%) scaleX(-1.04);
+  }
+
+  100% {
+    opacity: 0;
+    transform: translate(0, 0) scaleX(-1.12);
+  }
+}
+