:root{--bg1:#111315;--panel:#1a1d22;--text:#e9ecf1;--muted:#b9c1d1;--primary:#7E9BFF;--secondary:#FF7EE2;--accent:#7CFFC4;--relax-bg:rgba(124, 255, 196, 0.1)}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:#0b0d10;color:var(--text);font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",Helvetica,Arial,sans-serif;display:flex;flex-direction:column;min-height:100vh}
.bg{position:fixed;inset:0;z-index:-1;background:radial-gradient(1200px 500px at 10% 10%,rgba(255,126,226,.15),transparent),radial-gradient(1000px 600px at 90% 20%,rgba(126,155,255,.18),transparent),radial-gradient(800px 500px at 20% 90%,rgba(124,255,196,.12),transparent);background-size:100% 100%;transition:all 1s ease}
.topbar{display:flex;align-items:center;justify-content:space-between;padding:16px 20px}
.brand{font-weight:700;letter-spacing:.3px;font-size:clamp(16px, 2.5vw, 22px);background:linear-gradient(90deg, var(--primary), var(--accent));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;max-width: 70%;}
.container{width:min(960px,92%);margin:0 auto;padding:8px 0 32px}
.clock{text-align:center;padding:12px 0 8px}
.time{font-size:clamp(36px,6vw,64px);font-weight:800;letter-spacing:1px}
.date{margin-top:6px;color:var(--muted);font-size:clamp(14px,2.5vw,16px)}
.card{margin-top:20px;background:linear-gradient(180deg,rgba(32,35,42,.85),rgba(22,24,28,.85));border:1px solid rgba(255,255,255,.06);backdrop-filter:saturate(110%) blur(8px);border-radius:18px;overflow:hidden}
.art{display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,rgba(255,126,226,.18),rgba(126,155,255,.18));padding:20px}

/* Carousel Styles */
.carousel {
  position: relative;
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.carousel-container {
  display: flex;
  transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.carousel-slide {
  min-width: 100%;
  padding: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(12px);
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.slide-content {
  text-align: center;
  padding: 25px;
  animation: fadeIn 0.6s ease-in-out;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(15px); }
  to { opacity: 1; transform: translateY(0); }
}

.slide-icon {
  font-size: 56px;
  margin-bottom: 20px;
  filter: drop-shadow(0 0 12px rgba(124, 255, 196, 0.6));
  animation: float 4s ease-in-out infinite;
}

@keyframes float {
  0% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
  100% { transform: translateY(0); }
}

.slide-title {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 12px;
  color: var(--text);
  background: linear-gradient(90deg, var(--primary), var(--accent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: 0.5px;
}

.slide-desc {
  font-size: 15px;
  color: var(--muted);
  line-height: 1.6;
}

.carousel-nav {
  display: flex;
  justify-content: center;
  margin-top: 25px;
  gap: 10px;
}

.carousel-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.carousel-dot.active {
  background: var(--accent);
  transform: scale(1.3);
  box-shadow: 0 0 12px var(--accent);
}

.carousel-dot:hover {
  background: rgba(255, 255, 255, 0.5);
  transform: scale(1.1);
}

.art svg{width:min(360px,85%);height:auto}
.tip{padding:18px 20px;font-size:clamp(16px,3.2vw,20px);line-height:1.5}
.actions{display:flex;gap:12px;padding:0 20px 20px}
.btn{appearance:none;border:none;outline:none;border-radius:999px;height:42px;padding:0 18px;display:inline-flex;align-items:center;justify-content:center;font-weight:600;cursor:pointer;transition:all .3s cubic-bezier(.25,.8,.25,1);background:var(--panel);color:var(--text);border:1px solid rgba(255,255,255,.08);box-shadow:0 2px 4px rgba(0,0,0,.1)}
.btn:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,.15)}
.btn.subtle:hover{background:rgba(40, 45, 55, 0.8);color:var(--text);border:1px solid rgba(255,255,255,.2)}
.btn:active{transform:translateY(0);box-shadow:0 2px 4px rgba(0,0,0,.1)}
.btn.subtle:active{background:rgba(15, 18, 25, 0.9);transform:translateY(0)}
.btn.primary{background:linear-gradient(90deg,var(--primary),var(--secondary));color:#0b0d10;border:none;position:relative;overflow:hidden}
.btn.large{height:48px;padding:0 24px;font-size:16px}
.btn.subtle{background:rgba(23, 25, 30, 0.7);color:var(--muted);backdrop-filter:saturate(180%) blur(10px);border:1px solid rgba(255,255,255,.1);transition:all .3s ease}
.btn.ghost{background:transparent;border:1px solid rgba(255,255,255,.14);color:var(--text)}
.timer{border-top:1px dashed rgba(255,255,255,.08);margin:0 20px 18px;padding-top:14px}
.timer-time{font-size:clamp(24px,6vw,36px);font-weight:700;text-align:center;color:var(--accent);text-shadow:0 0 10px rgba(124,255,196,.3)}
.timer-actions{display:flex;justify-content:center;margin-top:10px}

.timer-label {
  text-align: center;
  color: var(--muted);
  font-size: 14px;
  margin-bottom: 4px;
}

.timer-message {
  text-align: center;
  color: var(--accent);
  font-size: 14px;
  margin: 8px 0 16px;
  opacity: 0.8;
}

.quote{margin-top:26px;padding:16px 18px;border-radius:16px;background:linear-gradient(180deg,rgba(124,255,196,.15),rgba(124,255,196,.05));border:1px solid rgba(124,255,196,.25)}
.quote-text{font-size:clamp(14px,2.8vw,16px);text-align:center;color:#dff7ec}
.footer{margin-top:auto;padding:18px 20px;color:var(--muted);border-top:1px solid rgba(255,255,255,.06)}
.footer-inner{text-align:center;font-size:13px}

/* Relaxation animations */
@keyframes bg-float {
  0% {background-position: 0 0}
  100% {background-position: 20px 20px}
}

@keyframes card-float {
  0% {transform: translateY(0)}
  100% {transform: translateY(-10px)}
}

.relaxing .bg {
  animation: bg-float 20s ease-in-out infinite alternate;
}

.relaxing .card {
  animation: card-float 6s ease-in-out infinite alternate;
  box-shadow: 0 0 30px var(--relax-bg);
}

/* Mobile responsiveness */
@media (max-width:480px){
  .actions{flex-direction:column}
  .btn{width:100%}
  .art{padding:8px}
  .brand{
    font-size: clamp(16px, 4vw, 20px);
    letter-spacing: 0.3px;
  }
  .topbar{
    padding: 12px 16px;
  }
}