.video-screen,
.video-detail-screen {
  background:
    linear-gradient(rgba(247, 246, 241, 0.97), rgba(247, 246, 241, 0.97)),
    url("./assets/ink-home/scenes/paper-texture.webp") center / 72cqw 72cqw repeat;
  color: #172625;
  font-family: "Alibaba PuHuiTi", "PingFang SC", -apple-system, BlinkMacSystemFont, "Microsoft YaHei", sans-serif;
}

.video-page,
.video-detail-page {
  min-height: 100%;
}

.video-topbar,
.video-detail-topbar {
  background: rgba(250, 250, 247, 0.97);
}

.video-masthead {
  position: relative;
  display: flex;
  min-height: 30.4cqw;
  margin: 3.2cqw 3.2cqw 0;
  overflow: hidden;
  align-items: center;
  justify-content: space-between;
  padding: 4.8cqw 5.3cqw;
  border: 0.267cqw solid rgba(21, 61, 63, 0.1);
  border-radius: 3.2cqw;
  background:
    radial-gradient(circle at 88% 0, rgba(197, 207, 190, 0.68), transparent 34%),
    linear-gradient(128deg, rgba(246, 247, 240, 0.98), rgba(229, 235, 224, 0.94));
  box-shadow: 0 2.4cqw 6.4cqw rgba(20, 48, 45, 0.05);
}

.video-masthead::after {
  position: absolute;
  right: -7cqw;
  bottom: -13cqw;
  width: 34cqw;
  height: 34cqw;
  border: 0.267cqw solid rgba(21, 61, 63, 0.1);
  border-radius: 50%;
  content: "";
}

.video-masthead > div {
  position: relative;
  z-index: 1;
}

.video-masthead > div > span {
  color: #71817d;
  font-size: 2.3cqw;
  font-weight: 600;
  letter-spacing: 0.2em;
}

.video-masthead h1 {
  margin: 2.1cqw 0 1.3cqw;
  color: #153d3f;
  font-family: var(--section-title-font);
  font-size: 5.15cqw;
  font-weight: 500;
  line-height: 1.25;
}

.video-masthead p {
  margin: 0;
  color: #64716f;
  font-size: 3cqw;
  line-height: 1.45;
}

.video-masthead > img {
  position: relative;
  z-index: 1;
  width: 18cqw;
  height: 18cqw;
  object-fit: contain;
  filter: contrast(1.15) saturate(0.76);
  mix-blend-mode: multiply;
  opacity: 0.84;
}

.video-categories {
  display: flex;
  gap: 2.1cqw;
  margin-top: 3.2cqw;
  overflow-x: auto;
  padding: 0 3.2cqw 1.3cqw;
  scrollbar-width: none;
}

.video-categories::-webkit-scrollbar {
  display: none;
}

.video-categories button {
  flex: 0 0 auto;
  min-height: 9.6cqw;
  padding: 0 4cqw;
  border: 0.267cqw solid rgba(21, 61, 63, 0.12);
  border-radius: 4.8cqw;
  background: rgba(255, 255, 255, 0.58);
  color: #64716f;
  font-size: 3.1cqw;
}

.video-categories button.active {
  border-color: #204a46;
  background: #204a46;
  color: #f7f7f2;
  box-shadow: 0 1.6cqw 3.2cqw rgba(32, 74, 70, 0.14);
}

.video-result-line {
  display: flex;
  min-height: max(11.7cqw, 44px);
  margin: 2.1cqw 3.2cqw 1.6cqw;
  align-items: center;
  justify-content: space-between;
  gap: 3.2cqw;
}

.video-result-line strong {
  min-width: 0;
  overflow: hidden;
  color: #172625;
  font-family: var(--calligraphy);
  font-size: 4.5cqw;
  line-height: 1.2;
  letter-spacing: 0.03em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.video-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 3.2cqw 2.4cqw;
  padding: 0 3.2cqw 8cqw;
}

.video-card {
  min-width: 0;
  overflow: hidden;
  padding: 0;
  border: 0.267cqw solid rgba(22, 57, 55, 0.1);
  border-radius: 2.7cqw;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 1.6cqw 4cqw rgba(23, 48, 45, 0.045);
  text-align: left;
  transition: transform 160ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.video-card-media {
  position: relative;
  display: block;
  height: 31.5cqw;
  overflow: hidden;
  background: #dfe5df;
}

.video-card-media > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.76) contrast(0.96) brightness(1.03);
  transition: transform 260ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.video-card-play {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  width: 9.6cqw;
  height: 9.6cqw;
  place-items: center;
  border: 0.267cqw solid rgba(255, 255, 255, 0.7);
  border-radius: 50%;
  background: rgba(18, 45, 43, 0.7);
  box-shadow: 0 1.1cqw 3.2cqw rgba(0, 0, 0, 0.18);
  transform: translate(-50%, -50%);
}

.video-card-play img {
  width: 5.3cqw;
  height: 5.3cqw;
  object-fit: contain;
  filter: brightness(0) invert(1);
  transform: translateX(0.3cqw);
}

.video-card-duration {
  position: absolute;
  right: 1.6cqw;
  bottom: 1.6cqw;
  padding: 0.7cqw 1.3cqw;
  border-radius: 1cqw;
  background: rgba(16, 30, 29, 0.72);
  color: #fff;
  font-size: 2.25cqw;
  line-height: 1;
}

.video-card-copy {
  display: block;
  padding: 2.7cqw 2.7cqw 2.4cqw;
}

.video-card-copy > small {
  color: #8d433c;
  font-size: 2.45cqw;
  font-weight: 600;
}

.video-card-copy > strong {
  display: -webkit-box;
  min-height: 10.5cqw;
  margin-top: 1.3cqw;
  overflow: hidden;
  color: #183534;
  font-family: var(--section-title-font);
  font-size: 3.65cqw;
  font-weight: 600;
  line-height: 1.45;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.video-card-meta {
  display: flex;
  min-width: 0;
  margin-top: 2.1cqw;
  align-items: center;
  justify-content: space-between;
  gap: 1.3cqw;
  color: #87918e;
  font-size: 2.35cqw;
}

.video-card-meta span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.video-card:active {
  transform: scale(0.985);
}

.video-card:active .video-card-media > img {
  transform: scale(1.025);
}

.video-empty {
  margin: 6.4cqw 3.2cqw;
  padding: 10.7cqw 5.3cqw;
  border: 0.267cqw solid rgba(22, 57, 55, 0.09);
  border-radius: 3.2cqw;
  background: rgba(255, 255, 255, 0.68);
  text-align: center;
}

.video-empty > span {
  display: grid;
  width: 14.4cqw;
  height: 14.4cqw;
  margin: 0 auto;
  place-items: center;
  border: 0.267cqw solid rgba(21, 61, 63, 0.18);
  border-radius: 50%;
  color: #204a46;
  font-family: var(--calligraphy);
  font-size: 6.4cqw;
}

.video-empty h2 {
  margin: 3.2cqw 0 1.6cqw;
  color: #183534;
  font-family: var(--section-title-font);
  font-size: 4.2cqw;
  font-weight: 500;
}

.video-empty p {
  margin: 0;
  color: #7c8784;
  font-size: 3.2cqw;
}

.video-empty button {
  min-height: 11.2cqw;
  margin-top: 4.8cqw;
  padding: 0 5.3cqw;
  border: 0;
  border-radius: 2.4cqw;
  background: #204a46;
  color: #fff;
  font-size: 3.3cqw;
}

.video-detail-page {
  padding-bottom: 20.8cqw;
}

.video-detail {
  padding-bottom: 10.7cqw;
}

.video-player {
  position: relative;
  height: 58.7cqw;
  overflow: hidden;
  background: #13201f;
}

.video-player > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.72) brightness(0.82) contrast(1.02);
}

.video-player::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 52%, rgba(8, 20, 19, 0.64));
  content: "";
  pointer-events: none;
}

.video-player-toggle {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  display: grid;
  width: 16cqw;
  height: 16cqw;
  place-items: center;
  border: 0.267cqw solid rgba(255, 255, 255, 0.78);
  border-radius: 50%;
  background: rgba(23, 59, 57, 0.74);
  box-shadow: 0 2.1cqw 6.4cqw rgba(0, 0, 0, 0.2);
  transform: translate(-50%, -50%);
}

.video-player-toggle img {
  width: 8cqw;
  height: 8cqw;
  filter: brightness(0) invert(1);
  transform: translateX(0.5cqw);
}

.video-player.is-playing .video-player-toggle img {
  display: none;
}

.video-player.is-playing .video-player-toggle::before {
  width: 5.1cqw;
  height: 6.4cqw;
  border-right: 1.6cqw solid #fff;
  border-left: 1.6cqw solid #fff;
  content: "";
}

.video-player-status {
  position: absolute;
  z-index: 2;
  right: 4.3cqw;
  bottom: 4cqw;
  left: 4.3cqw;
  display: flex;
  align-items: center;
  gap: 2.1cqw;
  color: rgba(255, 255, 255, 0.9);
  font-size: 2.45cqw;
}

.video-player-progress {
  height: 0.8cqw;
  flex: 1;
  overflow: hidden;
  border-radius: 1cqw;
  background: rgba(255, 255, 255, 0.38);
}

.video-player-progress::before {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: #bd4b42;
  content: "";
  transition: width 500ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.video-player.is-playing .video-player-progress::before {
  width: 28%;
}

.video-detail-content {
  padding: 5.3cqw 5.4cqw 0;
}

.video-author-row {
  display: grid;
  grid-template-columns: 10.7cqw minmax(0, 1fr) auto;
  align-items: center;
  gap: 2.7cqw;
}

.video-author-avatar {
  display: grid;
  width: 10.7cqw;
  height: 10.7cqw;
  place-items: center;
  border-radius: 50%;
  background: #e6ece5;
  color: #315c57;
  font-family: var(--calligraphy);
  font-size: 4.3cqw;
}

.video-author-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 0.7cqw;
}

.video-author-copy strong {
  color: #203a38;
  font-size: 3.4cqw;
}

.video-author-copy small {
  overflow: hidden;
  color: #87918e;
  font-size: 2.55cqw;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.video-author-row button {
  min-height: 8.5cqw;
  padding: 0 3.2cqw;
  border: 0.267cqw solid rgba(32, 74, 70, 0.2);
  border-radius: 4.3cqw;
  background: transparent;
  color: #204a46;
  font-size: 2.8cqw;
}

.video-detail-heading {
  margin-top: 5.3cqw;
}

.video-detail-heading h1 {
  margin: 0;
  color: #142f30;
  font-family: var(--section-title-font);
  font-size: 6.1cqw;
  font-weight: 600;
  line-height: 1.38;
}

.video-detail-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 1.6cqw;
  margin-top: 3.2cqw;
}

.video-detail-tags span {
  padding: 1.1cqw 2.1cqw;
  border-radius: 2.7cqw;
  background: #edf1ea;
  color: #536c68;
  font-size: 2.55cqw;
}

.video-detail-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 1.6cqw 3.5cqw;
  margin-top: 3.2cqw;
  color: #87918e;
  font-size: 2.6cqw;
}

.video-detail-description {
  margin: 5.3cqw 0 0;
  padding-top: 4.2cqw;
  border-top: 0.18cqw solid rgba(25, 57, 57, 0.1);
  color: #3f4e4c;
  font-size: 3.35cqw;
  line-height: 1.85;
}

.video-related {
  margin-top: 7.5cqw;
  padding-top: 4.2cqw;
  border-top: 0.18cqw solid rgba(25, 57, 57, 0.1);
}

.video-related > h2,
.video-comments > header h2 {
  margin: 0;
  color: #173b3c;
  font-family: var(--section-title-font);
  font-size: 4.45cqw;
  font-weight: 500;
}

.video-related-list {
  display: grid;
  gap: 2.1cqw;
  margin-top: 3.2cqw;
}

.video-related-card {
  display: grid;
  grid-template-columns: 10.7cqw minmax(0, 1fr) 4.3cqw;
  min-height: 14.4cqw;
  align-items: center;
  gap: 2.7cqw;
  padding: 2.1cqw 2.7cqw;
  border: 0.267cqw solid rgba(21, 61, 63, 0.1);
  border-radius: 2.4cqw;
  background: rgba(255, 255, 255, 0.78);
  text-align: left;
}

.video-related-card > span:first-child {
  display: grid;
  width: 10.7cqw;
  height: 10.7cqw;
  overflow: hidden;
  place-items: center;
  border-radius: 2.1cqw;
  background: #edf1ea;
  color: #315c57;
  font-family: var(--calligraphy);
  font-size: 4.3cqw;
}

.video-related-card > span:first-child img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-related-card > span:nth-child(2) {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 0.8cqw;
}

.video-related-card strong {
  overflow: hidden;
  color: #203a38;
  font-size: 3.25cqw;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.video-related-card small {
  color: #87918e;
  font-size: 2.55cqw;
}

.video-related-card > img {
  width: 4.3cqw;
  height: 4.3cqw;
  opacity: 0.64;
}

.video-report-row {
  display: flex;
  margin-top: 4.3cqw;
  align-items: center;
  justify-content: space-between;
  color: #87918e;
  font-size: 2.65cqw;
}

.video-report-row button {
  min-height: 8.5cqw;
  padding: 0 2.7cqw;
  border: 0;
  background: transparent;
  color: #8d433c;
  font-size: 2.8cqw;
}

.video-report-row button:disabled {
  color: #8b9491;
}

.video-comments {
  margin: 8cqw 5.4cqw 0;
  padding-top: 4.2cqw;
  border-top: 0.18cqw solid rgba(25, 57, 57, 0.1);
}

.video-comments > header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}

.video-comments > header span {
  color: #8a9491;
  font-size: 2.8cqw;
}

.video-comment-form {
  margin-top: 4cqw;
}

.video-comment-form textarea {
  display: block;
  width: 100%;
  min-height: 18.7cqw;
  resize: vertical;
  padding: 3.2cqw;
  border: 0.267cqw solid rgba(21, 61, 63, 0.14);
  border-radius: 2.4cqw;
  outline: 0;
  background: #fff;
  color: #243c3a;
  font: inherit;
  font-size: 3.4cqw;
  line-height: 1.55;
}

.video-comment-form textarea:focus {
  border-color: #2c686a;
  box-shadow: 0 0 0 0.8cqw rgba(44, 104, 106, 0.09);
}

.video-comment-form footer {
  display: flex;
  min-height: 12.8cqw;
  align-items: center;
  justify-content: space-between;
}

.video-comment-form small {
  color: #8a9491;
  font-size: 2.55cqw;
}

.video-comment-form button {
  min-width: 21.3cqw;
  min-height: 10.7cqw;
  padding: 0 4.3cqw;
  border: 0;
  border-radius: 2.4cqw;
  background: #204a46;
  color: #fff;
  font-size: 3.2cqw;
  font-weight: 600;
}

.video-comment-list {
  display: grid;
  margin-top: 0.8cqw;
}

.video-comment {
  display: grid;
  grid-template-columns: 9.6cqw minmax(0, 1fr);
  gap: 0 2.7cqw;
  padding: 4cqw 0;
  border-top: 0.267cqw solid rgba(21, 61, 63, 0.09);
}

.video-comment > span {
  grid-row: 1 / 4;
  display: grid;
  width: 9.6cqw;
  height: 9.6cqw;
  place-items: center;
  border-radius: 50%;
  background: #e7ece5;
  color: #315c57;
  font-family: var(--calligraphy);
  font-size: 3.7cqw;
}

.video-comment strong {
  color: #223b39;
  font-size: 3.25cqw;
}

.video-comment time {
  margin-top: 0.5cqw;
  color: #929a98;
  font-size: 2.45cqw;
}

.video-comment p {
  margin: 2.1cqw 0 0;
  color: #4f5f5c;
  font-size: 3.25cqw;
  line-height: 1.65;
}

.video-comment-empty {
  padding: 5.3cqw 0 1.6cqw;
  color: #8a9491;
  font-size: 3.2cqw;
  text-align: center;
}

.video-comments-disabled {
  margin: 8cqw 5.4cqw 0;
  padding: 4.3cqw;
  border-radius: 2.4cqw;
  background: rgba(231, 237, 233, 0.62);
  color: #566563;
}

.video-comments-disabled strong {
  color: #203a38;
  font-size: 3.4cqw;
}

.video-comments-disabled p {
  margin: 1.3cqw 0 0;
  font-size: 2.85cqw;
  line-height: 1.7;
}

.video-detail-actionbar {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 15;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  height: 18.1cqw;
  padding: 1.3cqw 2.7cqw 2.7cqw;
  border-top: 0.267cqw solid rgba(21, 61, 63, 0.1);
  background: rgba(253, 252, 249, 0.98);
  box-shadow: 0 -1.6cqw 4.8cqw rgba(20, 48, 45, 0.055);
  backdrop-filter: blur(12px);
}

.video-detail-actionbar[hidden] {
  display: none;
}

.video-detail-actionbar::after {
  position: absolute;
  bottom: 0.7cqw;
  left: 50%;
  width: 32cqw;
  height: 1.1cqw;
  border-radius: 2cqw;
  background: #0b0d0d;
  content: "";
  transform: translateX(-50%);
}

.video-detail-actionbar button {
  position: relative;
  display: flex;
  min-width: 0;
  padding: 0;
  align-items: center;
  justify-content: center;
  gap: 1cqw;
  border: 0;
  background: transparent;
  color: #52615e;
  font-size: 2.8cqw;
}

.video-detail-actionbar button + button::before {
  position: absolute;
  top: 2.1cqw;
  bottom: 2.1cqw;
  left: 0;
  width: 0.267cqw;
  background: rgba(21, 61, 63, 0.09);
  content: "";
}

.video-detail-actionbar img {
  width: 4.8cqw;
  height: 4.8cqw;
  object-fit: contain;
  opacity: 0.76;
}

.video-detail-actionbar em {
  min-width: 3.5cqw;
  color: #8b9491;
  font-size: 2.4cqw;
  font-style: normal;
  text-align: left;
}

.video-detail-actionbar [aria-pressed="true"] {
  color: #a8342b;
}

.video-detail-actionbar [aria-pressed="true"] img {
  filter: brightness(0) saturate(100%) invert(25%) sepia(30%) saturate(3212%) hue-rotate(334deg) brightness(89%) contrast(92%);
  opacity: 1;
}

.video-card:focus-visible,
.video-categories button:focus-visible,
.video-empty button:focus-visible,
.video-player-toggle:focus-visible,
.video-author-row button:focus-visible,
.video-related-card:focus-visible,
.video-report-row button:focus-visible,
.video-comment-form button:focus-visible,
.video-detail-actionbar button:focus-visible {
  outline: 0.533cqw solid #2c686a;
  outline-offset: -0.8cqw;
}

.phone[data-page="video"] .bottom-nav {
  display: none;
}

.phone[data-page="video"] .statusbar {
  height: 11.7cqw;
  background: rgba(250, 250, 247, 0.98);
}

.phone[data-subpage="video-detail"] .toast {
  bottom: 21.3cqw;
}

html.view-h5 .video-detail-page {
  padding-bottom: calc(16cqw + env(safe-area-inset-bottom, 0px));
}

html.view-h5 .video-detail-actionbar {
  height: calc(15.5cqw + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

html.view-h5 .video-detail-actionbar::after {
  display: none;
}

@media (hover: hover) {
  .video-card:hover {
    border-color: rgba(21, 61, 63, 0.2);
    box-shadow: 0 2.1cqw 6.4cqw rgba(23, 48, 45, 0.08);
  }

  .video-card:hover .video-card-media > img {
    transform: scale(1.025);
  }
}

@media (prefers-reduced-motion: reduce) {
  .video-card,
  .video-card-media > img,
  .video-player-progress::before {
    transition: none;
  }
}