*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family: 'Noto Sans SC', sans-serif;
  user-select: none;
  -webkit-user-select: none;
}
body{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: env(safe-area-inset-top) 8px 8px;
  overflow:hidden;
}
.text-wrap{
  width:100%;
  max-width:700px;
  max-height: 96vh;
  overflow: visible;
}
.text-card{
  width:100%;
  height: auto;
  padding:22px 24px;
  border-radius:14px;
  box-shadow:0 3px 16px rgba(0,0,0,0.05);
  transition:all 0.22s ease;
  position: relative;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height: 120px;
}
.slide-up-out{
  transform:translateY(-24px);
  opacity:0;
}
.slide-down-out{
  transform:translateY(24px);
  opacity:0;
}
.content-text{
  font-size:14px;
  line-height:1.5;
  white-space:pre-wrap;
  word-break:break-all;
  -webkit-font-smoothing: antialiased;
  letter-spacing:0.3px;
  width:100%;
  display:none;
}
.loader-wrap{
  display:flex;
  align-items:center;
  justify-content:center;
}
.dot-loader{
  display:flex;
  gap:8px;
}
.dot-loader span{
  width:10px;
  height:10px;
  border-radius:50%;
  animation: bounce 1.2s infinite ease-in-out;
}
.dot-loader span:nth-child(2){
  animation-delay:0.2s;
}
.dot-loader span:nth-child(3){
  animation-delay:0.4s;
}
@keyframes bounce{
  0%,100%{
    transform: translateY(0);
  }
  50%{
    transform: translateY(-12px);
  }
}
.longpress-bar-wrap {
  position: absolute;
  bottom: -6px;
  left: 10%;
  width: 80%;
  height: 4px;
  border-radius: 2px;
  overflow: hidden;
  display: none;
  pointer-events: none;
}
.longpress-bar-wrap.active {
  display: block;
}
.longpress-bar {
  width: 0%;
  height: 100%;
  border-radius: 2px;
}

@media (prefers-color-scheme: light) {
  .longpress-bar-wrap {
    background: rgba(0,0,0,0.1);
  }
  .longpress-bar {
    background: #4285F4;
  }
}
@media (prefers-color-scheme: dark) {
  .longpress-bar-wrap {
    background: rgba(255,255,255,0.12);
  }
  .longpress-bar {
    background: #5294ff;
  }
}

.tip-modal{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  z-index:999;
}
.tip-box{
  padding:30px 24px;
  border-radius:16px;
  max-width:85%;
  width: 340px;
}
.tip-box p{
  font-size:15px;
  line-height:1.7;
  text-align:center;
  white-space: pre-line;
}

@media (prefers-color-scheme: light) {
  body {
    background: linear-gradient(#ffffff, #f4f4f4);
  }
  .text-card {
    background:#ffffff;
  }
  .content-text {
    color:#272727;
  }
  .dot-loader span {
    background:#4285F4;
  }
  .dot-loader span:nth-child(2) {
    background:#EA4335;
  }
  .dot-loader span:nth-child(3) {
    background:#FBBC05;
  }
  .tip-modal {
    background:rgba(0,0,0,0.4);
  }
  .tip-box {
    background:#fff;
  }
  .tip-box p {
    color:#272727;
  }
}

@media (prefers-color-scheme: dark) {
  body {
    background: linear-gradient(#121212, #1a1a1a);
  }
  .text-card {
    background:#2c2c2c;
    box-shadow:0 3px 16px rgba(0,0,0,0.35);
  }
  .content-text {
    color:#eeeeee;
  }
  .dot-loader span {
    background:#5294ff;
  }
  .dot-loader span:nth-child(2) {
    background:#ff5c5c;
  }
  .dot-loader span:nth-child(3) {
    background:#ffd045;
  }
  .tip-modal {
    background:rgba(0,0,0,0.65);
  }
  .tip-box {
    background:#383838;
  }
  .tip-box p {
    color:#eeeeee;
  }
}