.quest-clock{--quest-elapsed:0;position:relative;width:160px;height:160px;flex:none;margin:12px auto;isolation:isolate}
.quest-clock svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;transform:rotate(-90deg)}
.quest-clock circle{fill:none;stroke-width:1.4}
.quest-clock-track{stroke:#e6cfa612}
.quest-clock-arc{stroke:#e8cfa6;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:var(--quest-elapsed);filter:drop-shadow(0 0 5px #e8cfa655);transition:stroke-dashoffset .3s linear,opacity 1.8s}
.quest-clock-orb{position:absolute;inset:28%;border-radius:50%;background:radial-gradient(circle,#f4dec538 0%,#e7bf8617 35%,#ebcca005 62%,transparent 72%);box-shadow:0 0 32px #e7c39308;animation:quest-breath 7s ease-in-out infinite}
.quest-clock.is-ready .quest-clock-track{stroke:#c4dfc267;transition:stroke 1.8s}
.quest-clock.is-ready .quest-clock-orb{background:radial-gradient(circle,#d3ecc04a, #c7dfaa12 48%,transparent 72%)}
.quest-clock-caption{font-size:12px!important;font-weight:400;letter-spacing:.4px;line-height:1.6;color:#c7bba9;margin:6px 0 12px!important;text-align:center}
.focus-friend:has(.quest-clock){display:flex;flex-direction:column;align-items:center;justify-content:center;height:250px}
.focus-friend .quest-clock{margin:0 auto 4px}
#display .quest-clock{width:58px;height:58px;margin:0 auto 4px}
#display .quest-clock-caption{font-size:14px!important;margin:0 0 8px!important}
#display .quest-clock circle{stroke-width:3}
@keyframes quest-breath{0%,100%{transform:scale(.91);opacity:.65}50%{transform:scale(1.09);opacity:1}}
@media(max-height:740px){.focus-friend:has(.quest-clock){height:185px}.focus-friend .quest-clock{width:132px;height:132px}}
@media(prefers-reduced-motion:reduce){.quest-clock-orb{animation:none}.quest-clock-arc{transition:none}}

#display .quest-clock{position:fixed;top:42px;left:48px;margin:0}#display .quest-clock-caption{position:fixed;top:108px;left:48px;right:160px;text-align:left}