@layer sections{
  [ui-section=countdown-timer] .timer-container{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    align-items:center;
    justify-content:space-between;
    padding:var(--spacing-32);
    overflow:hidden;
    border-radius:var(--radius-card);
    background-color:var(--timer-bg);
    grid-gap:var(--spacing-16);
    gap:var(--spacing-16);
  }
  [ui-section=countdown-timer] .timer-container .title{
    font:var(--font-heading-xl);
  }
  [ui-section=countdown-timer] .timer-container .timer{
    --segment-size:80px;
    display:flex;
    flex:1;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    gap:var(--spacing-16);
  }
  [ui-section=countdown-timer] .timer-container .timer .segments{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:var(--spacing-16);
  }
  [ui-section=countdown-timer] .timer-container .timer .segments .divider{
    display:block;
    position:relative;
    animation:blink 2s step-end infinite;
    font-size:24px;
    inset-block-end:var(--spacing-16);
  }
  [ui-section=countdown-timer] .timer-container .timer .segments .segment{
    display:flex;
    flex-direction:column;
    align-content:start;
    justify-content:center;
    place-content:start center;
    align-items:center;
    justify-content:center;
    gap:var(--spacing-8);
  }
  [ui-section=countdown-timer] .timer-container .timer .segments .segment [ui-countdown]{
    display:flex;
    align-items:center;
    justify-content:center;
    width:var(--segment-size);
    height:var(--segment-size);
    padding:var(--spacing-16);
    border-radius:var(--radius-16);
    background-color:oklch(from var(--timer-bg) calc(l - 0.058) calc(c + 0.03) h);
    font:var(--font-heading-lg);
  }
  [ui-section=countdown-timer] .timer-container .timer .label,
  [ui-section=countdown-timer] .timer-container .timer [ui-countdown=message]{
    font:var(--font-label-md);
  }
  [ui-section=countdown-timer] .timer-container .action{
    display:flex;
    align-items:center;
    justify-content:flex-end;
  }
  [ui-section=countdown-timer] .timer-container .action [ui-slot=button]{
    --button-bg:var(--fg-color);
    --button-fg:var(--timer-bg);
    min-width:200px;
  }
  @media (max-width: 1024px){
    [ui-section=countdown-timer] .timer-container{
      grid-template-columns:1fr;
      text-align:center;
      gap:var(--spacing-32);
    }
    [ui-section=countdown-timer] .timer-container .action{
      justify-content:center;
    }
  }
  @media (max-width: 769px){
    [ui-section=countdown-timer] .timer-container .timer .segments .segment [ui-countdown]{
      --segment-size:64px;
      padding:var(--spacing-8);
    }
  }
  @keyframes blink{
    0%, 100%{
      opacity:1;
    }
    50%{
      opacity:0;
    }
  }
}