.sleep-clock{--clock-bed:#b9a5ef;--clock-wake:#efbc79;max-width:500px;margin:4px auto 12px;color:var(--text,#e9f0fc)}
.sleep-clock-face{width:min(100%,320px);aspect-ratio:1;position:relative;margin:4px auto 12px;touch-action:none;user-select:none;-webkit-user-select:none}
.sleep-clock-dial{display:block;width:100%;height:100%;overflow:visible}.sleep-clock-ticks line{stroke:#40506a;stroke-width:1.3}.sleep-clock-ticks .minor{opacity:.45}.sleep-clock-labels{font:11px -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;fill:#9baec8;text-anchor:middle}.sleep-clock-track{fill:none;stroke:#29394f;stroke-width:16}.sleep-clock-span{fill:none;stroke:var(--clock-bed);stroke-width:16;stroke-linecap:round}
.sleep-clock-center{position:absolute;inset:31% 19%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;pointer-events:none;text-align:center}.sleep-clock-center>span{font-size:12px;color:#c1cde0}.sleep-clock-center strong{font-size:clamp(25px,5.5vw,35px);letter-spacing:-.04em;font-variant-numeric:tabular-nums;white-space:nowrap;line-height:1.1}.sleep-clock-center em{font-size:16px;font-weight:400;font-style:normal;letter-spacing:0}.sleep-clock-center small{font-size:10px;color:#92a6c2}
.sleep-clock-handle{width:44px;height:44px;box-sizing:border-box;border:5px solid #142132;border-radius:50%;background:var(--clock-bed);color:#101724;position:absolute;transform:translate(-50%,-50%);display:grid;place-items:center;cursor:grab;z-index:2;touch-action:none}.sleep-clock-handle svg{width:22px;height:22px;pointer-events:none}.sleep-clock-handle.is-wake{background:var(--clock-wake)}.sleep-clock-handle.is-empty{background:#142132;color:var(--clock-bed);box-shadow:inset 0 0 0 1px currentColor}.sleep-clock-handle.is-wake.is-empty{color:var(--clock-wake)}.sleep-clock-handle:active{cursor:grabbing}.sleep-clock-handle:focus-visible{outline:2px solid #e9f0fc;outline-offset:3px;z-index:3}
.sleep-clock-values{display:grid;grid-template-columns:1fr 1fr;gap:10px}.sleep-clock-value{display:flex;gap:12px;align-items:center;text-align:left;padding:11px 14px;min-height:76px;border:1px solid #34445c;border-radius:14px;background:transparent;color:#aebed3;cursor:pointer;font:inherit}.sleep-clock-value svg{width:23px;height:23px;flex:none;color:var(--clock-bed)}.sleep-clock-value.is-wake svg{color:var(--clock-wake)}.sleep-clock-value span{font-size:12px;line-height:1.4}.sleep-clock-value b{display:block;font-size:26px;font-weight:600;letter-spacing:-.04em;font-variant-numeric:tabular-nums;color:#e9f0fc}.sleep-clock-value[aria-pressed=true]{border-color:var(--clock-bed);background:#b9a5ef09}.sleep-clock-value.is-wake[aria-pressed=true]{border-color:var(--clock-wake);background:#efbc7909}.sleep-clock-help{font-size:12px!important;text-align:center;color:#9aacc5;margin:12px 0 4px!important;line-height:1.5}
.d-sleep .d-sleep-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.d-sleep .d-sleep-result:empty{display:none}
@media(max-width:450px){.sleep-clock-face{max-width:284px;margin-bottom:8px}.sleep-clock-values{gap:8px}.sleep-clock-value{padding:9px 10px;gap:8px}.sleep-clock-value b{font-size:24px}.sleep-clock-center>span{font-size:11px}.sleep-clock-center strong{font-size:28px}.sleep-clock-help{font-size:11px!important}}
@media(prefers-reduced-motion:reduce){.sleep-clock *{animation:none!important;transition:none!important}}
body[data-motion="reduced"] .sleep-clock *{animation:none!important;transition:none!important}
/* The sky follows the selected time; the time values stay on a calm dark foreground. */
.sleep-clock-sky{position:absolute;inset:22%;border-radius:50%;overflow:hidden;pointer-events:none;isolation:isolate;background:#101c31}.sleep-clock-sky>div,.sleep-clock-sky>svg{position:absolute;inset:0;width:100%;height:100%}.sleep-clock-sky>div{transition:opacity .65s ease}.clock-sky-night{background:linear-gradient(#10152d,#253756);opacity:var(--sky-night)}.clock-sky-dawn{background:linear-gradient(#3b426b,#b8857d);opacity:var(--sky-dawn)}.clock-sky-day{background:linear-gradient(#315a83,#77a6bf);opacity:var(--sky-day)}.clock-sky-dusk{background:linear-gradient(#3d3256,#a26669);opacity:var(--sky-dusk)}
.sleep-clock-sky>.clock-sky-stars{opacity:var(--sky-night);transition:opacity .7s ease}.sleep-clock-sky>.clock-sky-clouds{fill:#cddfeb;opacity:calc(.15 + var(--sky-light)*.2);transform:translateX(var(--sky-travel));transition:transform .8s ease,opacity .7s ease}.clock-sky-sun,.clock-sky-moon{position:absolute;width:24px;height:24px;right:23%;top:12%;transition:opacity .65s ease,transform .65s ease}.clock-sky-sun{border-radius:50%;background:#f4d6a0;box-shadow:0 0 15px #ffe2b644;opacity:var(--sky-light);transform:translateY(calc((1 - var(--sky-light))*8px)) scale(calc(.75 + var(--sky-light)*.25))}.clock-sky-moon{opacity:var(--sky-night);transform:translateY(calc((1 - var(--sky-night))*-8px)) rotate(calc((1 - var(--sky-night))*-30deg))}.clock-sky-moon svg{width:100%;height:100%}.sleep-clock-sky>.clock-sky-shade{background:radial-gradient(ellipse at 50% 56%,#0b142070 10%,#0b142020 76%)}.sleep-clock-center{z-index:1;text-shadow:0 1px 8px #07111bcc}.sleep-clock-center>span{color:#e4eaf5}.sleep-clock-center small{color:#c1d1e5}

.sleep-clock-tools{text-align:center}.sleep-clock-reset{min-height:44px;font-size:12px}.sleep-clock-reset[hidden]{display:none}.sleep-clock-value:focus-visible{outline:2px solid #8db5ff;outline-offset:3px}