body,
body[data-theme="default"],
body[data-theme="blue"],
body[data-theme="yellow"],
body[data-theme="beige"],
body[data-theme="green"] {
  --primary-red-500: #e5353e;
  --primary-red-300: #ff6f75;
  --primary-red-50: #ffe6e7;
  --secondary-blue-500: #5790df;
  --secondary-blue-300: #84b4f5;
  --secondary-blue-50: #ebeffa;
  --surface-gray-900: #191919;
  --surface-gray-700: #4c4c4c;
  --surface-gray-500: #808080;
  --surface-gray-400: #adadad;
  --surface-gray-300: #ccc;
  --surface-gray-200: #e0e0e0;
  --surface-gray-100: #ebebeb;
  --surface-gray-50: #f5f5f5;
  --surface-bw-white: #fff;
  --background-gray-100: #ebebeb;
  --background-gray-50: #f5f5f5;
  --background-bw-white: #fff;
  --sheet-background-gray-50: #f5f5f5;
  --sheet-background-bw-white: #fff;
  --nav-bar-background-bw-white: #fff;
  --on-image-bw-white: #fff;
  --on-image-white-70: rgba(255, 255, 255, 0.7);
  --on-image-white-36: rgba(255, 255, 255, 0.36);
  --on-image-black-90: rgba(0, 0, 0, 0.9);
  --on-image-black-60: rgba(0, 0, 0, 0.6);
  --on-image-black-36: rgba(0, 0, 0, 0.36);
  --outline-black-8: rgba(0, 0, 0, 0.08);
  --overlay-black-90: rgba(0, 0, 0, 0.9);
  --overlay-black-60: rgba(0, 0, 0, 0.6);
  --overlay-black-36: rgba(0, 0, 0, 0.36);
  --segmentation-black-4: rgba(0, 0, 0, 0.04);
  --bw-black: #000;
  --bw-white: #fff;
  --sd2: rgba(0, 0, 0, 0.06);
  --sd3: rgba(0, 0, 0, 0.06);
  --sd4: rgba(0, 0, 0, 0.07);
  --sd5: rgba(0, 0, 0, 0.08);
  --sd6: rgba(0, 0, 0, 0.09);
  --sd7: rgba(0, 0, 0, 0.1);
  --sd8: rgba(0, 0, 0, 0.12);
  --sd12: rgba(0, 0, 0, 0.16);
  --sd16: rgba(0, 0, 0, 0.16);
  --on-image-surface-black-4: rgba(0, 0, 0, 0.04);
  --on-image-surface-black-8: rgba(0, 0, 0, 0.08);
}

body[data-theme="blue"] {
  --surface-gray-900: rgba(0, 0, 0, 0.9);
  --surface-gray-700: rgba(0, 0, 0, 0.7);
  --surface-gray-500: rgba(0, 0, 0, 0.48);
  --surface-gray-400: rgba(0, 0, 0, 0.36);
  --surface-gray-300: rgba(0, 0, 0, 0.32);
  --surface-gray-200: rgba(0, 0, 0, 0.24);
  --surface-gray-100: rgba(0, 0, 0, 0.12);
  --surface-gray-50: rgba(0, 0, 0, 0.08);
  --surface-bw-white: rgba(0, 0, 0, 0.04);
  --background-gray-100: #cedde1;
  --background-gray-50: #dcebef;
  --background-bw-white: #edf5f7;
  --sheet-background-gray-50: #dcebef;
  --sheet-background-bw-white: #edf5f7;
  --nav-bar-background-bw-white: #edf5f7;
}

body[data-theme="yellow"] {
  --surface-gray-900: rgba(0, 0, 0, 0.9);
  --surface-gray-700: rgba(0, 0, 0, 0.7);
  --surface-gray-500: rgba(0, 0, 0, 0.48);
  --surface-gray-400: rgba(0, 0, 0, 0.36);
  --surface-gray-300: rgba(0, 0, 0, 0.32);
  --surface-gray-200: rgba(0, 0, 0, 0.24);
  --surface-gray-100: rgba(0, 0, 0, 0.12);
  --surface-gray-50: rgba(0, 0, 0, 0.08);
  --surface-bw-white: rgba(0, 0, 0, 0.04);
  --background-gray-100: #e3d0a1;
  --background-gray-50: #efe2c0;
  --background-bw-white: #f4ecd1;
  --sheet-background-gray-50: #efe2c0;
  --sheet-background-bw-white: #f4ecd1;
  --nav-bar-background-bw-white: #f4ecd1;
}

body[data-theme="beige"] {
  --surface-gray-900: rgba(0, 0, 0, 0.9);
  --surface-gray-700: rgba(0, 0, 0, 0.7);
  --surface-gray-500: rgba(0, 0, 0, 0.48);
  --surface-gray-400: rgba(0, 0, 0, 0.36);
  --surface-gray-300: rgba(0, 0, 0, 0.32);
  --surface-gray-200: rgba(0, 0, 0, 0.24);
  --surface-gray-100: rgba(0, 0, 0, 0.12);
  --surface-gray-50: rgba(0, 0, 0, 0.08);
  --surface-bw-white: rgba(0, 0, 0, 0.04);
  --background-gray-100: #ebe6da;
  --background-gray-50: #f5f1e8;
  --background-bw-white: #faf9f4;
  --sheet-background-gray-50: #f5f1e8;
  --sheet-background-bw-white: #faf9f4;
  --nav-bar-background-bw-white: #faf9f4;
}

body[data-theme="green"] {
  --surface-gray-900: rgba(0, 0, 0, 0.9);
  --surface-gray-700: rgba(0, 0, 0, 0.7);
  --surface-gray-500: rgba(0, 0, 0, 0.48);
  --surface-gray-400: rgba(0, 0, 0, 0.36);
  --surface-gray-300: rgba(0, 0, 0, 0.32);
  --surface-gray-200: rgba(0, 0, 0, 0.24);
  --surface-gray-100: rgba(0, 0, 0, 0.12);
  --surface-gray-50: rgba(0, 0, 0, 0.08);
  --surface-bw-white: rgba(0, 0, 0, 0.04);
  --background-gray-100: #c9e0cb;
  --background-gray-50: #e0eee1;
  --background-bw-white: #ebfaeb;
  --sheet-background-gray-50: #e0eee1;
  --sheet-background-bw-white: #ebfaeb;
  --nav-bar-background-bw-white: #ebfaeb;
}

body[data-theme="dark"] {
  --primary-red-500: #ff4d55;
  --primary-red-300: rgba(229, 53, 62, 0.48);
  --primary-red-50: rgba(229, 53, 62, 0.16);
  --secondary-blue-500: #6da2ed;
  --secondary-blue-300: rgba(109, 162, 237, 0.48);
  --secondary-blue-50: rgba(114, 148, 227, 0.16);
  --surface-gray-900: rgba(255, 255, 255, 0.6);
  --surface-gray-700: rgba(255, 255, 255, 0.5);
  --surface-gray-500: rgba(255, 255, 255, 0.4);
  --surface-gray-400: rgba(255, 255, 255, 0.36);
  --surface-gray-300: rgba(255, 255, 255, 0.32);
  --surface-gray-200: rgba(255, 255, 255, 0.24);
  --surface-gray-100: rgba(255, 255, 255, 0.12);
  --surface-gray-50: rgba(255, 255, 255, 0.08);
  --surface-bw-white: rgba(255, 255, 255, 0.08);
  --background-gray-100: #0a0a0a;
  --background-gray-50: #111;
  --background-bw-white: #191919;
  --sheet-background-gray-50: #191919;
  --sheet-background-bw-white: #1f1f1f;
  --nav-bar-background-bw-white: #1f1f1f;
  --on-image-bw-white: rgba(255, 255, 255, 0.9);
  --on-image-white-70: rgba(255, 255, 255, 0.6);
  --on-image-white-36: rgba(255, 255, 255, 0.36);
  --on-image-black-90: rgba(0, 0, 0, 0.9);
  --on-image-black-60: rgba(0, 0, 0, 0.6);
  --on-image-black-36: rgba(0, 0, 0, 0.36);
  --outline-black-8: rgba(255, 255, 255, 0.12);
  --overlay-black-90: rgba(0, 0, 0, 0.9);
  --overlay-black-60: rgba(0, 0, 0, 0.6);
  --overlay-black-36: rgba(0, 0, 0, 0.36);
  --segmentation-black-4: rgba(0, 0, 0, 0.7);
  --bw-black: #000;
  --bw-white: #fff;
  --sd2: rgba(0, 0, 0, 0);
  --sd3: rgba(0, 0, 0, 0);
  --sd4: rgba(0, 0, 0, 0);
  --sd5: rgba(0, 0, 0, 0);
  --sd6: rgba(0, 0, 0, 0);
  --sd7: rgba(0, 0, 0, 0);
  --sd8: rgba(0, 0, 0, 0);
  --sd12: rgba(0, 0, 0, 0);
  --sd16: rgba(0, 0, 0, 0);
  --on-image-surface-black-4: rgba(255, 255, 255, 0.08);
  --on-image-surface-black-8: rgba(255, 255, 255, 0.12);
}

.novelbook__ho {
  width: 100%;
  padding: 0.12rem 0.24rem;
  display: flex;
  align-items: center;
  color: #fff;
  flex: 1 0 0;
}

.novelbook__ho .item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.04rem;
}

.novelbook__ho .item > div {
  display: flex;
  align-items: baseline;
  gap: 0.01rem;
}

.novelbook__ho .item .rank {
  font-family: Yuewen Font;
  font-style: normal;
  font-weight: 400;
  font-size: 0.18rem;
  line-height: 0.21rem;
  display: inline-block;
}

.novelbook__ho .item .superRank {
  display: flex;
  align-items: center;
  color: #ffebdf;
}

.novelbook__ho .item .superRank .rankIcon {
  height: 0.16rem;
}

.novelbook__ho .item .superRankName {
  color: rgba(255, 237, 203, 0.7);
  font-family: PingFang SC;
  font-style: normal;
  font-weight: 400;
  font-size: 0.12rem;
  line-height: 0.2rem;
}

.novelbook__ho .item .value {
  font-family: Yuewen Font;
  font-style: normal;
  font-weight: 400;
  font-size: 0.18rem;
  line-height: 0.21rem;
  line-height: 0.18rem;
}

[data-theme="default"] .novelbook__ho .item .value,
[data-theme="blue"] .novelbook__ho .item .value,
[data-theme="yellow"] .novelbook__ho .item .value,
[data-theme="beige"] .novelbook__ho .item .value,
[data-theme="green"] .novelbook__ho .item .value {
  color: #fff;
}

[data-theme="dark"] .novelbook__ho .item .value {
  color: rgba(255, 255, 255, 0.9);
}

.novelbook__ho .item .value .number {
  font-family: Yuewen Font;
  font-style: normal;
  font-weight: 400;
  font-size: 0.18rem;
  line-height: 0.21rem;
}

.novelbook__ho .item .unit {
  font-family: PingFang SC;
  font-style: normal;
  font-weight: 600;
  font-size: 0.14rem;
  line-height: 0.18rem;
}

.novelbook__ho .item .label {
  font-family: PingFang SC;
  font-style: normal;
  font-weight: 400;
  font-size: 0.12rem;
  line-height: 0.2rem;
}

[data-theme="default"] .novelbook__ho .item .label,
[data-theme="blue"] .novelbook__ho .item .label,
[data-theme="yellow"] .novelbook__ho .item .label,
[data-theme="beige"] .novelbook__ho .item .label,
[data-theme="green"] .novelbook__ho .item .label {
  color: rgba(255, 255, 255, 0.7);
}

[data-theme="dark"] .novelbook__ho .item .label {
  color: rgba(255, 255, 255, 0.6);
}

.novelbook__ho .line {
  width: 0.01rem;
  transform: scaleX(0.5);
  height: 0.3rem;
  opacity: 0.2;
  background-color: #fff;
}

[data-theme="default"] .novelbook__ho .line,
[data-theme="blue"] .novelbook__ho .line,
[data-theme="yellow"] .novelbook__ho .line,
[data-theme="beige"] .novelbook__ho .line,
[data-theme="green"] .novelbook__ho .line {
  background-color: #fff;
}

[data-theme="dark"] .novelbook__ho .line {
  background-color: rgba(255, 255, 255, 0.9);
}

body,
body[data-theme="default"],
body[data-theme="blue"],
body[data-theme="yellow"],
body[data-theme="beige"],
body[data-theme="green"] {
  --primary-red-500: #e5353e;
  --primary-red-300: #ff6f75;
  --primary-red-50: #ffe6e7;
  --secondary-blue-500: #5790df;
  --secondary-blue-300: #84b4f5;
  --secondary-blue-50: #ebeffa;
  --surface-gray-900: #191919;
  --surface-gray-700: #4c4c4c;
  --surface-gray-500: #808080;
  --surface-gray-400: #adadad;
  --surface-gray-300: #ccc;
  --surface-gray-200: #e0e0e0;
  --surface-gray-100: #ebebeb;
  --surface-gray-50: #f5f5f5;
  --surface-bw-white: #fff;
  --background-gray-100: #ebebeb;
  --background-gray-50: #f5f5f5;
  --background-bw-white: #fff;
  --sheet-background-gray-50: #f5f5f5;
  --sheet-background-bw-white: #fff;
  --nav-bar-background-bw-white: #fff;
  --on-image-bw-white: #fff;
  --on-image-white-70: rgba(255, 255, 255, 0.7);
  --on-image-white-36: rgba(255, 255, 255, 0.36);
  --on-image-black-90: rgba(0, 0, 0, 0.9);
  --on-image-black-60: rgba(0, 0, 0, 0.6);
  --on-image-black-36: rgba(0, 0, 0, 0.36);
  --outline-black-8: rgba(0, 0, 0, 0.08);
  --overlay-black-90: rgba(0, 0, 0, 0.9);
  --overlay-black-60: rgba(0, 0, 0, 0.6);
  --overlay-black-36: rgba(0, 0, 0, 0.36);
  --segmentation-black-4: rgba(0, 0, 0, 0.04);
  --bw-black: #000;
  --bw-white: #fff;
  --sd2: rgba(0, 0, 0, 0.06);
  --sd3: rgba(0, 0, 0, 0.06);
  --sd4: rgba(0, 0, 0, 0.07);
  --sd5: rgba(0, 0, 0, 0.08);
  --sd6: rgba(0, 0, 0, 0.09);
  --sd7: rgba(0, 0, 0, 0.1);
  --sd8: rgba(0, 0, 0, 0.12);
  --sd12: rgba(0, 0, 0, 0.16);
  --sd16: rgba(0, 0, 0, 0.16);
  --on-image-surface-black-4: rgba(0, 0, 0, 0.04);
  --on-image-surface-black-8: rgba(0, 0, 0, 0.08);
}

body[data-theme="blue"] {
  --surface-gray-900: rgba(0, 0, 0, 0.9);
  --surface-gray-700: rgba(0, 0, 0, 0.7);
  --surface-gray-500: rgba(0, 0, 0, 0.48);
  --surface-gray-400: rgba(0, 0, 0, 0.36);
  --surface-gray-300: rgba(0, 0, 0, 0.32);
  --surface-gray-200: rgba(0, 0, 0, 0.24);
  --surface-gray-100: rgba(0, 0, 0, 0.12);
  --surface-gray-50: rgba(0, 0, 0, 0.08);
  --surface-bw-white: rgba(0, 0, 0, 0.04);
  --background-gray-100: #cedde1;
  --background-gray-50: #dcebef;
  --background-bw-white: #edf5f7;
  --sheet-background-gray-50: #dcebef;
  --sheet-background-bw-white: #edf5f7;
  --nav-bar-background-bw-white: #edf5f7;
}

body[data-theme="yellow"] {
  --surface-gray-900: rgba(0, 0, 0, 0.9);
  --surface-gray-700: rgba(0, 0, 0, 0.7);
  --surface-gray-500: rgba(0, 0, 0, 0.48);
  --surface-gray-400: rgba(0, 0, 0, 0.36);
  --surface-gray-300: rgba(0, 0, 0, 0.32);
  --surface-gray-200: rgba(0, 0, 0, 0.24);
  --surface-gray-100: rgba(0, 0, 0, 0.12);
  --surface-gray-50: rgba(0, 0, 0, 0.08);
  --surface-bw-white: rgba(0, 0, 0, 0.04);
  --background-gray-100: #e3d0a1;
  --background-gray-50: #efe2c0;
  --background-bw-white: #f4ecd1;
  --sheet-background-gray-50: #efe2c0;
  --sheet-background-bw-white: #f4ecd1;
  --nav-bar-background-bw-white: #f4ecd1;
}

body[data-theme="beige"] {
  --surface-gray-900: rgba(0, 0, 0, 0.9);
  --surface-gray-700: rgba(0, 0, 0, 0.7);
  --surface-gray-500: rgba(0, 0, 0, 0.48);
  --surface-gray-400: rgba(0, 0, 0, 0.36);
  --surface-gray-300: rgba(0, 0, 0, 0.32);
  --surface-gray-200: rgba(0, 0, 0, 0.24);
  --surface-gray-100: rgba(0, 0, 0, 0.12);
  --surface-gray-50: rgba(0, 0, 0, 0.08);
  --surface-bw-white: rgba(0, 0, 0, 0.04);
  --background-gray-100: #ebe6da;
  --background-gray-50: #f5f1e8;
  --background-bw-white: #faf9f4;
  --sheet-background-gray-50: #f5f1e8;
  --sheet-background-bw-white: #faf9f4;
  --nav-bar-background-bw-white: #faf9f4;
}

body[data-theme="green"] {
  --surface-gray-900: rgba(0, 0, 0, 0.9);
  --surface-gray-700: rgba(0, 0, 0, 0.7);
  --surface-gray-500: rgba(0, 0, 0, 0.48);
  --surface-gray-400: rgba(0, 0, 0, 0.36);
  --surface-gray-300: rgba(0, 0, 0, 0.32);
  --surface-gray-200: rgba(0, 0, 0, 0.24);
  --surface-gray-100: rgba(0, 0, 0, 0.12);
  --surface-gray-50: rgba(0, 0, 0, 0.08);
  --surface-bw-white: rgba(0, 0, 0, 0.04);
  --background-gray-100: #c9e0cb;
  --background-gray-50: #e0eee1;
  --background-bw-white: #ebfaeb;
  --sheet-background-gray-50: #e0eee1;
  --sheet-background-bw-white: #ebfaeb;
  --nav-bar-background-bw-white: #ebfaeb;
}

body[data-theme="dark"] {
  --primary-red-500: #ff4d55;
  --primary-red-300: rgba(229, 53, 62, 0.48);
  --primary-red-50: rgba(229, 53, 62, 0.16);
  --secondary-blue-500: #6da2ed;
  --secondary-blue-300: rgba(109, 162, 237, 0.48);
  --secondary-blue-50: rgba(114, 148, 227, 0.16);
  --surface-gray-900: rgba(255, 255, 255, 0.6);
  --surface-gray-700: rgba(255, 255, 255, 0.5);
  --surface-gray-500: rgba(255, 255, 255, 0.4);
  --surface-gray-400: rgba(255, 255, 255, 0.36);
  --surface-gray-300: rgba(255, 255, 255, 0.32);
  --surface-gray-200: rgba(255, 255, 255, 0.24);
  --surface-gray-100: rgba(255, 255, 255, 0.12);
  --surface-gray-50: rgba(255, 255, 255, 0.08);
  --surface-bw-white: rgba(255, 255, 255, 0.08);
  --background-gray-100: #0a0a0a;
  --background-gray-50: #111;
  --background-bw-white: #191919;
  --sheet-background-gray-50: #191919;
  --sheet-background-bw-white: #1f1f1f;
  --nav-bar-background-bw-white: #1f1f1f;
  --on-image-bw-white: rgba(255, 255, 255, 0.9);
  --on-image-white-70: rgba(255, 255, 255, 0.6);
  --on-image-white-36: rgba(255, 255, 255, 0.36);
  --on-image-black-90: rgba(0, 0, 0, 0.9);
  --on-image-black-60: rgba(0, 0, 0, 0.6);
  --on-image-black-36: rgba(0, 0, 0, 0.36);
  --outline-black-8: rgba(255, 255, 255, 0.12);
  --overlay-black-90: rgba(0, 0, 0, 0.9);
  --overlay-black-60: rgba(0, 0, 0, 0.6);
  --overlay-black-36: rgba(0, 0, 0, 0.36);
  --segmentation-black-4: rgba(0, 0, 0, 0.7);
  --bw-black: #000;
  --bw-white: #fff;
  --sd2: rgba(0, 0, 0, 0);
  --sd3: rgba(0, 0, 0, 0);
  --sd4: rgba(0, 0, 0, 0);
  --sd5: rgba(0, 0, 0, 0);
  --sd6: rgba(0, 0, 0, 0);
  --sd7: rgba(0, 0, 0, 0);
  --sd8: rgba(0, 0, 0, 0);
  --sd12: rgba(0, 0, 0, 0);
  --sd16: rgba(0, 0, 0, 0);
  --on-image-surface-black-4: rgba(255, 255, 255, 0.08);
  --on-image-surface-black-8: rgba(255, 255, 255, 0.12);
}

.printbook__ho {
  width: 100%;
  padding: 0.12rem 0.24rem;
  display: flex;
  align-items: center;
  color: #fff;
  flex: 1 0 0;
}

.printbook__ho .item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.04rem;
}

.printbook__ho .item > div {
  display: flex;
  align-items: baseline;
  gap: 0.01rem;
}

.printbook__ho .item .value {
  font-family: Yuewen Font;
  font-style: normal;
  font-weight: 400;
  font-size: 0.18rem;
  line-height: 0.21rem;
  line-height: 0.18rem;
}

[data-theme="default"] .printbook__ho .item .value,
[data-theme="blue"] .printbook__ho .item .value,
[data-theme="yellow"] .printbook__ho .item .value,
[data-theme="beige"] .printbook__ho .item .value,
[data-theme="green"] .printbook__ho .item .value {
  color: #fff;
}

[data-theme="dark"] .printbook__ho .item .value {
  color: rgba(255, 255, 255, 0.9);
}

.printbook__ho .item .value .number {
  font-family: Yuewen Font;
  font-style: normal;
  font-weight: 400;
  font-size: 0.18rem;
  line-height: 0.21rem;
}

.printbook__ho .item .unit {
  font-family: PingFang SC;
  font-style: normal;
  font-weight: 600;
  font-size: 0.14rem;
  line-height: 0.18rem;
}

.printbook__ho .item .label {
  font-family: PingFang SC;
  font-style: normal;
  font-weight: 400;
  font-size: 0.12rem;
  line-height: 0.2rem;
}

[data-theme="default"] .printbook__ho .item .label,
[data-theme="blue"] .printbook__ho .item .label,
[data-theme="yellow"] .printbook__ho .item .label,
[data-theme="beige"] .printbook__ho .item .label,
[data-theme="green"] .printbook__ho .item .label {
  color: rgba(255, 255, 255, 0.7);
}

[data-theme="dark"] .printbook__ho .item .label {
  color: rgba(255, 255, 255, 0.6);
}

.printbook__ho .line {
  width: 0.01rem;
  transform: scaleX(0.5);
  height: 0.3rem;
  opacity: 0.2;
}

[data-theme="default"] .printbook__ho .line,
[data-theme="blue"] .printbook__ho .line,
[data-theme="yellow"] .printbook__ho .line,
[data-theme="beige"] .printbook__ho .line,
[data-theme="green"] .printbook__ho .line {
  background-color: #fff;
}

[data-theme="dark"] .printbook__ho .line {
  background-color: rgba(255, 255, 255, 0.9);
}

body,
body[data-theme="default"],
body[data-theme="blue"],
body[data-theme="yellow"],
body[data-theme="beige"],
body[data-theme="green"] {
  --primary-red-500: #e5353e;
  --primary-red-300: #ff6f75;
  --primary-red-50: #ffe6e7;
  --secondary-blue-500: #5790df;
  --secondary-blue-300: #84b4f5;
  --secondary-blue-50: #ebeffa;
  --surface-gray-900: #191919;
  --surface-gray-700: #4c4c4c;
  --surface-gray-500: #808080;
  --surface-gray-400: #adadad;
  --surface-gray-300: #ccc;
  --surface-gray-200: #e0e0e0;
  --surface-gray-100: #ebebeb;
  --surface-gray-50: #f5f5f5;
  --surface-bw-white: #fff;
  --background-gray-100: #ebebeb;
  --background-gray-50: #f5f5f5;
  --background-bw-white: #fff;
  --sheet-background-gray-50: #f5f5f5;
  --sheet-background-bw-white: #fff;
  --nav-bar-background-bw-white: #fff;
  --on-image-bw-white: #fff;
  --on-image-white-70: rgba(255, 255, 255, 0.7);
  --on-image-white-36: rgba(255, 255, 255, 0.36);
  --on-image-black-90: rgba(0, 0, 0, 0.9);
  --on-image-black-60: rgba(0, 0, 0, 0.6);
  --on-image-black-36: rgba(0, 0, 0, 0.36);
  --outline-black-8: rgba(0, 0, 0, 0.08);
  --overlay-black-90: rgba(0, 0, 0, 0.9);
  --overlay-black-60: rgba(0, 0, 0, 0.6);
  --overlay-black-36: rgba(0, 0, 0, 0.36);
  --segmentation-black-4: rgba(0, 0, 0, 0.04);
  --bw-black: #000;
  --bw-white: #fff;
  --sd2: rgba(0, 0, 0, 0.06);
  --sd3: rgba(0, 0, 0, 0.06);
  --sd4: rgba(0, 0, 0, 0.07);
  --sd5: rgba(0, 0, 0, 0.08);
  --sd6: rgba(0, 0, 0, 0.09);
  --sd7: rgba(0, 0, 0, 0.1);
  --sd8: rgba(0, 0, 0, 0.12);
  --sd12: rgba(0, 0, 0, 0.16);
  --sd16: rgba(0, 0, 0, 0.16);
  --on-image-surface-black-4: rgba(0, 0, 0, 0.04);
  --on-image-surface-black-8: rgba(0, 0, 0, 0.08);
}

body[data-theme="blue"] {
  --surface-gray-900: rgba(0, 0, 0, 0.9);
  --surface-gray-700: rgba(0, 0, 0, 0.7);
  --surface-gray-500: rgba(0, 0, 0, 0.48);
  --surface-gray-400: rgba(0, 0, 0, 0.36);
  --surface-gray-300: rgba(0, 0, 0, 0.32);
  --surface-gray-200: rgba(0, 0, 0, 0.24);
  --surface-gray-100: rgba(0, 0, 0, 0.12);
  --surface-gray-50: rgba(0, 0, 0, 0.08);
  --surface-bw-white: rgba(0, 0, 0, 0.04);
  --background-gray-100: #cedde1;
  --background-gray-50: #dcebef;
  --background-bw-white: #edf5f7;
  --sheet-background-gray-50: #dcebef;
  --sheet-background-bw-white: #edf5f7;
  --nav-bar-background-bw-white: #edf5f7;
}

body[data-theme="yellow"] {
  --surface-gray-900: rgba(0, 0, 0, 0.9);
  --surface-gray-700: rgba(0, 0, 0, 0.7);
  --surface-gray-500: rgba(0, 0, 0, 0.48);
  --surface-gray-400: rgba(0, 0, 0, 0.36);
  --surface-gray-300: rgba(0, 0, 0, 0.32);
  --surface-gray-200: rgba(0, 0, 0, 0.24);
  --surface-gray-100: rgba(0, 0, 0, 0.12);
  --surface-gray-50: rgba(0, 0, 0, 0.08);
  --surface-bw-white: rgba(0, 0, 0, 0.04);
  --background-gray-100: #e3d0a1;
  --background-gray-50: #efe2c0;
  --background-bw-white: #f4ecd1;
  --sheet-background-gray-50: #efe2c0;
  --sheet-background-bw-white: #f4ecd1;
  --nav-bar-background-bw-white: #f4ecd1;
}

body[data-theme="beige"] {
  --surface-gray-900: rgba(0, 0, 0, 0.9);
  --surface-gray-700: rgba(0, 0, 0, 0.7);
  --surface-gray-500: rgba(0, 0, 0, 0.48);
  --surface-gray-400: rgba(0, 0, 0, 0.36);
  --surface-gray-300: rgba(0, 0, 0, 0.32);
  --surface-gray-200: rgba(0, 0, 0, 0.24);
  --surface-gray-100: rgba(0, 0, 0, 0.12);
  --surface-gray-50: rgba(0, 0, 0, 0.08);
  --surface-bw-white: rgba(0, 0, 0, 0.04);
  --background-gray-100: #ebe6da;
  --background-gray-50: #f5f1e8;
  --background-bw-white: #faf9f4;
  --sheet-background-gray-50: #f5f1e8;
  --sheet-background-bw-white: #faf9f4;
  --nav-bar-background-bw-white: #faf9f4;
}

body[data-theme="green"] {
  --surface-gray-900: rgba(0, 0, 0, 0.9);
  --surface-gray-700: rgba(0, 0, 0, 0.7);
  --surface-gray-500: rgba(0, 0, 0, 0.48);
  --surface-gray-400: rgba(0, 0, 0, 0.36);
  --surface-gray-300: rgba(0, 0, 0, 0.32);
  --surface-gray-200: rgba(0, 0, 0, 0.24);
  --surface-gray-100: rgba(0, 0, 0, 0.12);
  --surface-gray-50: rgba(0, 0, 0, 0.08);
  --surface-bw-white: rgba(0, 0, 0, 0.04);
  --background-gray-100: #c9e0cb;
  --background-gray-50: #e0eee1;
  --background-bw-white: #ebfaeb;
  --sheet-background-gray-50: #e0eee1;
  --sheet-background-bw-white: #ebfaeb;
  --nav-bar-background-bw-white: #ebfaeb;
}

body[data-theme="dark"] {
  --primary-red-500: #ff4d55;
  --primary-red-300: rgba(229, 53, 62, 0.48);
  --primary-red-50: rgba(229, 53, 62, 0.16);
  --secondary-blue-500: #6da2ed;
  --secondary-blue-300: rgba(109, 162, 237, 0.48);
  --secondary-blue-50: rgba(114, 148, 227, 0.16);
  --surface-gray-900: rgba(255, 255, 255, 0.6);
  --surface-gray-700: rgba(255, 255, 255, 0.5);
  --surface-gray-500: rgba(255, 255, 255, 0.4);
  --surface-gray-400: rgba(255, 255, 255, 0.36);
  --surface-gray-300: rgba(255, 255, 255, 0.32);
  --surface-gray-200: rgba(255, 255, 255, 0.24);
  --surface-gray-100: rgba(255, 255, 255, 0.12);
  --surface-gray-50: rgba(255, 255, 255, 0.08);
  --surface-bw-white: rgba(255, 255, 255, 0.08);
  --background-gray-100: #0a0a0a;
  --background-gray-50: #111;
  --background-bw-white: #191919;
  --sheet-background-gray-50: #191919;
  --sheet-background-bw-white: #1f1f1f;
  --nav-bar-background-bw-white: #1f1f1f;
  --on-image-bw-white: rgba(255, 255, 255, 0.9);
  --on-image-white-70: rgba(255, 255, 255, 0.6);
  --on-image-white-36: rgba(255, 255, 255, 0.36);
  --on-image-black-90: rgba(0, 0, 0, 0.9);
  --on-image-black-60: rgba(0, 0, 0, 0.6);
  --on-image-black-36: rgba(0, 0, 0, 0.36);
  --outline-black-8: rgba(255, 255, 255, 0.12);
  --overlay-black-90: rgba(0, 0, 0, 0.9);
  --overlay-black-60: rgba(0, 0, 0, 0.6);
  --overlay-black-36: rgba(0, 0, 0, 0.36);
  --segmentation-black-4: rgba(0, 0, 0, 0.7);
  --bw-black: #000;
  --bw-white: #fff;
  --sd2: rgba(0, 0, 0, 0);
  --sd3: rgba(0, 0, 0, 0);
  --sd4: rgba(0, 0, 0, 0);
  --sd5: rgba(0, 0, 0, 0);
  --sd6: rgba(0, 0, 0, 0);
  --sd7: rgba(0, 0, 0, 0);
  --sd8: rgba(0, 0, 0, 0);
  --sd12: rgba(0, 0, 0, 0);
  --sd16: rgba(0, 0, 0, 0);
  --on-image-surface-black-4: rgba(255, 255, 255, 0.08);
  --on-image-surface-black-8: rgba(255, 255, 255, 0.12);
}

.detail__head6 .banner {
  position: absolute;
  opacity: 0.15;
  filter: blur(0.18rem);
  top: 0.46rem;
  z-index: 3;
}

.detail__head8 {
  position: relative;
  display: block;
  overflow: hidden;
  color: #fff;
  padding-top: 0.52rem;
  padding-bottom: 0.1rem;
  background: linear-gradient(
    to right,
    rgba(var(--page-color), 1),
    rgba(var(--page-color), 0.5)
  );
  z-index: 4;
}

.detail__head8 .detail__head5 {
  width: 0.87rem;
  height: 1.16rem;
  margin-right: 0.12rem;
  border-radius: 0.04rem;
  border: 0.0008rem solid;
  display: block;
  float: left;
}

[data-theme="default"] .detail__head8 .detail__head5,
[data-theme="blue"] .detail__head8 .detail__head5,
[data-theme="yellow"] .detail__head8 .detail__head5,
[data-theme="beige"] .detail__head8 .detail__head5,
[data-theme="green"] .detail__head8 .detail__head5 {
  border-color: rgba(0, 0, 0, 0.08);
}

[data-theme="dark"] .detail__head8 .detail__head5 {
  border-color: rgba(255, 255, 255, 0.12);
}

.detail__head8 .detail_header {
  padding: 0.12rem 0.16rem;
  font-family: PingFang SC;
  font-style: normal;
  font-weight: 400;
  font-size: 0.2rem;
  line-height: 0.28rem;
}

.detail__head7 {
  height: 1.16rem;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.01rem;
}

.detail__head2 {
  font-family: PingFang SC;
  font-style: normal;
  font-weight: 600;
  font-size: 0.2rem;
  line-height: 0.28rem;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  white-space: pre-wrap;
  font-weight: 500;
  line-height: 0.26rem;
  color: #fff;
  max-width: 100%;
}

.detail__head1 {
  display: flex;
  font-family: PingFang SC;
  font-style: normal;
  font-weight: 600;
  font-size: 0.13rem;
  line-height: 0.2rem;
}

.detail__head1 .authorname {
  display: inline;
}

.detail__head1.non-hover {
  color: inherit;
}

.detail__heade {
  display: flex;
  align-items: center;
  color: #4c70ff;
}

.detail__heade .author-tag {
  display: inline-block;
  width: 0.42rem;
  height: 0.22rem;
  margin-left: 0.04rem;
  background-repeat: no-repeat;
  background-position-y: center;
  background-size: contain;
}

.detail__head3 {
  font-family: PingFang SC;
  font-style: normal;
  font-weight: 400;
  font-size: 0.13rem;
  line-height: 0.2rem;
  display: flex;
  align-items: center;
  justify-self: start;
  color: rgba(255, 255, 255, 0.7);
}

.detail__head3 em {
  margin: auto 0.04rem;
}

.detail__head4 {
  font-family: PingFang SC;
  font-style: normal;
  font-weight: 400;
  font-size: 0.13rem;
  line-height: 0.2rem;
}

[data-theme="default"] .detail__head4,
[data-theme="blue"] .detail__head4,
[data-theme="yellow"] .detail__head4,
[data-theme="beige"] .detail__head4,
[data-theme="green"] .detail__head4 {
  color: rgba(255, 255, 255, 0.7);
}

[data-theme="dark"] .detail__head4 {
  color: rgba(255, 255, 255, 0.6);
}