.bp-timer {
  --timer-ink: #332d28;
  --timer-muted: #786f65;
  --timer-gold: #b88a4f;
  background: #fff;
  border: 1px solid #eee7dd;
  border-radius: 18px;
  padding: 25px 24px 22px;
  color: var(--timer-ink);
  text-align: center;
  box-shadow: 0 4px 20px #48382003;
}
.timer-eyebrow { display: flex; justify-content: center; align-items: center; gap: 8px; color: #9c7d52; font-size: 9px; font-weight: 600; letter-spacing: 1.7px; line-height: 1.5; }
.timer-title { margin: 14px 0 8px; font-family: var(--font-display, Georgia, serif); font-size: 25px; font-weight: 400; line-height: 1.2; letter-spacing: -.7px; }
.timer-intro { max-width: 215px; margin: 0 auto; font-size: 11px; line-height: 1.7; color: var(--timer-muted); }
.timer-clock { position: relative; width: min(100%, 208px); aspect-ratio: 1; margin: 5px auto 0; }
.timer-ring { display: block; width: 100%; height: 100%; transform: rotate(-90deg); fill: none; }
.timer-ring-track { stroke: #f1eae0; stroke-width: 2; }
.timer-ring-fill { stroke: var(--timer-gold); stroke-width: 2.5; stroke-linecap: round; transition: stroke-dashoffset .25s linear; }
.timer-clock-content { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; padding-top: 3px; }
.timer-time { font-family: var(--font-display, Georgia, serif); font-size: 47px; font-weight: 400; font-variant-numeric: tabular-nums; line-height: 1.1; letter-spacing: -1px; }
.timer-clock-label { color: var(--timer-muted); font-size: 10px; margin-top: 8px; }
.timer-durations { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 4px; border-radius: 8px; background: #f8f5f0; }
.bp-timer button { font-family: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.timer-duration { min-height: 34px; border: 1px solid transparent; border-radius: 5px; background: transparent; color: var(--timer-muted); font-size: 11px; transition: background .15s, box-shadow .15s; }
.timer-duration[aria-pressed="true"] { background: white; border-color: #ede5d9; color: var(--timer-ink); box-shadow: 0 1px 3px #48382008; }
.timer-duration:hover { color: var(--timer-ink); }
.timer-primary { display: flex; align-items: center; justify-content: center; gap: 9px; margin-top: 14px; min-height: 44px; width: 100%; background: #38332d; border: 1px solid #38332d; border-radius: 8px; color: #fff; font-size: 12px; font-weight: 500; transition: background .2s, transform .2s; }
.timer-primary:hover { background: #51483d; }
.timer-primary:active { transform: translateY(1px); }
.timer-primary-icon, .timer-sound-icon { display: inline-flex; }
.timer-tools { display: flex; justify-content: space-between; gap: 8px; margin-top: 8px; }
.timer-reset, .timer-sound { display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-height: 36px; padding: 3px 1px; border: 0; background: transparent; color: var(--timer-muted); font-size: 10px; }
.timer-reset:hover, .timer-sound:hover { color: var(--timer-ink); }
.timer-status { margin: 0; font-size: 11px; line-height: 1.6; color: #75684e; }
.timer-status:not(:empty) { padding: 10px 0 0; }
.timer-is-finished .timer-status { border: 1px solid #e4d6ba; padding: 12px; border-radius: 8px; background: #fbf7ed; margin-top: 8px; }
.timer-is-finished .timer-time { color: #977136; }
.timer-note { margin: 16px 5px 0; padding-top: 15px; border-top: 1px solid #f0ebe4; color: #8b8379; font-size: 9px; line-height: 1.7; }
.bp-timer button:focus-visible { outline: 2px solid #9c743e; outline-offset: 3px; }
.bp-timer [hidden] { display: none !important; }
.timer-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; margin-top: 16px; background: #f8f5f0; border: 1px solid #eee7dd; border-radius: 8px; }
.timer-mode { background: transparent; border: 1px solid transparent; border-radius: 5px; padding: 8px 5px; color: #786f65; font-size: 11px; min-height: 34px; }
.timer-mode[aria-pressed="true"] { background: #fff; border-color: #e6dccd; color: #775b33; box-shadow: 0 1px 4px #48382009; }
.timer-mode:disabled, .timer-duration:disabled { cursor: not-allowed; opacity: .65; }
.timer-is-stopwatch .timer-ring-fill { stroke: #c9bba6; }
.timer-time-long { font-size: 36px; letter-spacing: -1.3px; }
.timer-mode-hint { margin: 10px 0 0; color: #8b7c66; font-size: 9px; line-height: 1.6; }
.timer-custom { margin-top: 10px; text-align: left; border: 1px solid #eee6db; border-radius: 8px; padding: 10px 12px; }
.timer-custom summary { cursor: pointer; font-size: 10px; color: #8c6b3f; }
.timer-custom-fields { display: grid; grid-template-columns: minmax(0,1fr) 8px minmax(0,1fr); align-items: end; gap: 7px; border: 0; padding: 13px 0 0; margin: 0; min-width: 0; }
.timer-custom-fields label { display: flex; flex-direction: column; gap: 5px; font-size: 9px; color: #786f65; min-width: 0; }
.timer-custom-fields input { width: 100%; min-width: 0; border: 1px solid #dcd0be; border-radius: 5px; background: #fff; padding: 8px; color: #332d28; font: inherit; font-size: 13px; }
.timer-custom-fields input[aria-invalid="true"] { border-color: #b85f49; }
.timer-custom-fields input:focus-visible, .timer-custom summary:focus-visible { outline: 2px solid #9c743e; outline-offset: 3px; }
.timer-colon { padding-bottom: 7px; color: #a39071; }
.timer-apply { grid-column: 1 / -1; padding: 8px 10px; border: 1px solid #e1d3bc; border-radius: 5px; background: #f4ecdf; color: #775b33; font-size: 10px; min-height: 34px; }
.timer-custom-range { margin-top: 8px; font-size: 8px; color: #8b8379; }
.timer-error { color: #9a4935; font-size: 10px; line-height: 1.6; margin: 0; }
.timer-error:not(:empty) { margin-top: 8px; }
.timer-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
@media (max-width: 600px) { .bp-timer { padding: 24px; } .timer-duration { min-height: 40px; } .timer-reset, .timer-sound { min-height: 42px; font-size: 11px; } .timer-intro { font-size: 12px; } .timer-note { font-size: 10px; } }
@media (prefers-reduced-motion: reduce) { .bp-timer *, .bp-timer *::before, .bp-timer *::after { transition: none !important; animation: none !important; } }