:root { 
            --soft-ivory: #fef9e8;
            --calm-border: #d4e6e6;
        }
      
        .meditation-timer-display {
            background: #ffffff;
            border-radius: 64px;
            padding: 2rem 1rem;
            text-align: center;
            box-shadow: 0 10px 25px rgba(0,0,0,0.05);
            border: 1px solid #e9ecef;
        }
        .timer-digits {
            font-size: 5rem;
            font-weight: 700;
            font-family: 'JetBrains Mono', 'SF Mono', monospace;
            letter-spacing: 4px;
            color: #1e4663;
        }
        .timer-unit {
            font-size: 1.2rem;
            font-weight: 500;
            color: #5f7f9e;
        }
        .timer-canvas-container {
            position: relative;
            width: 200px;
            height: 200px;
            margin: 0 auto 1rem auto;
        }
        canvas#progressRing {
            width: 100%;
            height: 100%;
            display: block;
        }
        .btn-preset {
            background: #eef2f5;
            border: none;
            border-radius: 40px;
            padding: 0.5rem 1.3rem;
            font-weight: 500;
            margin: 0.25rem;
            transition: all 0.2s;
        }
        .btn-preset.active, .btn-preset:hover {
            background: var(--primary-color);
            color: white;
        }
        .btn-custom-ctrl {
            border-radius: 60px;
            padding: 0.6rem 1.5rem;
            font-weight: 500;
            margin: 0.3rem;
        }
        .math-box, .case-study, .deep-dive {
            background-color: #f9fbfd;
            border-left: 4px solid var(--primary-color);
            padding: 1.2rem;
            border-radius: 16px;
            margin: 1.6rem 0;
        }
        .legend-item .legend-color {
            width: 16px;
            height: 16px;
            border-radius: 50%;
            display: inline-block;
        }
        .badge.bg-secondary {
            background-color: #9aaebf !important;
        } 
        @media (max-width: 768px) {
            .timer-digits { font-size: 3rem; }
            }
        .input-group-custom {
            max-width: 220px;
            margin: 0 auto;
        }
        .breath-hint {
            font-size: 0.85rem;
            color: #4f6f8f;
            background: #eef5f9;
            display: inline-block;
            border-radius: 60px;
            padding: 0.25rem 1rem;
        }