@layer theme,base;@layer components{.routine-body{container-type:inline-size}.routine-figure{height:min(34svh,260px);position:relative}.routine-content[data-orientation=portrait] .routine-figure{height:min(51svh,390px)}.routine-text{isolation:isolate}.routine-rule{margin-top:20px}.routine-text-material{display:none}@container (width<=699px){.routine-figure{top:var(--routine-top,44px);z-index:0;position:sticky}.routine-text{z-index:1;margin:-12px;padding:12px}.routine-text-material{opacity:var(--routine-frost,0);transition:opacity .18s var(--ease-settle);display:block}}@container (width>=700px){.routine-content[data-orientation=portrait]{grid-template-columns:minmax(220px,.85fr) minmax(0,1.4fr);align-items:center;column-gap:32px}.routine-content[data-orientation=portrait] .routine-figure{height:clamp(390px,56svh,560px)}.routine-content[data-orientation=portrait] .routine-text{display:contents}.routine-rule{grid-column:1/-1}.routine-content[data-orientation=portrait] .routine-rule{margin-top:0}}.routine-dose{font-family:var(--font-sans);font-variant-numeric:tabular-nums;font-size:18px;font-weight:600;line-height:1.15}@media (width>=640px){.routine-dose{font-size:20px}}.timer-control{--timer-reset-width:44px;background:color-mix(in srgb, var(--sg-ink) 8%, transparent)}@media (width>=640px){.timer-control{--timer-reset-width:48px}}.timer-control[data-phase=done] .timer-symbol{transition:none}.timer-content{transform:none}@media (width<=374px){.timer-content .routine-dose{font-size:15px}}.timer-symbol{color:color-mix(in srgb, var(--sg-ink) 70%, transparent);background:color-mix(in srgb, var(--sg-ink) 14%, transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--sg-ink) 8%, transparent);opacity:1;transition:color .16s var(--ease-settle), background-color .16s var(--ease-settle)}.timer-bar:not([data-phase=done]):focus-visible .timer-symbol{color:color-mix(in srgb, var(--sg-ink) 85%, transparent);background:color-mix(in srgb, var(--sg-ink) 22%, transparent)}@media (hover:hover){.timer-bar:not([data-phase=done]):hover .timer-symbol{color:color-mix(in srgb, var(--sg-ink) 85%, transparent);background:color-mix(in srgb, var(--sg-ink) 22%, transparent)}}.routine-round-viewport{width:100vw;padding-inline:var(--round-gutter,20px);scrollbar-width:none;margin-inline:calc(50% - 50vw);overflow-x:auto}.routine-round-track{grid-auto-columns:max-content}.routine-rounds[data-equal=true] .routine-round-track{grid-auto-columns:var(--round-width)}.routine-round-viewport::-webkit-scrollbar{display:none}.timer-bar-fill{width:calc(var(--progress,0) * 100%);background:color-mix(in srgb, var(--sg-sage) 40%, transparent);transition:width .12s linear;position:absolute;inset:0 auto 0 0}.timer-control[data-phase=done]{background:var(--sg-sage);color:var(--sg-canvas)}.timer-control[data-phase=done] .timer-symbol{color:var(--sg-canvas);box-shadow:none;background:0 0}.timer-bar[data-phase=preparing] .timer-symbol{background:var(--sg-canvas);color:var(--sg-sage-ink);box-shadow:inset 0 0 0 1px var(--sg-line)}.timer-preparation{font:700 26px/1 var(--font-sans);font-variant-numeric:tabular-nums}.routine-round-viewport[data-fits=true]{justify-content:center;display:flex}.timer-control[data-phase=done] .timer-bar-fill{background:0 0;width:100%;transition:none}@media (prefers-reduced-motion:reduce){.timer-bar-fill,.timer-symbol,.routine-content,.routine-text-material{transition:none}}}@layer utilities;