.ltdemo {
  --d-bg: #FFFFFF;
  --d-bg-2: #F7F8FA;
  --d-surface: #F1F3F7;
  --d-line: rgba(16, 19, 23, .09);
  --d-ink: #101317;
  --d-ink-2: #545B66;
  --d-ink-3: #8A9099;
  --d-accent: #3485FF;
  --d-accent-soft: rgba(52, 133, 255, .12);
  --d-ease: cubic-bezier(.2, .7, .3, 1);
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  font-family: var(--sans);
  user-select: none;
}
.ltdemo *,
.ltdemo *::before,
.ltdemo *::after {
  animation-play-state: paused;
}
.ltdemo.is-live *,
.ltdemo.is-live *::before,
.ltdemo.is-live *::after {
  animation-play-state: running;
}
@media (prefers-reduced-motion: reduce) {
  .ltdemo *,
  .ltdemo *::before,
  .ltdemo *::after {
    animation: none !important;
    transition: none !important;
  }
}
.vx {
  background: var(--d-bg);
  border: 1px solid var(--d-line);
  height: 208px;
  display: flex;
  flex-direction: column;
}
.vx-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 12px;
  border-bottom: 1px solid var(--d-line);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--d-ink-2);
  flex: none;
}
.vx-head b {
  color: var(--d-accent);
  font-weight: 600;
}
.vx-track {
  position: relative;
  flex: 1;
  overflow: hidden;
  -webkit-mask-image:
    linear-gradient(
      to bottom,
      transparent,
      #000 12%,
      #000 88%,
      transparent);
  mask-image:
    linear-gradient(
      to bottom,
      transparent,
      #000 12%,
      #000 88%,
      transparent);
}
.vx-roll {
  animation: vx-roll 30s linear infinite;
}
.vx:hover .vx-roll {
  animation-play-state: paused;
}
@keyframes vx-roll {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-50%);
  }
}
.vx-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.vx-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  font-size: 12.5px;
  color: var(--d-ink);
  white-space: nowrap;
}
.vx-row .nm {
  font-weight: 600;
}
.vx-row .lc {
  margin-left: auto;
  color: var(--d-ink-3);
  font-size: 11.5px;
}
.vx-row .tag {
  font-size: 9.5px;
  letter-spacing: .05em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 2px 5px;
  border-radius: 4px;
  background: var(--d-surface);
  color: var(--d-ink-3);
}
.vx-row .tag.is-prem {
  background: var(--d-accent-soft);
  color: var(--d-accent);
}
.vx-row .tag.is-on {
  background: rgba(216, 130, 30, .13);
  color: #B8761A;
}
.vx-row.is-on {
  background: var(--d-accent-soft);
}
.vx-row.is-on::after {
  content: "";
  width: 11px;
  height: 6px;
  border-left: 1.8px solid var(--d-accent);
  border-bottom: 1.8px solid var(--d-accent);
  transform: rotate(-45deg) translate(1px, -2px);
  flex: none;
}
.im {
  background: var(--d-bg-2);
  border: 1px solid var(--d-line);
  height: 208px;
  padding: 10px;
}
.im-win {
  height: 100%;
  background: var(--d-bg);
  border-radius: 8px;
  border: 1px solid var(--d-line);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.im-bar {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 8px;
  border-bottom: 1px solid var(--d-line);
  flex: none;
  animation: im-vanish 7s var(--d-ease) infinite;
}
.im-bar i {
  height: 6px;
  border-radius: 3px;
  background: var(--d-surface);
  flex: none;
}
.im-bar i:nth-child(1) {
  width: 26px;
}
.im-bar i:nth-child(2) {
  width: 18px;
}
.im-bar i:nth-child(3) {
  width: 34px;
}
.im-bar i:nth-child(4) {
  width: 14px;
  margin-left: auto;
}
.im-body {
  flex: 1;
  display: flex;
  gap: 8px;
  padding: 10px 8px;
  min-height: 0;
}
.im-rail {
  width: 46px;
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
  animation: im-vanish 7s var(--d-ease) infinite;
}
.im-rail i {
  height: 9px;
  border-radius: 3px;
  background: var(--d-surface);
}
.im-rail i:nth-child(2) {
  width: 70%;
}
.im-rail i:nth-child(4) {
  width: 55%;
}
.im-rail.is-right {
  animation-delay: .1s;
}
.im-col {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  animation: im-widen 7s var(--d-ease) infinite;
}
.im-col i {
  height: 7px;
  border-radius: 3px;
  background: #D7DBE2;
}
.im-col i.h {
  height: 11px;
  width: 62%;
  background: #AEB5C0;
  margin-bottom: 2px;
}
.im-col i:nth-child(4) {
  width: 88%;
}
.im-col i:nth-child(7) {
  width: 74%;
}
.im-col i.lit {
  background: var(--d-accent);
  opacity: .28;
  animation: im-lit 7s var(--d-ease) infinite;
}
.im-banner {
  flex: none;
  margin: 0 8px 8px;
  height: 22px;
  border-radius: 5px;
  background: var(--d-surface);
  display: flex;
  align-items: center;
  padding: 0 7px;
  gap: 5px;
  animation: im-vanish 7s var(--d-ease) infinite;
  animation-delay: .05s;
}
.im-banner i {
  height: 5px;
  border-radius: 3px;
  background: #CDD3DC;
}
.im-banner i:first-child {
  width: 54%;
}
.im-banner i:last-child {
  width: 20px;
  background: var(--d-accent);
  opacity: .45;
  margin-left: auto;
}
@keyframes im-vanish {
  0%, 22% {
    opacity: 1;
    transform: none;
  }
  38%, 78% {
    opacity: 0;
    transform: translateY(-4px);
  }
  94%, 100% {
    opacity: 1;
    transform: none;
  }
}
@keyframes im-widen {
  0%, 22% {
    padding-inline: 0;
  }
  38%, 78% {
    padding-inline: 34px;
  }
  94%, 100% {
    padding-inline: 0;
  }
}
@keyframes im-lit {
  0%, 30% {
    opacity: 0;
  }
  46%, 70% {
    opacity: .3;
  }
  84%, 100% {
    opacity: 0;
  }
}
.hx {
  background: var(--d-bg);
  border: 1px solid var(--d-line);
  padding: 18px 20px 16px;
  height: 208px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
}
.hx-para {
  background: rgba(52, 133, 255, .07);
  border-radius: 8px;
  padding: 12px 13px;
  font-size: 14.5px;
  line-height: 1.75;
  color: #2B3038;
}
.hx-sent {
  background: rgba(52, 133, 255, .16);
  border-radius: 4px;
  padding: 1px 2px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.hx-w {
  border-radius: 3px;
  padding: 1px 1px;
  animation: hx-word 9s steps(1, end) infinite;
  animation-delay: calc(var(--i) * .36s);
}
@keyframes hx-word {
  0%, 3.6% {
    background: var(--d-accent);
    color: #fff;
  }
  3.61%, 100% {
    background: transparent;
    color: inherit;
  }
}
.hx-key {
  display: flex;
  gap: 14px;
  font-size: 11px;
  color: var(--d-ink-3);
}
.hx-key span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.hx-key i {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  flex: none;
}
.pdfx {
  position: relative;
  aspect-ratio: 1280 / 800;
  background: #FFFFFF;
  border: 1px solid var(--d-line);
  border-radius: 14px;
}
.pdfx-doc {
  position: absolute;
  inset: 0;
  padding: 16px 26px 0;
  overflow: hidden;
  animation: pdfx-drift 18s var(--d-ease) infinite;
}
@keyframes pdfx-drift {
  0%, 12% {
    transform: translateY(0);
  }
  50%, 62% {
    transform: translateY(-26px);
  }
  96%, 100% {
    transform: translateY(0);
  }
}
.pdfx-meta {
  display: flex;
  align-items: center;
  gap: 7px;
  padding-bottom: 10px;
  font-size: 9.5px;
  color: #9AA1AB;
}
.pdfx-meta img {
  width: 11px;
  height: auto;
  display: block;
  flex: none;
}
.pdfx-meta .nm {
  color: #4A515C;
  font-weight: 650;
}
.pdfx-meta .pg {
  margin-left: auto;
}
.pdfx-spread {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 30px;
  position: relative;
}
.pdfx-spread::before {
  content: "";
  position: absolute;
  top: -4px;
  bottom: -40px;
  left: 50%;
  border-left: 1px solid #ECEEF2;
}
.pdfx-h {
  font-size: 11.5px;
  font-weight: 700;
  color: #14171C;
  margin: 0 0 7px;
  padding-bottom: 7px;
  border-bottom: 1px solid #ECEEF2;
  letter-spacing: -.01em;
}
.pdfx-h.lead {
  font-size: 15px;
  border: 0;
  padding: 0;
  margin-bottom: 9px;
}
.pdfx-p {
  font-size: 8.6px;
  line-height: 2;
  color: #363C45;
  margin: 0 0 10px;
}
.pdfx-sent {
  background: rgba(52, 133, 255, .13);
  border-radius: 3px;
  padding: 1.5px 2px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.pdfx-w {
  border-radius: 2px;
  animation: pdfx-word 11s steps(1, end) infinite;
  animation-delay: calc(var(--i) * .4s);
}
@keyframes pdfx-word {
  0%, 3.6% {
    background: var(--d-accent);
    color: #fff;
  }
  3.61%, 100% {
    background: transparent;
    color: inherit;
  }
}
.pdfx-fig {
  border: 1px solid #ECEEF2;
  background: #FAFBFD;
  border-radius: 4px;
  padding: 8px 9px 7px;
  margin: 0 0 6px;
}
.pdfx-fig .bars {
  display: flex;
  align-items: flex-end;
  gap: 5px;
  height: 46px;
}
.pdfx-fig .bars i {
  flex: 1;
  border-radius: 2px 2px 0 0;
  background:
    linear-gradient(
      180deg,
      #8DB8FF,
      #3485FF);
}
.pdfx-fig .bars i:nth-child(1) {
  height: 44%;
}
.pdfx-fig .bars i:nth-child(2) {
  height: 70%;
}
.pdfx-fig .bars i:nth-child(3) {
  height: 52%;
}
.pdfx-fig .bars i:nth-child(4) {
  height: 91%;
}
.pdfx-fig .bars i:nth-child(5) {
  height: 34%;
}
.pdfx-fig .bars i:nth-child(6) {
  height: 63%;
}
.pdfx-fig figcaption {
  margin-top: 6px;
  font-size: 7.4px;
  color: #9AA1AB;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.pdfx-tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: 7.6px;
  margin-bottom: 10px;
}
.pdfx-tbl td,
.pdfx-tbl th {
  border: 1px solid #ECEEF2;
  padding: 3.5px 5px;
  text-align: left;
  color: #4A515C;
}
.pdfx-tbl th {
  background: #F5F7FA;
  color: #20242A;
  font-weight: 700;
}
.pdfx-fade {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 27%;
  pointer-events: none;
  border-radius: 0 0 13px 13px;
  background:
    linear-gradient(
      to top,
      #FFFFFF 22%,
      rgba(255, 255, 255, .72) 62%,
      transparent 100%);
}
.pdfx-pill {
  position: absolute;
  left: 50%;
  bottom: 7%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 5px 7px;
  background: rgba(255, 255, 255, .94);
  border: 1px solid rgba(16, 19, 23, .09);
  border-radius: 999px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 14px 34px -12px rgba(16, 19, 23, .3);
  white-space: nowrap;
}
.pdfx-pill .grp {
  display: flex;
  align-items: center;
  gap: 3px;
}
.pdfx-pill .sep {
  width: 1px;
  align-self: stretch;
  margin: 3px 5px;
  background: rgba(16, 19, 23, .1);
}
.pdfx-pill .k {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: grid;
  place-items: center;
}
.pdfx-pill .k svg {
  width: 10px;
  height: 10px;
  fill: #5A616B;
}
.pdfx-pill .k.is-line svg {
  width: 11px;
  height: 11px;
  fill: none;
  stroke: #5A616B;
  stroke-width: 2;
  stroke-linecap: round;
}
.pdfx-pill .k.is-play {
  width: 26px;
  height: 26px;
  background: var(--d-accent);
  box-shadow: 0 4px 10px -2px rgba(52, 133, 255, .6);
}
.pdfx-pill .k.is-play svg {
  width: 10px;
  height: 10px;
  fill: #fff;
}
.pdfx-pill .txt {
  font-size: 9px;
  color: #4A515C;
  font-weight: 600;
  padding: 0 3px;
}
.pdfx-pill .txt.is-link {
  color: var(--d-accent);
}
.pdfx-pill .chev {
  font-size: 9px;
  color: #9AA1AB;
  padding: 0 2px;
}
@media (max-width: 900px) {
  .pdfx-doc {
    padding-inline: 16px;
  }
  .pdfx-spread {
    gap: 0 18px;
  }
  .pdfx-pill .txt {
    font-size: 8px;
  }
}
.libx {
  background: var(--d-bg);
  border: 1px solid var(--d-line);
  border-radius: 12px;
  aspect-ratio: 1280 / 800;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.libx-top {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 13px;
  border-bottom: 1px solid var(--d-line);
  flex: none;
}
.libx-top h4 {
  margin: 0;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--d-ink);
}
.libx-top .n {
  font-size: 11px;
  color: var(--d-ink-3);
}
.libx-views {
  margin-left: auto;
  display: flex;
  gap: 3px;
}
.libx-views i {
  width: 20px;
  height: 20px;
  border-radius: 5px;
  background: var(--d-surface);
  display: grid;
  place-items: center;
  position: relative;
}
.libx-views i::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 1.5px;
  border: 1.4px solid var(--d-ink-3);
}
.libx[data-view=comfortable] .libx-views i:nth-child(1),
.libx[data-view=compact] .libx-views i:nth-child(2),
.libx[data-view=tiles] .libx-views i:nth-child(3) {
  background: var(--d-accent-soft);
}
.libx[data-view=comfortable] .libx-views i:nth-child(1)::before,
.libx[data-view=compact] .libx-views i:nth-child(2)::before,
.libx[data-view=tiles] .libx-views i:nth-child(3)::before {
  border-color: var(--d-accent);
}
.libx-tags {
  display: flex;
  gap: 5px;
  padding: 9px 13px;
  flex: none;
  flex-wrap: wrap;
}
.libx-tags span {
  font-size: 10px;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--d-surface);
  color: var(--d-ink-2);
  white-space: nowrap;
}
.libx-tags span.is-on {
  background: var(--d-accent-soft);
  color: var(--d-accent);
  font-weight: 600;
}
.libx-scroll {
  flex: 1;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
  padding: 0 13px 13px;
  -webkit-mask-image:
    linear-gradient(
      to bottom,
      #000 82%,
      transparent);
  mask-image:
    linear-gradient(
      to bottom,
      #000 82%,
      transparent);
}
.libx-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 7px;
  transition: gap .45s var(--d-ease);
}
.libx-item {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--d-bg);
  border: 1px solid var(--d-line);
  border-radius: 9px;
  padding: 9px 10px;
  min-width: 0;
  transition: padding .45s var(--d-ease), border-radius .45s var(--d-ease);
}
.libx-badge {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  flex: none;
  display: grid;
  place-items: center;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .02em;
  transition: width .45s var(--d-ease), height .45s var(--d-ease);
}
.libx-badge[data-t=pdf] {
  background: rgba(216, 78, 62, .13);
  color: #D84E3E;
}
.libx-badge img {
  width: 70%;
  height: auto;
  display: block;
}
.libx-badge[data-t=epub] {
  background: rgba(140, 82, 200, .14);
  color: #7B4BC4;
}
.libx-badge[data-t=md] {
  background: rgba(47, 158, 94, .13);
  color: #2F9E5E;
}
.libx-badge[data-t=txt] {
  background: var(--d-accent-soft);
  color: var(--d-accent);
}
.libx-badge[data-t=web] {
  background: rgba(216, 130, 30, .13);
  color: #B8761A;
}
.libx-txt {
  min-width: 0;
  flex: 1;
}
.libx-nm {
  display: block;
  font-size: 11.5px;
  font-weight: 650;
  color: var(--d-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.libx-mt {
  display: block;
  font-size: 10px;
  color: var(--d-ink-3);
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.libx-pr {
  width: 34px;
  height: 3px;
  border-radius: 2px;
  background: var(--d-surface);
  overflow: hidden;
  flex: none;
}
.libx-pr b {
  display: block;
  height: 100%;
  background: var(--d-accent);
  border-radius: 2px;
}
.libx[data-view=comfortable] .libx-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.libx[data-view=compact] .libx-list {
  grid-template-columns: 1fr;
  gap: 0;
}
.libx[data-view=compact] .libx-item {
  padding: 6px 9px;
  border-radius: 0;
  border-inline: 0;
  border-top: 0;
}
.libx[data-view=compact] .libx-item:first-child {
  border-top: 1px solid var(--d-line);
}
.libx[data-view=compact] .libx-badge {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  font-size: 7px;
}
.libx[data-view=compact] .libx-mt {
  display: none;
}
.libx[data-view=compact] .libx-pr {
  display: none;
}
.libx[data-view=tiles] .libx-list {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}
.libx[data-view=tiles] .libx-item {
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 12px 8px 10px;
  gap: 7px;
}
.libx[data-view=tiles] .libx-badge {
  width: 32px;
  height: 32px;
  border-radius: 9px;
}
.libx[data-view=tiles] .libx-txt {
  width: 100%;
  flex: none;
}
.libx[data-view=tiles] .libx-nm {
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-size: 10.5px;
  line-height: 1.35;
}
.libx[data-view=tiles] .libx-mt {
  display: none;
}
.libx[data-view=tiles] .libx-pr {
  width: 100%;
}
@media (max-width: 900px) {
  .libx[data-view=tiles] .libx-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .libx[data-view=comfortable] .libx-list {
    grid-template-columns: minmax(0, 1fr);
  }
  .vx,
  .im,
  .hx {
    height: 188px;
  }
}
.fx {
  background: var(--d-bg-2);
  border: 1px solid var(--d-line);
  height: 208px;
  display: grid;
  place-items: center;
}
.fx-stack {
  position: relative;
  width: 132px;
  height: 148px;
}
.fx-card {
  position: absolute;
  inset: 0;
  background: var(--d-bg);
  border: 1px solid var(--d-line);
  border-radius: 10px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: 0 10px 26px -14px rgba(16, 19, 23, .5);
  animation: fx-fan 15s var(--d-ease) infinite;
}
.fx-card:nth-child(1) {
  animation-delay: 0s;
}
.fx-card:nth-child(2) {
  animation-delay: -3s;
}
.fx-card:nth-child(3) {
  animation-delay: -6s;
}
.fx-card:nth-child(4) {
  animation-delay: -9s;
}
.fx-card:nth-child(5) {
  animation-delay: -12s;
}
@keyframes fx-fan {
  0% {
    transform: translate(0, 0) scale(1);
    opacity: 1;
    z-index: 5;
  }
  14% {
    transform: translate(0, 0) scale(1);
    opacity: 1;
    z-index: 5;
  }
  20% {
    transform: translate(52px, -6px) scale(.94);
    opacity: 0;
    z-index: 5;
  }
  21% {
    transform: translate(-16px, 22px) scale(.86);
    opacity: 0;
    z-index: 1;
  }
  27% {
    transform: translate(-12px, 17px) scale(.88);
    opacity: 1;
    z-index: 1;
  }
  47% {
    transform: translate(-9px, 12px) scale(.91);
    opacity: 1;
    z-index: 2;
  }
  67% {
    transform: translate(-6px, 8px) scale(.94);
    opacity: 1;
    z-index: 3;
  }
  87% {
    transform: translate(-3px, 4px) scale(.97);
    opacity: 1;
    z-index: 4;
  }
  100% {
    transform: translate(0, 0) scale(1);
    opacity: 1;
    z-index: 5;
  }
}
.fx-tag {
  align-self: flex-start;
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: .04em;
  padding: 3px 7px;
  border-radius: 5px;
}
.fx-tag[data-t=pdf] {
  background: rgba(216, 78, 62, .13);
  color: #D84E3E;
}
.fx-tag[data-t=epub] {
  background: rgba(140, 82, 200, .14);
  color: #7B4BC4;
}
.fx-tag[data-t=md] {
  background: rgba(47, 158, 94, .13);
  color: #2F9E5E;
}
.fx-tag[data-t=txt] {
  background: var(--d-accent-soft);
  color: var(--d-accent);
}
.fx-tag[data-t=web] {
  background: rgba(216, 130, 30, .13);
  color: #B8761A;
}
.fx-lines {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: 2px;
}
.fx-lines i {
  height: 5px;
  border-radius: 3px;
  background: #E4E8EF;
}
.fx-lines i:nth-child(2) {
  width: 82%;
}
.fx-lines i:nth-child(4) {
  width: 64%;
}
.fx-lines i.lit {
  background: rgba(52, 133, 255, .4);
}
.fx-name {
  margin-top: auto;
  font-size: 9.5px;
  color: var(--d-ink-3);
}
.rx {
  background: var(--d-bg-2);
  border: 1px solid var(--d-line);
  height: 208px;
  display: grid;
  place-items: center;
  padding: 14px;
}
.rx-card {
  width: 100%;
  max-width: 250px;
  background: var(--d-bg);
  border: 1px solid var(--d-line);
  border-radius: 11px;
  padding: 13px 14px 14px;
}
.rx-top {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.rx-badge {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  font-size: 7.5px;
  font-weight: 800;
  background: rgba(140, 82, 200, .14);
  color: #7B4BC4;
  flex: none;
}
.rx-nm {
  display: block;
  font-size: 11.5px;
  font-weight: 650;
  color: var(--d-ink);
}
.rx-sub {
  display: block;
  font-size: 9.5px;
  color: var(--d-ink-3);
  margin-top: 1px;
}
.rx-track {
  height: 4px;
  border-radius: 2px;
  background: var(--d-surface);
  overflow: hidden;
  margin-bottom: 9px;
}
.rx-track b {
  display: block;
  height: 100%;
  border-radius: 2px;
  background: var(--d-accent);
  width: 34%;
  animation: rx-fill 9s var(--d-ease) infinite;
}
@keyframes rx-fill {
  0%, 8% {
    width: 34%;
  }
  46%, 62% {
    width: 61%;
  }
  96%, 100% {
    width: 34%;
  }
}
.rx-foot {
  display: flex;
  align-items: center;
  gap: 7px;
}
.rx-chip {
  font-size: 9.5px;
  font-weight: 650;
  padding: 4px 9px;
  border-radius: 999px;
  background: var(--d-accent-soft);
  color: var(--d-accent);
}
.rx-at {
  font-size: 9.5px;
  color: var(--d-ink-3);
}
.rx-at b {
  color: var(--d-ink-2);
  font-weight: 650;
}
.rx-at .n::after {
  content: "47";
  animation: rx-n 9s steps(1, end) infinite;
}
@keyframes rx-n {
  0%, 24% {
    content: "47";
  }
  25%, 49% {
    content: "63";
  }
  50%, 74% {
    content: "88";
  }
  75%, 100% {
    content: "112";
  }
}
.frame:has(> .px),
.shot-inline:has(> .px) {
  container-type: inline-size;
}
.px {
  aspect-ratio: 16 / 11;
  background: var(--d-bg-2);
  border: 1px solid var(--d-line);
  border-radius: 14px;
}
.px-page {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--d-bg);
  animation: px-drift 12s var(--d-ease) infinite;
}
@keyframes px-drift {
  0%, 10% {
    transform: translateY(0);
  }
  58%, 68% {
    transform: translateY(-3.2cqw);
  }
  96%, 100% {
    transform: translateY(0);
  }
}
.px-nav {
  display: flex;
  align-items: center;
  gap: 2.4cqw;
  padding: 2.6cqw 4.2cqw;
  border-bottom: 1px solid var(--d-line);
}
.px-nav i {
  height: 1.3cqw;
  width: 6cqw;
  border-radius: 99px;
  background: #DDE1E8;
  flex: none;
}
.px-nav i.lg {
  width: 3.8cqw;
  height: 3.8cqw;
  border-radius: 28%;
  background: #C9CFD9;
  margin-right: 1cqw;
}
.px-nav i.cta {
  margin-left: auto;
  width: 10cqw;
  height: 4cqw;
  border-radius: 99px;
  background: var(--d-accent-soft);
}
.px-art {
  padding: 4.6cqw 7cqw 0;
  max-width: 58cqw;
}
.px-kick {
  margin: 0 0 1.6cqw;
  font-size: clamp(8px, 1.85cqw, 12px);
  font-weight: 650;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--d-ink-3);
}
.px-h {
  margin: 0 0 3cqw;
  font-size: clamp(14px, 3.7cqw, 26px);
  font-weight: 750;
  line-height: 1.12;
  letter-spacing: -.022em;
  color: var(--d-ink);
}
.px-p {
  margin: 0 0 2.6cqw;
  font-size: clamp(9px, 2.05cqw, 14.5px);
  line-height: 1.72;
  color: #2B3038;
  border-radius: .9cqw;
}
.px-p.is-para {
  background: rgba(52, 133, 255, .07);
  box-shadow: 0 0 0 1.4cqw rgba(52, 133, 255, .07);
}
.px-sent {
  background: rgba(52, 133, 255, .17);
  border-radius: 3px;
  padding: 1px 2px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.px-w {
  border-radius: 2px;
  animation: px-word 12s steps(1, end) infinite;
  animation-delay: calc(var(--i) * .38s);
}
@keyframes px-word {
  0%, 3.1% {
    background: var(--d-accent);
    color: #fff;
  }
  3.11%, 100% {
    background: transparent;
    color: inherit;
  }
}
.px-panel {
  position: absolute;
  right: 3.2cqw;
  bottom: 3.6cqw;
  width: 40cqw;
  min-width: 150px;
  padding: 0 0 2cqw;
  background: rgba(255, 255, 255, .94);
  border: 1px solid rgba(16, 19, 23, .1);
  border-radius: 2.6cqw;
  box-shadow: 0 30px 60px -24px rgba(16, 19, 23, .45), 0 4px 14px -6px rgba(16, 19, 23, .18);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  color: var(--d-ink);
  animation: px-arrive 12s var(--d-ease) infinite;
  transform-origin: calc(100% - 5cqw) calc(100% - 5cqw);
}
@keyframes px-arrive {
  0% {
    opacity: 0;
    transform: translateY(6px) scale(.96);
  }
  4%, 100% {
    opacity: 1;
    transform: none;
  }
}
.px-head {
  display: flex;
  align-items: center;
  gap: 1cqw;
  padding: 2cqw 2.4cqw 0;
}
.px-mark {
  width: 5cqw;
  height: 5cqw;
  min-width: 22px;
  min-height: 22px;
  display: block;
  margin-right: auto;
}
.px-mark img {
  display: block;
  width: 100%;
  height: 100%;
}
.px-ghost {
  width: 3.8cqw;
  height: 3.8cqw;
  min-width: 16px;
  min-height: 16px;
  border-radius: 25%;
  display: grid;
  place-items: center;
}
.px-ghost svg {
  width: 62%;
  height: 62%;
  fill: none;
  stroke: var(--d-ink-2);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.px-status {
  display: flex;
  align-items: center;
  gap: 1.4cqw;
  margin: 2.2cqw 2.4cqw 0;
  font-size: clamp(8.5px, 1.75cqw, 12.5px);
  font-weight: 500;
  color: var(--d-ink-2);
}
.px-dot {
  width: 1.3cqw;
  height: 1.3cqw;
  min-width: 6px;
  min-height: 6px;
  border-radius: 50%;
  background: #22C55E;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, .22);
  animation: px-pulse 1.6s ease-in-out infinite;
}
@keyframes px-pulse {
  0%, 100% {
    box-shadow: 0 0 0 2px rgba(34, 197, 94, .18);
  }
  50% {
    box-shadow: 0 0 0 4px rgba(34, 197, 94, .3);
  }
}
.px-status-txt::after {
  content: " \2014  31% through";
  animation: px-pct 12s steps(1, end) infinite;
}
@keyframes px-pct {
  0%, 24% {
    content: " \2014  31% through";
  }
  25%, 49% {
    content: " \2014  33% through";
  }
  50%, 74% {
    content: " \2014  36% through";
  }
  75%, 100% {
    content: " \2014  38% through";
  }
}
@container (max-width: 480px) {
  .px {
    aspect-ratio: 4 / 5;
  }
  .px-page {
    animation: none;
  }
  .px-nav {
    padding: 3.4cqw 5cqw;
  }
  .px-art {
    max-width: none;
    padding: 6cqw 6cqw 0;
  }
  .px-kick {
    font-size: 9.5px;
    margin-bottom: 8px;
  }
  .px-h {
    font-size: 20px;
    margin-bottom: 14px;
  }
  .px-p {
    font-size: 12px;
    line-height: 1.7;
  }
  .px-art p:nth-of-type(2),
  .px-art p:nth-of-type(5) {
    display: none;
  }
  .px-p.is-para {
    box-shadow: 0 0 0 6px rgba(52, 133, 255, .07);
  }
  .px-panel {
    width: 64cqw;
    right: 4cqw;
    bottom: 4cqw;
    border-radius: 12px;
    padding-bottom: 9px;
  }
  .px-head {
    padding: 9px 10px 0;
    gap: 4px;
  }
  .px-status {
    margin: 9px 10px 0;
    gap: 6px;
  }
  .px-prog {
    margin: 8px 10px 0;
  }
  .px-transport {
    margin: 9px 10px 0;
    gap: 6px;
  }
  .px-k,
  .px-play {
    min-height: 34px;
    border-radius: 8px;
  }
  .px-quick {
    margin: 7px 10px 0;
    gap: 6px;
  }
  .px-voice,
  .px-speed {
    min-height: 26px;
    padding: 0 9px;
    border-radius: 7px;
  }
}
.px-prog {
  margin: 1.8cqw 2.4cqw 0;
  height: .9cqw;
  min-height: 3px;
  border-radius: 99px;
  background: #E9ECF1;
  overflow: hidden;
}
.px-prog b {
  display: block;
  height: 100%;
  width: 31%;
  border-radius: 99px;
  background: var(--d-accent);
  animation: px-fill 12s linear infinite;
}
@keyframes px-fill {
  from {
    width: 31%;
  }
  to {
    width: 39%;
  }
}
.px-transport {
  display: grid;
  grid-template-columns: 1fr 1.9fr 1fr;
  gap: 1.4cqw;
  margin: 2.2cqw 2.4cqw 0;
}
.px-k {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .5cqw;
  min-height: 7.6cqw;
  border-radius: 1.8cqw;
  background: #F1F3F7;
  color: var(--d-ink-2);
  font-size: clamp(7px, 1.35cqw, 10px);
  font-weight: 500;
}
.px-k svg {
  width: 3.2cqw;
  height: 3.2cqw;
  min-width: 12px;
  min-height: 12px;
  fill: currentColor;
}
.px-play {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.2cqw;
  min-height: 7.6cqw;
  border-radius: 1.8cqw;
  background: var(--d-accent);
  color: #fff;
  font-size: clamp(9px, 1.9cqw, 13.5px);
  font-weight: 600;
  box-shadow: 0 6px 14px -4px rgba(52, 133, 255, .55);
}
.px-play svg {
  width: 3.2cqw;
  height: 3.2cqw;
  min-width: 12px;
  min-height: 12px;
  fill: currentColor;
}
.px-quick {
  display: flex;
  gap: 1.4cqw;
  margin: 1.6cqw 2.4cqw 0;
}
.px-voice,
.px-speed {
  display: flex;
  align-items: center;
  gap: 1.2cqw;
  min-height: 6cqw;
  padding: 0 2cqw;
  border-radius: 1.6cqw;
  background: #F1F3F7;
  font-size: clamp(8px, 1.65cqw, 12px);
  color: var(--d-ink-2);
  white-space: nowrap;
}
.px-voice {
  flex: 1;
  min-width: 0;
}
.px-voice b {
  color: var(--d-ink);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
}
.px-voice i {
  margin-left: auto;
  width: 1.4cqw;
  height: 1.4cqw;
  min-width: 5px;
  min-height: 5px;
  border-right: 1.5px solid var(--d-ink-3);
  border-bottom: 1.5px solid var(--d-ink-3);
  transform: rotate(45deg) translateY(-30%);
}
.px-speed {
  font-weight: 600;
  color: var(--d-ink);
}
.page-shot.page-demo {
  max-width: 900px;
  margin-inline: auto;
}
.page-demo .frame {
  container-type: inline-size;
}
.page-demo .frame:not(.is-art) .ltdemo {
  border: 0;
  border-radius: 0;
}
.page-demo .pdfx-doc {
  padding: 2.2cqw 3.4cqw 0;
}
.page-demo .pdfx-meta {
  font-size: clamp(9.5px, 1.35cqw, 12px);
  padding-bottom: 1.4cqw;
}
.page-demo .pdfx-meta img {
  width: clamp(11px, 1.5cqw, 14px);
}
.page-demo .pdfx-spread {
  gap: 0 4cqw;
}
.page-demo .pdfx-h {
  font-size: clamp(11.5px, 1.75cqw, 16px);
}
.page-demo .pdfx-h.lead {
  font-size: clamp(15px, 2.5cqw, 23px);
}
.page-demo .pdfx-p {
  font-size: clamp(8.6px, 1.45cqw, 13px);
  margin-bottom: 1.4cqw;
}
.page-demo .pdfx-tbl {
  font-size: clamp(7.6px, 1.25cqw, 11.5px);
  margin-bottom: 1.4cqw;
}
.page-demo .pdfx-tbl td,
.page-demo .pdfx-tbl th {
  padding: .5cqw .7cqw;
}
.page-demo .pdfx-fig .bars {
  height: clamp(46px, 7.5cqw, 70px);
}
.page-demo .pdfx-fig {
  padding: 1.1cqw 1.2cqw 1cqw;
}
.page-demo .pdfx-fig figcaption {
  font-size: clamp(7.4px, 1cqw, 9.5px);
}
.page-demo .pdfx-pill {
  padding: .7cqw .9cqw;
  gap: .5cqw;
}
.page-demo .pdfx-pill .k {
  width: clamp(20px, 2.8cqw, 26px);
  height: clamp(20px, 2.8cqw, 26px);
}
.page-demo .pdfx-pill .k.is-play {
  width: clamp(26px, 3.6cqw, 34px);
  height: clamp(26px, 3.6cqw, 34px);
}
.page-demo .pdfx-pill .k svg {
  width: clamp(10px, 1.4cqw, 13px);
  height: clamp(10px, 1.4cqw, 13px);
}
.page-demo .pdfx-pill .txt,
.page-demo .pdfx-pill .chev {
  font-size: clamp(9px, 1.25cqw, 11.5px);
}
@container (max-width: 600px) {
  .page-demo .pdfx {
    aspect-ratio: 5 / 6;
  }
  .page-demo .pdfx-doc {
    padding: 4cqw 5cqw 0;
  }
  .page-demo .pdfx-spread {
    grid-template-columns: 1fr;
  }
  .page-demo .pdfx-spread::before,
  .page-demo .pdfx-spread > div:last-child {
    display: none;
  }
  .page-demo .pdfx-meta {
    font-size: 10.5px;
  }
  .page-demo .pdfx-h.lead {
    font-size: 17px;
  }
  .page-demo .pdfx-p {
    font-size: 11px;
    line-height: 1.8;
    margin-bottom: 8px;
  }
  .page-demo .pdfx-fig figcaption {
    font-size: 8.5px;
  }
}
.page-demo .hx {
  height: auto;
  padding: clamp(18px, 4cqw, 40px) clamp(20px, 5cqw, 48px);
  gap: clamp(12px, 2cqw, 18px);
}
.page-demo .hx {
  align-items: center;
}
.page-demo .hx-col {
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 1.2cqw, 12px);
  max-width: 62ch;
}
.page-demo .hx-prev {
  margin: 0;
  padding: 0 2cqw;
  font-size: clamp(14.5px, 2.35cqw, 21px);
  line-height: 1.75;
  color: #2B3038;
}
.page-demo .hx-para {
  font-size: clamp(14.5px, 2.35cqw, 21px);
  padding: 1.6cqw 2cqw;
  border-radius: 1cqw;
}
.page-demo .hx-key {
  font-size: clamp(11px, 1.4cqw, 13px);
  gap: clamp(14px, 2cqw, 20px);
}
.page-demo .hx-key i {
  width: clamp(10px, 1.3cqw, 12px);
  height: clamp(10px, 1.3cqw, 12px);
}
.page-demo .libx {
  aspect-ratio: 5 / 3;
}
.page-demo .libx-top {
  padding: 1.4cqw 1.8cqw;
  gap: 1cqw;
}
.page-demo .libx-top h4 {
  font-size: clamp(12.5px, 1.7cqw, 16px);
}
.page-demo .libx-top .n {
  font-size: clamp(11px, 1.35cqw, 13px);
}
.page-demo .libx-views i {
  width: clamp(20px, 2.6cqw, 26px);
  height: clamp(20px, 2.6cqw, 26px);
}
.page-demo .libx-tags {
  padding: 1.2cqw 1.8cqw;
  gap: .7cqw;
}
.page-demo .libx-tags span {
  font-size: clamp(10px, 1.3cqw, 12.5px);
  padding: .4cqw 1.1cqw;
}
.page-demo .libx-scroll {
  padding: 0 1.8cqw 1.8cqw;
}
.page-demo .libx-list {
  gap: 1cqw;
}
.page-demo .libx-item {
  padding: 1.2cqw 1.4cqw;
  gap: 1.4cqw;
  border-radius: 1.2cqw;
}
.page-demo .libx-badge {
  width: clamp(28px, 3.8cqw, 38px);
  height: clamp(28px, 3.8cqw, 38px);
  font-size: clamp(8px, 1.05cqw, 10px);
  border-radius: 1.1cqw;
}
.page-demo .libx-nm {
  font-size: clamp(11.5px, 1.55cqw, 15px);
}
.page-demo .libx-mt {
  font-size: clamp(10px, 1.3cqw, 12.5px);
}
.page-demo .libx-pr {
  width: clamp(34px, 5cqw, 52px);
  height: clamp(3px, .45cqw, 4px);
}
.page-demo .libx[data-view=compact] .libx-badge {
  width: clamp(22px, 3cqw, 30px);
  height: clamp(22px, 3cqw, 30px);
}
@container (max-width: 600px) {
  .page-demo .libx {
    aspect-ratio: 4 / 5;
  }
  .page-demo .libx[data-view=comfortable] .libx-list {
    grid-template-columns: minmax(0, 1fr);
  }
  .page-demo .libx[data-view=tiles] .libx-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}