* {
    margin: 0;
    padding: 0;
    box-sizing:border-box
}

body{
  margin:0;
  font-family:Inter,system-ui,sans-serif;
  background:#020617;
  color:#e5e7eb;
  display:flex;
  justify-content:center;
  padding:40px;
}

.app{
  width:640px;
  background:#020617;
  border-radius:20px;
  padding:28px;
  box-shadow:0 30px 80px rgba(0,0,0,.6);
}

h1{
    text-align:center;
    margin:0 0 24px;
    font-weight:800;
}

.block{
  padding:16px;
  border-radius:14px;
  margin-bottom:14px;
  display:flex;
  flex-direction:column;
  gap:6px;
  position:relative;
  opacity:.8;
  transition:.3s;
}

.block.active{
  opacity:1;
  transform:scale(1.02);
  box-shadow:0 0 0 2px rgba(255,255,255,.15);
  animation:pulse 1.4s infinite;
}

@keyframes pulse{
    0% {
        box-shadow:0 0 0 0 rgba(255,255,255,.25)
    }

    70% {
        box-shadow:0 0 0 10px rgba(255,255,255,0)
    }

    100% {
        box-shadow:0 0 0 0 rgba(255,255,255,0)
    }
}

.now{
  position:absolute;
  top:12px;
  right:12px;
  font-size:14px;
  font-weight:600;
  background:rgba(0,0,0,.4);
  padding:4px 8px;
  border-radius:999px;
}

.time{
    font-weight:600;font-size:14px;opacity:.9
}

.title{
    font-size:16px;font-weight:600
}

.desc{
    font-size:14px;opacity:.85
}

.work{
    background:linear-gradient(135deg,#1e3a8a,#1d4ed8)
}

.food{
    background:linear-gradient(135deg,#14532d,#22c55e)
}

.water{
    background:linear-gradient(135deg,#075985,#38bdf8)
}

.exercise{
    background:linear-gradient(135deg,#4c1d95,#a855f7)
}

.rest{
    background:linear-gradient(135deg,#312e81,#6366f1)
}

.clock{
    position:fixed;
    top:20px;
    right:24px;
    background:rgba(2,6,23,.8);
    backdrop-filter:blur(6px);
    padding:10px 14px;
    border-radius:14px;
    text-align:right;
    box-shadow:0 10px 30px rgba(0,0,0,.5);
}

.clock .time{
    font-size:20px;
    font-weight:800;
    letter-spacing:.5px;
}

.clock .date{
    font-size:12px;
    opacity:.75;
}