@layer components {
  .timer__top { display: flex; align-items: center; justify-content: space-between; }
  .timer__since { font-size: var(--text-sm); color: var(--ink-muted); }
  .timer__context { font-size: var(--text-sm); font-weight: 500; color: var(--ink-muted); }
  .timer__title { font-size: var(--text-lg); font-weight: 600; line-height: 1.3; }
  .timer__note { font-size: var(--text-sm); color: var(--ink-muted); }
  .timer__row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
  .timer__clock { font-size: var(--text-display); font-weight: 600; letter-spacing: -0.02em; line-height: 1; }

  .pulse {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: currentColor;
    animation: pulse 1.6s ease-in-out infinite;
  }

  @keyframes pulse { 50% { opacity: 0.3; } }
}