.sleep-visual{position:relative;margin:0 0 28px;overflow:hidden;aspect-ratio:16/10;border-radius:5px;background:#07131d}
.sleep-visual>img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 53%}
.sleep-led{position:absolute;right:12px;bottom:12px;left:12px;padding:11px 13px 10px;border:1px solid rgba(97,235,240,.38);border-radius:5px;background:rgba(5,18,29,.82);box-shadow:0 0 18px rgba(34,224,231,.16),inset 0 0 20px rgba(34,224,231,.06);backdrop-filter:blur(8px);color:#eafafa}
.sleep-led-heading,.sleep-led-stats{display:flex;align-items:center;justify-content:space-between;gap:10px}
.sleep-led-heading{color:#94b4bc;font-size:9px;font-weight:700;line-height:1.2}
.sleep-led-stats{margin:3px 0 7px}
.sleep-led-stats>strong{color:#7cf5ef;font-size:24px;line-height:1.1;text-shadow:0 0 12px rgba(72,246,237,.35)}
.sleep-led-stats>span{color:#bbcbcf;font-size:12px}
.sleep-led-stats b{color:#fff;font-size:15px}
.sleep-graph{display:flex;align-items:center;gap:3px;height:19px;padding:0 1px}
.sleep-graph i{flex:1;border-radius:2px 2px 1px 1px;box-shadow:0 0 7px currentColor}
.sleep-graph .rem{height:10px;background:#e5a9ff;color:#ca72ff}
.sleep-graph .light{height:15px;background:#62e5e5;color:#2bd9df}
.sleep-graph .deep{height:19px;background:#668cff;color:#5076ff}
.sleep-legend{display:flex;gap:14px;margin-top:6px;color:#c6d4d6;font-size:10px}
.sleep-legend span{display:flex;align-items:center;gap:5px}
.sleep-legend i{width:7px;height:7px;border-radius:50%;box-shadow:0 0 6px currentColor}
.sleep-legend .rem{background:#e5a9ff;color:#ca72ff}
.sleep-legend .light{background:#62e5e5;color:#2bd9df}
.sleep-legend .deep{background:#668cff;color:#5076ff}
@media(max-width:420px){.sleep-visual{aspect-ratio:1.2}.sleep-visual>img{object-position:58% center}.sleep-led{right:8px;bottom:8px;left:8px;padding:9px 10px 8px}.sleep-led-stats>strong{font-size:22px}.sleep-legend{gap:12px}}