.ds-timer{border-radius:var(--r-pill);background:var(--c-surface-2);height:40px;color:var(--c-ink);box-shadow:var(--gloss-top), inset 0 0 0 1px var(--c-line);transition:background-color .6s var(--ease-out), color .6s var(--ease-out), box-shadow .6s var(--ease-out);align-items:center;gap:8px;padding:0 6px 0 14px;display:inline-flex}.ds-timer__clock{min-width:4ch;font-family:var(--font-display);font-size:var(--fs-lg);padding-top:.12em;font-weight:800;line-height:1}.ds-timer__hidden-text{color:var(--c-ink-2);font-size:var(--fs-xs);font-weight:600}.ds-timer__toggle{width:30px;height:30px;color:var(--c-ink-2);cursor:pointer;background:0 0;border:none;border-radius:50%;place-items:center;display:grid}.ds-timer__toggle:hover{background:color-mix(in srgb, var(--c-ink) 8%, transparent);color:var(--c-ink)}.ds-timer.is-warning{background:var(--c-oops-soft);color:var(--c-oops-ink);box-shadow:var(--gloss-top), inset 0 0 0 1.5px color-mix(in srgb, var(--c-oops) 45%, transparent)}.ds-timer.is-on-dark{color:#fff;background:#ffffff1f;box-shadow:inset 0 0 0 1px #ffffff2e}.ds-timer.is-on-dark .ds-timer__toggle,.ds-timer.is-on-dark .ds-timer__hidden-text{color:#fffc}.ds-timer.is-on-dark.is-warning{background:color-mix(in srgb, var(--c-oops) 30%, transparent);color:#fff}