


















:root {
   
  --dur-fast: 150ms;      
  --dur-base: 250ms;      
  --dur-slow: 400ms;      
  --dur-stage: 600ms;     

  


  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);         
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);      
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);   
  --ease-exit: cubic-bezier(0.4, 0, 1, 1);            

  

  --elev-1: 0 2px 10px rgba(205, 223, 223, 0.28);                                  
  --elev-2: 0 8px 24px rgba(163, 193, 193, 0.35), 0 1px 3px rgba(17, 17, 17, 0.04);  
  --elev-3: 0 16px 48px rgba(128, 163, 163, 0.35), 0 2px 6px rgba(17, 17, 17, 0.05);  
  --line-card: 1px solid rgba(205, 223, 223, 0.40);   

   
  

  --ring-g1: #A9F396;
  --ring-g2: #68EA48;
  --ring-g3: #40DD19;
   
  --grad-card-wash: linear-gradient(180deg, #FFFFFF 0%, #F4F8F8 100%);
  

  --grad-btn-primary: linear-gradient(180deg, #52DE2E 0%, #3DD517 100%);
   
  --shadow-btn-primary: 0 6px 16px rgba(61, 213, 23, 0.25);

   
  --font-number-xl: 40px;    
}





 
.card-l0 { background: var(--bg-page); border-radius: var(--radius-lg); }           
.card-l1 {
  background: var(--bg-surface); border-radius: var(--radius-card);
  border: var(--line-card); box-shadow: var(--elev-1);                             
}
.card-l2 {
  background: var(--grad-card-wash); border-radius: var(--radius-card);
  box-shadow: var(--elev-2);                                                       
}

 
 
.ds-btn-primary {
  height: var(--btn-height); border: none; border-radius: calc(var(--btn-height) / 2);
  background: var(--grad-btn-primary); color: var(--text-inverse);
  font-family: var(--font-family-base); font-size: var(--font-emphasis); font-weight: 500;
  box-shadow: var(--shadow-btn-primary), var(--shadow-btn);
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
 
.ds-btn-secondary {
  height: var(--btn-height); border-radius: calc(var(--btn-height) / 2);
  background: var(--bg-surface); border: var(--line-card); box-shadow: var(--elev-1);
  color: var(--text-primary); font-family: var(--font-family-base);
  font-size: var(--font-body); font-weight: 500; cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
 
.ds-chip {
  background: var(--color-accent-bg); border: none; border-radius: var(--radius-card);
  color: var(--text-primary); font-family: var(--font-family-base); font-size: var(--font-body);
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out);
}



.ds-pressable { transition: transform var(--dur-fast) var(--ease-out); }
.ds-pressable:active,
.ds-btn-primary:active,
.ds-btn-secondary:active,
.ds-chip:active { transform: scale(0.96); }
.ds-btn-primary:active { box-shadow: var(--shadow-btn); }

 
.ds-sheet-enter { animation: ds-sheet-in var(--dur-slow) var(--ease-out) both; }
.ds-sheet-exit  { animation: ds-sheet-out var(--dur-slow) var(--ease-exit) both; }
@keyframes ds-sheet-in  { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
@keyframes ds-sheet-out { from { opacity: 1; transform: translateY(0); }    to { opacity: 0; transform: translateY(24px); } }

 
.ds-empty {
  background: var(--bg-page); border-radius: var(--radius-lg);
  padding: var(--space-card); text-align: center;
  color: var(--text-disabled); font-size: var(--font-body);
}






.mia-ring { position: relative; display: inline-flex; }
.mia-ring-svg { transform: rotate(-90deg); display: block; }             
.mia-ring-fill { transition: stroke-dashoffset var(--dur-stage) var(--ease-out); }
.mia-ring-center {
  position: absolute; inset: 0; display: flex;
  flex-direction: column; align-items: center; justify-content: center;
  text-align: center; pointer-events: none;
}
.mia-ring-num {
  font-family: var(--font-family-number); font-size: var(--font-number-xl);
  line-height: 1.05; color: var(--text-number);
}






:root {
  --dur-voice-inhale: 240ms;    
  --dur-voice-retract: 180ms;   
  --dur-voice-gap: 120ms;       
  --dur-voice-dot-fade: 300ms;  
  --dur-voice-settle: 280ms;    
}
