body {
font-family: system-ui, -apple-system, BlinkMacSystemFont, “Segoe UI”, sans-serif;
margin: 20px;
max-width: 900px;
line-height: 1.5;
}
h1, h2 {
margin-bottom: 0.25em;
}
#controls {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px 24px;
margin-bottom: 20px;
padding: 12px;
border: 1px solid #ccc;
border-radius: 8px;
background: #fafafa;
}
#controls label {
font-weight: 600;
display: block;
margin-bottom: 4px;
}
#controls .control-group {
font-size: 0.95rem;
}
input[type=”range”] {
width: 100%;
}
select, button {
padding: 4px 6px;
font-size: 0.95rem;
}
#runBtn {
padding: 8px 12px;
border-radius: 6px;
border: none;
background: #00539b;
color: white;
cursor: pointer;
font-weight: 600;
justify-self: flex-start;
}
#runBtn:hover {
background: #003e73;
}
#graphWrapper {
margin: 20px 0;
text-align: center;
}
#summary, #stages {
padding: 12px;
border-radius: 8px;
margin-bottom: 16px;
font-size: 0.95rem;
}
#summary {
border: 1px solid #d0ebff;
background: #f0f8ff;
}
#stages {
border: 1px solid #e0e0e0;
background: #fdfdfd;
}
.score-badge {
display: inline-block;
padding: 4px 8px;
border-radius: 999px;
font-size: 0.85rem;
margin: 2px 4px 2px 0;
background: #eee;
}
table {
width: 100%;
border-collapse: collapse;
margin-top: 8px;
font-size: 0.9rem;
}
th, td {
border: 1px solid #ddd;
padding: 4px 6px;
text-align: center;
}
th {
background: #f5f5f5;
}
.hint {
font-size: 0.85rem;
color: #555;
margin-top: 4px;
}

Sleep & Circadian Rhythm Simulator

Experiment with bedtime, sleep duration, light exposure, and time-zone/shift changes.
See how they affect your internal clock, sleep quality, and daytime alertness.

Controls

// Utility functions
function clamp(value, min, max) {
return Math.max(min, Math.min(max, value));
}

function formatClock(hours) {
const totalMinutes = Math.round(hours * 60);
let h24 = Math.floor((totalMinutes / 60) % 24);
let m = totalMinutes % 60;
const suffix = h24 >= 12 ? “PM” : “AM”;
let h12 = h24 % 12;
if (h12 === 0) h12 = 12;
const mStr = m.toString().padStart(2, “0”);
return `${h12}:${mStr} ${suffix}`;
}

function circadianAlertness(t, phaseShift) {
// t = local clock hour (0–24)
//