/* Quiet motion, using the existing theme colors and no external assets. */
.focus-motion{position:absolute;inset:50% auto auto 50%;width:min(620px,86vw);height:250px;translate:-50% -50%;pointer-events:none;isolation:isolate;opacity:.68;transition:opacity .5s}
.focus-halo{position:absolute;inset:-30px 4%;border-radius:50%;background:radial-gradient(ellipse,color-mix(in srgb,var(--accent) 10%,transparent),transparent 68%);opacity:.45;transform:scale(.92);transition:opacity .8s,transform 1s}
.focus-orbit{position:absolute;inset:24% 0;border:1px solid color-mix(in srgb,var(--accent) 13%,transparent);border-radius:50%;rotate:-16deg;}
.focus-orbit::before{content:'';position:absolute;inset:-1px;border:1px solid transparent;border-top-color:color-mix(in srgb,var(--accent) 48%,transparent);border-radius:inherit;mask-image:linear-gradient(90deg,transparent,black 45%,transparent 85%)}
.focus-orbit i{position:absolute;left:17%;top:8%;height:5px;width:5px;border-radius:50%;background:var(--accent);box-shadow:0 0 12px color-mix(in srgb,var(--accent) 45%,transparent)}
.focus-orbit.inner-orbit{inset:15% 9%;rotate:17deg;opacity:.55}.inner-orbit i{left:auto;right:17%;top:auto;bottom:8%;height:3px;width:3px}
.timer-display{position:relative;z-index:1}.timer-card[data-motion-kind=clock] .focus-motion{opacity:0}.timer-card[data-motion-mode=break] .focus-motion{opacity:.3}
.timer-card[data-motion-running=true] .focus-halo{opacity:1;transform:scale(1)}
.timer-card[data-motion-running=true] .focus-badge::after{content:'';width:5px;height:5px;flex-shrink:0;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 9%,transparent)}
@media(prefers-reduced-motion:no-preference){
  :root:not([data-motion=off]) .focus-orbit{animation:orbit-drift 22s ease-in-out infinite alternate;animation-play-state:paused}
  :root:not([data-motion=off]) .inner-orbit{animation-name:orbit-drift-inner;animation-duration:28s}
  :root:not([data-motion=off]) .timer-card[data-motion-running=true] .focus-orbit{animation-play-state:running}
  :root:not([data-motion=off]) .timer-card[data-motion-running=true] .focus-halo{animation:halo-breathe 8s ease-in-out infinite}
  :root:not([data-motion=off]) .timer-card[data-motion-running=true] .focus-badge::after{animation:focus-pulse 3s ease-in-out infinite}
  :root:not([data-motion=off]) .brand-symbol i{transform-origin:center;animation:brand-arrive .8s cubic-bezier(.2,.8,.2,1) both}
  :root:not([data-motion=off]) .brand-symbol i:nth-child(2){animation-delay:.09s}:root:not([data-motion=off]) .brand-symbol i:nth-child(3){animation-delay:.18s}
  :root:not([data-motion=off]) .view:not([hidden]) .card,:root:not([data-motion=off]) .view:not([hidden]) .feature-card{animation:card-arrive .48s cubic-bezier(.2,.8,.2,1) backwards}
  :root:not([data-motion=off]) .view:not([hidden]) .card:nth-child(2),:root:not([data-motion=off]) .feature-card:nth-child(2){animation-delay:55ms}
  :root:not([data-motion=off]) .view:not([hidden]) .card:nth-child(3),:root:not([data-motion=off]) .feature-card:nth-child(3){animation-delay:110ms}
  :root:not([data-motion=off]) .view:not([hidden]) .card:nth-child(n+4),:root:not([data-motion=off]) .feature-card:nth-child(n+4){animation-delay:150ms}
  :root:not([data-motion=off]) .timer-body,:root:not([data-motion=off]) .timer-controls,:root:not([data-motion=off]) .timer-footer{animation:card-arrive .65s cubic-bezier(.2,.8,.2,1) backwards}
  :root:not([data-motion=off]) .timer-controls{animation-delay:.08s}:root:not([data-motion=off]) .timer-footer{animation-delay:.14s}
  :root:not([data-motion=off]) .view:not([hidden]) .chart-bar{transform-origin:bottom;animation:bar-grow .7s cubic-bezier(.2,.8,.2,1) backwards}
  :root:not([data-motion=off]) .view:not([hidden]) .meter span{transform-origin:left;animation:meter-grow .7s cubic-bezier(.2,.8,.2,1) backwards;transition:width .6s ease}
  :root:not([data-motion=off]) .task-row.completed .task-check .icon,:root:not([data-motion=off]) .habit-toggle[aria-pressed=true]{animation:check-pop .3s ease-out}
  :root:not([data-motion=off]) dialog[open]{animation:card-arrive .25s ease-out backwards}
  :root:not([data-motion=off]) .tools-menu[open] .tools-menu-list,:root:not([data-motion=off]) .right-stack:not([hidden]){animation:card-arrive .25s ease-out backwards}
  :root:not([data-motion=off]) button{transition:background-color .2s,color .2s,border-color .2s,transform .2s,opacity .2s}
  :root:not([data-motion=off]) button:active:not(:disabled){transform:scale(.97)}
}
@keyframes orbit-drift{from{transform:rotate(-5deg) scale(.97)}to{transform:rotate(8deg) scale(1.02)}}
@keyframes orbit-drift-inner{from{transform:rotate(7deg)}to{transform:rotate(-9deg)}}
@keyframes halo-breathe{0%,100%{opacity:.55;transform:scale(.96)}50%{opacity:.95;transform:scale(1.06)}}
@keyframes focus-pulse{0%,100%{opacity:.55}50%{opacity:1}}
@keyframes brand-arrive{from{opacity:0;transform:scaleY(.2)}to{opacity:1;transform:scaleY(1)}}
@keyframes card-arrive{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes bar-grow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes meter-grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes check-pop{0%{transform:scale(.75)}65%{transform:scale(1.12)}100%{transform:scale(1)}}
.completion-sparks{position:absolute;inset:50% auto auto 50%;width:0;height:0;pointer-events:none;z-index:2}.completion-sparks i{opacity:0;position:absolute;width:4px;height:7px;border-radius:2px;background:var(--accent)}.completion-sparks i:nth-child(3n){background:var(--ink);width:3px;height:3px}
:root[data-page-hidden=true] *,:root[data-page-hidden=true] *::before,:root[data-page-hidden=true] *::after{animation-play-state:paused!important}
:root[data-motion=off] *,:root[data-motion=off] *::before,:root[data-motion=off] *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
:root[data-motion=off] .focus-motion{opacity:.3}
.focus-mode .focus-motion{opacity:.38}
@media(max-width:600px){.focus-motion{width:83vw;height:145px}.focus-orbit{inset:24% 0}.focus-orbit.inner-orbit{inset:12% 7%}.focus-orbit i{height:4px;width:4px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.focus-motion{opacity:.3}.completion-sparks{display:none}}
@media print{.focus-motion,.completion-sparks{display:none!important}}

#hero-today-minutes{display:inline-block}
/* Stable digit cells animate only on a real one-second countdown tick. */
#timer-time>.timer-digit{display:inline-block;position:relative;overflow:hidden;vertical-align:top;color:var(--ink);font-weight:inherit;letter-spacing:inherit;margin:0;line-height:1.17}
.timer-digit .digit-value{display:block}.timer-digit::before{content:attr(data-previous);position:absolute;inset:0;opacity:0;pointer-events:none}
@media(prefers-reduced-motion:no-preference){
  :root:not([data-motion=off]) .timer-digit.is-changing .digit-value{animation:digit-roll-in .3s cubic-bezier(.2,.65,.3,1) both}
  :root:not([data-motion=off]) .timer-digit.is-changing::before{animation:digit-roll-out .3s cubic-bezier(.2,.65,.3,1) both}
  :root:not([data-motion=off]) .task-picker-options:not([hidden]){animation:card-arrive .18s ease-out backwards}
}
@keyframes digit-roll-in{from{transform:translateY(-85%);opacity:0}to{transform:translateY(0);opacity:1}}
@keyframes digit-roll-out{from{transform:translateY(0);opacity:1}to{transform:translateY(85%);opacity:0}}