.material-symbols-outlined {
     font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
     display: inline-block;
     line-height: 1;
     vertical-align: middle;
 }

 .glass-effect {
     backdrop-filter: blur(12px);
     background: rgba(255, 255, 255, 0.8);
     border: 1px solid rgba(229, 231, 235, 1);
 }

 .card-shadow {
     box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.03);
 }

 .modal-shadow {
     box-shadow: 0px 20px 40px rgba(0, 0, 0, 0.08);
 }

 .bg-level-0 {
     background-color: #F8FAFC;
 }

 /* Custom Slider Styling */
 input[type='range']::-webkit-slider-runnable-track {
     background: #DFF8EF;
     height: 6px;
     border-radius: 3px;
 }

 input[type='range']::-webkit-slider-thumb {
     -webkit-appearance: none;
     height: 20px;
     width: 20px;
     background: #00694e;
     border-radius: 50%;
     margin-top: -7px;
     cursor: pointer;
 }


 .glass-header {
     backdrop-filter: blur(12px);
     background: rgba(255, 255, 255, 0.8);
 }

 .tonal-card {
     background: #FFFFFF;
     box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.03);
     transition: transform 0.2s ease, box-shadow 0.2s ease;
 }

 .tonal-card:hover {
     transform: translateY(-4px);
     box-shadow: 0px 12px 30px rgba(0, 0, 0, 0.06);
 }

 .timeline-line::before {
     content: '';
     position: absolute;
     left: 50%;
     width: 2px;
     height: 100%;
     background: #bdcac2;
     transform: translateX(-50%);
 }

 .glass-nav {
     backdrop-filter: blur(12px);
     background-color: rgba(247, 249, 251, 0.8);
 }

 .card-shadow {
     box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.03);
 }

 .premium-shadow {
     box-shadow: 0px 20px 40px rgba(0, 0, 0, 0.08);
 }

 .material-symbols-outlined {
     font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
 }