* {
   margin: 0;
   padding: 0;
 }

 :root {
   --primary: #5a7b9d;
   --secondary: #8fb3cc;
   --accent: #e6b89c;
   --light: #f0f7f4;
   --dark: #3a506b;
   --success: #4caf50;
   --transition: all 0.3s ease;
 }

 body {
   background: linear-gradient(135deg, #e0f7fa, #f5f5f5);
 }

 .container {
   width: 100%;
   min-width: 1240px;
   max-width: 1560px;
   margin: 25px auto;
   color: #333;
   box-sizing: border-box;
 }

 .container *{
   box-sizing: border-box;
 }
 /* 头部样式 */
 header {
   display: flex;
   justify-content: center;
   align-items: center;
   margin-bottom: 25px;
 }

 .logo {
   display: flex;
   align-items: center;
   gap: 15px;
 }

 .logo h1 {
   font-size: 2.5rem;
   font-weight: 300;
   color: var(--dark);
   text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
 }

 .logo i {
   font-size: 2.8rem;
   color: var(--primary);
   animation: pulse 2s infinite;
 }

 @keyframes pulse {
   0% {
     transform: scale(1);
   }

   50% {
     transform: scale(1.1);
   }

   100% {
     transform: scale(1);
   }
 }

 /* 介绍部分 */
 .intro {
   text-align: center;
   margin-bottom: 50px;
   padding: 0 100px;
 }

 .intro h2 {
   font-size: 2.8rem;
   font-weight: 300;
   margin-bottom: 20px;
   color: var(--dark);
   background: linear-gradient(to right, var(--primary), var(--secondary));
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
 }

 .intro p {
   font-size: 1.2rem;
   line-height: 1.8;
   color: #555;
   margin-bottom: 30px;
 }

 .features {
   display: flex;
   justify-content: center;
   gap: 30px;
   margin-top: 40px;
 }

 .feature {
   background: rgba(255, 255, 255, 0.8);
   border-radius: 15px;
   padding: 25px;
   width: 250px;
   box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
   transition: var(--transition);
   backdrop-filter: blur(5px);
   border: 1px solid rgba(255, 255, 255, 0.3);
 }

 .feature:hover {
   box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
   background: rgba(255, 255, 255, 1);
 }

 .feature i {
   font-size: 2.5rem;
   margin-bottom: 15px;
   color: var(--primary);
 }

 .feature h3 {
   font-size: 1.3rem;
   margin-bottom: 10px;
   color: var(--dark);
 }

 /* 冥想工具区域 */
 .tools-section {
   margin-bottom: 60px;
 }

 .tools-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 30px;
 }

 .tool-card {
   background: rgba(255, 255, 255, 0.85);
   border-radius: 15px;
   overflow: hidden;
   box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
   transition: var(--transition);
   backdrop-filter: blur(5px);
   border: 1px solid rgba(255, 255, 255, 0.3);
 }

 .tool-card:hover {
   box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
   background: rgba(255, 255, 255, 1);
 }

 .card-header {
   background: linear-gradient(to right, var(--primary), var(--secondary));
   color: white;
   padding: 20px;
   text-align: center;
   font-size: 1.4rem;
   font-weight: 500;
 }

 .card-body {
   padding: 30px;
 }

 .timer-display {
   font-size: 4.5rem;
   /* 从3.5rem增大到4.5rem */
   text-align: center;
   margin: 25px 0;
   /* 增加上下边距 */
   font-weight: 300;
   color: var(--dark);
   font-family: 'Courier New', monospace;
   min-height: 100px;
   /* 确保有足够高度 */
   display: flex;
   justify-content: center;
   align-items: center;
 }

 .controls {
   display: flex;
   justify-content: center;
   gap: 15px;
   margin: 25px 0;
   flex-wrap: wrap;
 }

 /* 冥想提示文案样式 */
 .meditation-tip {
   margin-top: 30px;
   padding: 15px;
   background-color: rgba(90, 123, 157, 0.08);
   border-radius: 10px;
   color: var(--dark);
   text-align: center;
 }

 .meditation-tip p {
   margin-bottom: 10px;
   font-size: 1rem;
 }

 .meditation-tip ul {
   text-align: left;
   padding-left: 20px;
   margin: 15px 0;
   list-style-type: none;
 }

 .meditation-tip li {
   position: relative;
   padding-left: 25px;
   margin-bottom: 8px;
   font-size: 0.95rem;
 }

 .meditation-tip li:before {
   content: "•";
   position: absolute;
   left: 0;
   color: var(--primary);
   font-size: 1.2rem;
 }

 .btn {
   padding: 12px 25px;
   border: none;
   border-radius: 30px;
   font-size: 1rem;
   cursor: pointer;
   transition: var(--transition);
   background: var(--secondary);
   color: white;
   font-weight: 500;
   min-width: 100px;
 }

 .btn:hover {
   background: var(--primary);
   transform: scale(1.05);
 }

 .btn-primary {
   background: var(--primary);
 }

 .btn-accent {
   background: var(--accent);
 }

 .btn-success {
   background: var(--success);
 }

 .sound-grid {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 15px;
   margin-top: 20px;
 }

 .sound-item {
   display: flex;
   align-items: center;
   gap: 10px;
   padding: 12px;
   background: #f9f9f9;
   border-radius: 8px;
   cursor: pointer;
   transition: var(--transition);
   border: 1px solid #eee;
 }

 .sound-item:hover {
   background: #eef7ff;
 }

 .sound-item.active {
   background: #e3f2fd;
   border: 1px solid var(--secondary);
   box-shadow: 0 2px 8px rgba(90, 123, 157, 0.2);
 }

 .sound-item i {
   font-size: 1.2rem;
   color: var(--primary);
 }

 .volume-control {
   margin-top: 20px;
   background: #f5f5f5;
   padding: 15px;
   border-radius: 10px;
 }

 .volume-control input {
   width: 100%;
   margin-top: 8px;
 }

 .volume-display {
   display: flex;
   justify-content: space-between;
   font-size: 0.9rem;
   color: #666;
   margin-top: 5px;
 }

 /* 呼吸练习 */
 .breathing-container {
   display: flex;
   flex-direction: column;
   align-items: center;
   padding: 30px;
   /* 增加内边距 */
   gap: 20px;
   /* 增加子元素间距 */
 }

 .breathing-circle {
   width: 250px;
   /* 从220px增大到250px */
   height: 250px;
   /* 从220px增大到250px */
   border-radius: 50%;
   background: var(--light);
   border: 3px solid var(--secondary);
   display: flex;
   justify-content: center;
   align-items: center;
   margin: 20px 0;
   transition: all 4s ease-in-out;
   box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
 }

 .breathing-text {
   font-size: 1.8rem;
   color: var(--dark);
   font-weight: 500;
   text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
 }

 .breath-controls {
   display: flex;
   gap: 15px;
   margin-top: 20px;
 }

 .pattern-select {
   width: 100% !important;
   /* 确保宽度100% */
   padding: 12px;
   border-radius: 30px;
   border: 1px solid #ddd;
   background: white;
   font-size: 1rem;
   color: var(--dark);
   margin-top: 20px;
   /* 增加上边距 */
   cursor: pointer;
   transition: var(--transition);
 }


 .pattern-select:hover {
   border-color: var(--secondary);
 }

 /* 页脚 */
 footer {
   background: var(--dark);
   color: white;
   padding: 30px 10px;
   margin-top: 50px;
   text-align: center;
 }

 .copyright {
   color: rgba(255, 255, 255, 0.7);
 }

 /* 响应式调整 */
 @media (max-width: 1400px) {
   .container {
     padding: 20px 40px;
   }

   .tools-grid {
     grid-template-columns: repeat(2, 1fr);
   }
 }

 /* 动画效果 */
 @keyframes fadeIn {
   from {
     opacity: 0;
     transform: translateY(20px);
   }

   to {
     opacity: 1;
     transform: translateY(0);
   }
 }

 .tool-card {
   animation: fadeIn 0.5s ease-out;
 }

 .tool-card:nth-child(1) {
   animation-delay: 0.1s;
 }

 .tool-card:nth-child(2) {
   animation-delay: 0.3s;
 }

 .tool-card:nth-child(3) {
   animation-delay: 0.5s;
 }

 /* 状态指示器 */
 .status-indicator {
   display: inline-block;
   width: 12px;
   height: 12px;
   border-radius: 50%;
   background: #ccc;
   margin-left: 8px;
 }

 .status-indicator.playing {
   background: var(--success);
   box-shadow: 0 0 8px var(--success);
 }