.sleep-clock{position:relative;padding:32px 5.13% 24px;color:inherit}.sleep-clock--no-top{padding-top:0}.sleep-clock--no-bottom{padding-bottom:0}.sleep-clock__inner{display:flex;flex-direction:column;gap:10px;max-width:1100px;margin:0 auto}.sleep-clock__headings{display:flex;flex-direction:column;gap:10px}.sleep-clock__heading{display:flex;align-items:center}.sleep-clock__heading,.sleep-clock__heading *{font-family:Red Hat Display,sans-serif!important;font-style:normal!important;font-weight:400!important;font-size:40px!important;line-height:55px!important;letter-spacing:-1.08px!important;color:var(--sleep-text, #ffffff)!important}.sleep-clock__heading strong,.sleep-clock__heading b{font-weight:700!important}.sleep-clock__heading p{margin:0}.sleep-clock__heading--start{text-align:left;align-self:flex-start;max-width:100%}.sleep-clock__heading--center{text-align:center;align-self:center;max-width:100%}.sleep-clock__heading--end{text-align:right;align-self:flex-end;max-width:100%}.sleep-clock__status-row{display:flex;align-items:center;gap:24px;flex-wrap:wrap}.sleep-clock__status{display:inline-flex;align-items:center;padding:6px 14px;border-radius:999px;background:#16a34a;color:#fff;font-weight:700;font-size:14px;line-height:1;border:1px solid rgba(0,0,0,.12);box-shadow:0 1px 2px #0000002e}.sleep-clock__status[data-state=compromised]{background:#dc2626;color:#fff}.sleep-clock__status[data-state=borderline]{background:#16a34a;color:#fff}.sleep-clock__status[data-state=optimal]{background:#2563eb;color:#fff}.sleep-clock__time{display:flex;flex-direction:column;gap:2px;line-height:1.2}.sleep-clock__time-label{font-size:13px;opacity:.7;text-align:center}.sleep-clock__time-value{font-size:18px;font-weight:700;color:inherit;font-family:Red Hat Display,sans-serif}.sleep-clock__body{display:grid;grid-template-columns:minmax(80px,110px) 1fr;grid-template-rows:auto auto;gap:16px;align-items:stretch}@media(max-width:1023px){.sleep-clock__body>.sleep-clock__track-wrap{grid-column:1;grid-row:1 / span 2}.sleep-clock__body>.sleep-clock__cards--left{grid-column:2;grid-row:1}.sleep-clock__body>.sleep-clock__cards--right{grid-column:2;grid-row:2}}.sleep-clock__track-wrap{position:relative;display:flex;flex-direction:column;align-items:center;padding:18px 0;-webkit-user-select:none;user-select:none;touch-action:none}.sleep-clock__period{font-size:13px;font-weight:600;opacity:.6;letter-spacing:.1em}.sleep-clock__period--top{margin-bottom:8px}.sleep-clock__period--bottom{margin-top:8px}.sleep-clock__track{position:relative;width:100%;max-width:80px;height:520px;background:color-mix(in srgb,currentColor 6%,transparent)}.sleep-clock__ticks{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;justify-content:space-between;pointer-events:none}.sleep-clock__ticks span{display:block;height:1px;width:70%;margin:0 auto;background:color-mix(in srgb,currentColor 55%,transparent)}.sleep-clock__ticks span:nth-child(6n+1){background:currentColor;height:2px;width:100%;opacity:.9}.sleep-clock__labels{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}.sleep-clock__labels span{position:absolute;left:50%;transform:translate(-50%,-50%);font-size:18px;font-weight:600;color:currentColor;background:var(--sleep-bg, #0c1116);padding:2px 6px;line-height:1}.sleep-clock__labels span[data-clock-label-pos="0"]{top:0}.sleep-clock__labels span[data-clock-label-pos="0.25"]{top:25%}.sleep-clock__labels span[data-clock-label-pos="0.5"]{top:50%}.sleep-clock__labels span[data-clock-label-pos="0.75"]{top:75%}.sleep-clock__labels span[data-clock-label-pos="1"]{top:100%}.sleep-clock__window{position:absolute;left:50%;transform:translate(-50%);width:6px;border-radius:6px;background:linear-gradient(180deg,color-mix(in srgb,currentColor 70%,transparent),color-mix(in srgb,currentColor 25%,transparent));pointer-events:none}.sleep-clock__handle{position:absolute;left:50%;top:0;transform:translate(-50%,-50%);width:36px;height:36px;border-radius:50%;background:#fff;border:0;cursor:grab;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px #00000059;touch-action:none;padding:0}.sleep-clock__handle:active{cursor:grabbing}.sleep-clock__handle:focus-visible{outline:2px solid #22c55e;outline-offset:3px}.sleep-clock__handle--wake{background:#fff;border:1px solid rgba(0,0,0,.08);color:#0c1116}.sleep-clock__handle--sleep{background:color-mix(in srgb,currentColor 22%,transparent);border:1px solid color-mix(in srgb,currentColor 35%,transparent)}.sleep-clock__handle .sleep-clock__handle-icon{width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center;color:currentColor}.sleep-clock__handle .sleep-clock__handle-icon svg,.sleep-clock__handle .sleep-clock__handle-icon i{width:100%;height:100%}.sleep-clock__handle--sleep .sleep-clock__handle-icon svg{fill:currentColor}.sleep-clock__handle--wake .sleep-clock__handle-icon svg{stroke:currentColor}.sleep-clock__handle--sleep .sleep-clock__handle-icon svg,.sleep-clock__handle--sleep .sleep-clock__handle-icon i{width:100%;height:100%;fill:currentColor}.sleep-clock__cards{display:flex;flex-direction:column;gap:14px;min-width:0}.sleep-clock__status-card{background:#ffffff0a;border-radius:14px;padding:14px 16px}.sleep-clock__status-card-label{display:inline-block;padding:4px 10px;border-radius:999px;background:#ffffff14;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;margin-bottom:8px}.sleep-clock__status-card-hours{display:flex;align-items:baseline;gap:6px;margin-bottom:4px}.sleep-clock__status-card-hours strong{font-family:Red Hat Display,sans-serif;font-size:32px;font-weight:700;color:#16a34a;line-height:1}.sleep-clock__status-card[data-state=compromised] .sleep-clock__status-card-hours strong{color:#dc2626}.sleep-clock__status-card[data-state=borderline] .sleep-clock__status-card-hours strong{color:#16a34a}.sleep-clock__status-card[data-state=optimal] .sleep-clock__status-card-hours strong{color:#2563eb}.sleep-clock__status-card-hours span{font-size:16px;font-weight:600}.sleep-clock__status-card-note{margin:0;font-size:13px;opacity:.7}.sleep-clock__card{background:transparent}.sleep-clock__card-eyebrow{display:block;font-size:13px;font-weight:600;opacity:.85;margin-bottom:6px}.sleep-clock__card-heading{margin:0 0 6px;color:var(--sleep-text, #ffffff);font-family:Red Hat Display,sans-serif;font-size:14px;font-weight:600;line-height:1.2}.sleep-clock__card-body{border:1px solid var(--sleep-clock-status, rgba(34, 197, 94, .65));border-radius:12px;padding:10px 12px;font-size:12px;line-height:1.4;opacity:.95;transition:border-color .25s ease}.sleep-clock__card-body p{margin:0}.sleep-clock[data-state=compromised]{--sleep-clock-status: rgba(220, 38, 38, .75)}.sleep-clock[data-state=borderline]{--sleep-clock-status: rgba(22, 163, 74, .75)}.sleep-clock[data-state=optimal]{--sleep-clock-status: rgba(37, 99, 235, .75)}.sleep-clock__card-heading[data-state],.sleep-clock__card-body[data-state]{display:none}.sleep-clock[data-state=compromised] .sleep-clock__card-heading[data-state=compromised],.sleep-clock[data-state=borderline] .sleep-clock__card-heading[data-state=borderline],.sleep-clock[data-state=optimal] .sleep-clock__card-heading[data-state=optimal],.sleep-clock[data-state=compromised] .sleep-clock__card-body[data-state=compromised],.sleep-clock[data-state=borderline] .sleep-clock__card-body[data-state=borderline],.sleep-clock[data-state=optimal] .sleep-clock__card-body[data-state=optimal]{display:block}.sleep-clock__sources-btn{-webkit-appearance:none;appearance:none;background:#fff;border:1px solid rgba(0,0,0,.08);border-radius:999px;padding:12px 18px;display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:14px;font-weight:500;color:#0c1116;cursor:pointer;width:100%;margin-top:8px}.sleep-clock__sources-btn:hover{background:#f5f5f5}.sleep-clock__sources-icon{width:24px;height:24px;border-radius:50%;background:#0c1116;color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:18px;line-height:1;font-weight:400}.sleep-clock__modal{position:fixed;top:0;right:0;bottom:0;left:0;z-index:90;display:flex;align-items:center;justify-content:center;padding:24px}.sleep-clock__modal[hidden]{display:none}.sleep-clock__modal-backdrop{position:absolute;top:0;right:0;bottom:0;left:0;background:#0009;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}.sleep-clock__modal-panel{position:relative;background:#dcdcdc;color:#111;border-radius:28px;padding:28px 24px 24px;max-width:380px;width:100%;max-height:85vh;overflow-y:auto;box-shadow:0 24px 60px #00000073}.sleep-clock__modal-close{position:absolute;top:16px;right:16px;-webkit-appearance:none;appearance:none;width:32px;height:32px;border-radius:50%;background:#22c55e;color:#fff;border:0;font-size:22px;line-height:1;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}.sleep-clock__modal-title{margin:0 0 12px;font-family:Red Hat Display,sans-serif;font-size:22px;font-weight:700}.sleep-clock__modal-list{margin:0;padding-left:1.2em;font-size:14px;line-height:1.5}.sleep-clock__modal-list li{margin-bottom:8px;font-style:italic}.sleep-clock__modal-list li a{color:#1f63ff;text-decoration:underline;font-style:normal}@media(min-width:768px){.sleep-clock{padding:56px 5% 40px}.sleep-clock__inner{gap:32px}.sleep-clock__heading{font-size:36px}.sleep-clock__body{grid-template-columns:120px 1fr;gap:28px}.sleep-clock__track{max-width:100px;height:620px}.sleep-clock__card-heading{font-size:15px}.sleep-clock__card-body{font-size:13px}}@media(min-width:1024px){.sleep-clock{padding:80px 64px 56px}.sleep-clock__heading{font-size:44px;line-height:1.15}.sleep-clock__inner{display:grid;grid-template-columns:minmax(0,1fr) max-content minmax(0,1fr);grid-template-rows:auto auto auto;grid-template-areas:"headtop   headtop   headtop" ".         status    ." "left      track     right" "sources   .         ." "headbot   headbot   headbot";column-gap:32px;row-gap:18px;align-items:start}.sleep-clock__headings--top{grid-area:headtop}.sleep-clock__headings--bottom{grid-area:headbot}.sleep-clock__headings--top{flex-direction:row;flex-wrap:nowrap;justify-content:space-between;align-items:start;gap:16px 32px}.sleep-clock__headings--top .sleep-clock__heading{flex:0 1 auto;align-self:auto}.sleep-clock__headings--top .sleep-clock__heading--start{text-align:left;max-width:40%}.sleep-clock__headings--top .sleep-clock__heading--end{text-align:right;max-width:60%}.sleep-clock__status-row{grid-area:status;display:grid;grid-template-columns:1fr 1fr;justify-items:center;align-items:center;column-gap:32px;row-gap:8px}.sleep-clock__status-row .sleep-clock__status{grid-column:1 / -1;grid-row:1}.sleep-clock__status-row .sleep-clock__time{grid-row:2}.sleep-clock__body{display:contents}.sleep-clock__cards--left{grid-area:left}.sleep-clock__cards--right{grid-area:right}.sleep-clock__track-wrap{grid-area:track}.sleep-clock__track{max-width:110px;height:720px}.sleep-clock__sources-btn{grid-area:sources;margin-top:8px}.sleep-clock__track-wrap{padding:40px;box-sizing:content-box}.sleep-clock__period{display:none}.sleep-clock__track.is-circular{--dial-size: clamp(260px, 28vw, 360px);--dial-radius: calc(var(--dial-size) / 2);--handle-radius: calc(var(--dial-size) * .292);--sleep-pos: 0;--wake-pos: 0;--sleep-angle: calc(var(--sleep-pos) * 360deg);--wake-angle: calc(var(--wake-pos) * 360deg);width:var(--dial-size);max-width:var(--dial-size);height:var(--dial-size);border-radius:50%;background:transparent;position:relative;overflow:visible}.sleep-clock__track.is-circular:before{content:"";position:absolute;top:14px;right:14px;bottom:14px;left:14px;border-radius:50%;border:1px solid color-mix(in srgb,currentColor 30%,transparent);pointer-events:none}.sleep-clock__track.is-circular:after{content:"";position:absolute;top:6px;right:6px;bottom:6px;left:6px;border-radius:50%;background:conic-gradient(from var(--sleep-deg, 0deg),color-mix(in srgb,currentColor 75%,transparent) 0deg,color-mix(in srgb,currentColor 75%,transparent) var(--arc-deg, 0deg),transparent 0);-webkit-mask:radial-gradient(circle,transparent 56%,#000 57%,#000 64%,transparent 65%);mask:radial-gradient(circle,transparent 56%,#000 57%,#000 64%,transparent 65%);pointer-events:none}.sleep-clock__track.is-circular .sleep-clock__ticks{top:6px;right:6px;bottom:6px;left:6px;border-radius:50%;display:block;background:repeating-conic-gradient(from -90deg,color-mix(in srgb,currentColor 45%,transparent) 0deg .4deg,transparent .4deg 6deg);-webkit-mask:radial-gradient(circle,transparent 67%,#000 68%,#000 72%,transparent 73%);mask:radial-gradient(circle,transparent 67%,#000 68%,#000 72%,transparent 73%)}.sleep-clock__track.is-circular .sleep-clock__ticks span{display:none}.sleep-clock__track.is-circular .sleep-clock__labels{top:0;right:0;bottom:0;left:0}.sleep-clock__track.is-circular .sleep-clock__labels span{position:absolute;background:transparent;padding:0;font-size:18px;font-weight:500;color:currentColor;transform:none}.sleep-clock__track.is-circular .sleep-clock__labels span[data-clock-label-pos="0"]{top:-32px;left:50%;right:auto;bottom:auto;transform:translate(-50%)}.sleep-clock__track.is-circular .sleep-clock__labels span[data-clock-label-pos="0.25"]{top:50%;right:-32px;left:auto;bottom:auto;transform:translateY(-50%)}.sleep-clock__track.is-circular .sleep-clock__labels span[data-clock-label-pos="0.5"]{bottom:-32px;top:auto;left:50%;right:auto;transform:translate(-50%)}.sleep-clock__track.is-circular .sleep-clock__labels span[data-clock-label-pos="0.75"]{top:50%;left:-32px;right:auto;bottom:auto;transform:translateY(-50%)}.sleep-clock__track.is-circular .sleep-clock__labels span[data-clock-label-pos="1"],.sleep-clock__track.is-circular .sleep-clock__window{display:none}.sleep-clock__track.is-circular .sleep-clock__handle{--pos: 0;top:50%;left:50%;margin:0;width:32px;height:32px;transform:translate(-50%,-50%) rotate(calc(var(--pos) * 360deg)) translateY(calc(-1 * var(--handle-radius))) rotate(calc(var(--pos) * -360deg))}.sleep-clock__track.is-circular .sleep-clock__handle--sleep .sleep-clock__handle-icon svg{fill:currentColor}.sleep-clock__track.is-circular .sleep-clock__handle--wake{background:#fff;color:#0c1116}}@media(prefers-reduced-motion:reduce){.sleep-clock__handle{transition:none}}
/*# sourceMappingURL=/cdn/shop/t/474/assets/sleep-lp-clock.css.map */