:root { --bg:#20251f; --panel:#292f27; --ink:#f1efde; --muted:#aaaF9b; --accent:#d8df9a; --line:#424a3d; --orange:#e4af79; --blue:#8ac5c4; }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:radial-gradient(ellipse at 90% 0%,#38412c55,transparent 60%),var(--bg); font-family:Verdana,sans-serif; font-size:13px; }
button,input,select { font:inherit; }
button { cursor:pointer; border:1px solid var(--accent); background:var(--accent); color:#20251f; border-radius:6px; padding:10px 16px; }
button:disabled { opacity:.5; cursor:wait; }
button:focus-visible,input:focus-visible,select:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
input,select { border:1px solid var(--line); border-radius:5px; background:#20251f; color:var(--ink); padding:9px; }
.topbar { display:flex; align-items:center; gap:30px; padding:18px 28px; border-bottom:1px solid var(--line); }
.brand { font-family:Georgia,serif; font-size:29px; letter-spacing:-1.2px; }
.brand span { display:block; margin-top:3px; font:10px Verdana,sans-serif; letter-spacing:.8px; color:var(--muted); }
.info { display:flex; gap:28px; margin-left:auto; color:var(--muted); }
.info b { display:block; margin-top:3px; color:var(--ink); font:24px monospace; }
.quiet { color:var(--muted); border-color:var(--line); background:transparent; }
.workspace { display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:28px; padding:26px 28px; max-width:1800px; margin:auto; }
.monitor { min-width:0; display:flex; flex-direction:column; }
.section-heading,.stage-heading { display:flex; align-items:center; justify-content:space-between; gap:14px; }
.eyebrow { color:var(--accent); font-size:10px; letter-spacing:2px; }
h1,h2 { font-family:Georgia,serif; font-weight:400; }
h1 { font-size:32px; margin:10px 0 20px; letter-spacing:-.7px; }
.chip { border:1px solid var(--line); color:var(--muted); border-radius:20px; padding:7px 10px; font-size:10px; white-space:nowrap; }
.chip.stale { color:var(--orange); border-color:var(--orange); }
.controlbar { display:flex; align-items:center; justify-content:space-between; gap:15px; margin-bottom:16px; color:var(--muted); font-size:11px; }
.controlbar label { display:flex; align-items:center; gap:10px; }
.controlbar { flex-wrap:wrap; }
.numeric-settings { position:relative; flex:0 0 auto; }
.numeric-settings summary { cursor:pointer; color:var(--ink); padding:9px 12px; border:1px solid var(--line); border-radius:5px; }
.numeric-panel { position:absolute; z-index:20; top:calc(100% + 8px); right:0; width:330px; max-width:calc(100vw - 32px); background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:14px; box-shadow:0 12px 30px #0005; }
.numeric-panel .limits-form { margin:0; display:grid; gap:12px; }
.numeric-panel .limits-form label { display:flex; gap:4px; justify-content:space-between; width:100%; }
.numeric-panel .limits-form input { width:62px; margin:0; }
.numeric-panel p { margin:12px 0 0; color:var(--muted); font-size:10px; line-height:1.6; }
#charts { display:flex; flex-direction:column; gap:18px; height:max(570px,calc(100dvh - 290px)); min-height:570px; }
.chart { flex: 1 1 0; min-height:0; position:relative; border:1px solid var(--line); border-radius:12px; overflow:hidden; background:var(--panel); }
.threshold { position:absolute; z-index:5; height:26px; padding:0; border:0; border-radius:0; background:transparent; color:var(--accent); cursor:ns-resize; touch-action:none; text-align:left; pointer-events:none; }
.threshold::before { content:''; position:absolute; top:12px; left:0; right:0; border-top:1px dashed currentColor; }
.threshold span { position:relative; background:#30382b; padding:5px 8px; border:1px solid currentColor; border-radius:4px; font:11px monospace; pointer-events:auto; }
.threshold.upper { color:var(--orange); text-align:right; }
.limits-form { display:flex; flex-wrap:wrap; align-items:center; gap:14px; margin-top:16px; font-size:11px; color:var(--muted); }
.limits-form input { width:68px; padding:7px 4px; margin:0 4px; }
.limits-form button { margin-left:auto; padding:8px 12px; }
#save-status { min-height:30px; padding-top:12px; color:var(--muted); font-size:11px; }
#save-status.error { color:#f0ae95; }
#save-status:empty { display:none; }
.development { border-left:1px solid var(--line); padding-left:28px; animation:reveal .7s ease both; }
.day-counter { display:flex; align-items:center; gap:16px; margin-top:24px; }
.day-counter strong { font:80px/.95 Georgia,serif; letter-spacing:-5px; color:var(--accent); }
.day-counter div { font-size:16px; line-height:1.7; }
.day-counter span { color:var(--muted); font-size:12px; }
.egg-illustration { max-width:270px; margin:8px auto 20px; background:radial-gradient(ellipse,#a8ad7330,transparent 68%); }
.egg-illustration img { width:100%; height:auto; object-fit:contain; }
.diagram-caption { display:block; text-align:center; font-size:9px; color:var(--muted); }
h2 { font-size:25px; line-height:1.2; margin:0 0 12px; }
#stage-description { color:#c8cbb8; line-height:1.7; margin-bottom:20px; min-height:65px; }
.timeline { display:grid; grid-template-columns:repeat(7,1fr); gap:8px; margin:20px 0; }
.timeline button { text-align:center; padding:6px 0; color:var(--muted); background:transparent; border:1px solid var(--line); border-radius:4px; font:11px monospace; }
.timeline .past { background:#3c4534; color:#c1cba2; }
.timeline .today { border-color:var(--accent); color:var(--accent); }
.timeline .selected { background:var(--accent); color:var(--bg); border-color:var(--accent); }
.return-today { padding:4px 8px; font-size:9px; margin-top:5px; color:var(--accent); background:transparent; border-color:var(--line); }
.milestones { display:grid; gap:14px; border-top:1px solid var(--line); padding-top:18px; }
.milestones span { display:block; color:var(--muted); font-size:10px; margin-bottom:5px; }
.milestones strong { font-weight:400; }
.note { color:var(--muted); font-size:10px; line-height:1.8; margin-top:20px; }
.source { color:var(--accent); font-size:9px; line-height:1.7; }
.source a { color:inherit; }
.login-page { min-height:100dvh; display:grid; place-items:center; background:radial-gradient(ellipse at 50% 35%,#4b593444,transparent 60%),var(--bg); }
.login-card { width:min(420px,90vw); padding:38px; border:1px solid var(--line); border-radius:16px; background:var(--panel); visibility:hidden; }
.ready .login-card { visibility:visible; animation:reveal .5s ease; }
.login-card h1 { font-size:60px; margin:18px 0; }
.login-card p { color:var(--muted); line-height:1.8; }
.login-card form { display:grid; gap:12px; margin-top:30px; }
#login-status { color:var(--orange); min-height:20px; line-height:1.6; }
@keyframes reveal { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }
@media(max-width:1100px) { .workspace { grid-template-columns:minmax(0,1fr) 285px; gap:20px; padding:20px; } .development { padding-left:20px; } .controlbar { align-items:flex-start; flex-direction:column; } .info { gap:16px; } .topbar { padding:15px 20px; } }
@media(max-width:760px) { .topbar { flex-wrap:wrap; gap:15px; } .brand { flex:1; } .info { order:3; width:100%; margin:0; justify-content:space-between; } .info b { font-size:22px; } .workspace { display:flex; flex-direction:column; padding:18px 12px; } .development { border-left:0; border-top:1px solid var(--line); padding:24px 8px; } h1 { font-size:25px; } .section-heading { align-items:flex-start; } .section-heading .chip { margin-top:25px; } #charts { height:650px; } .controlbar label { flex-wrap:wrap; } .limits-form { gap:10px; } .limits-form label { width:100%; } .limits-form button { margin:0; } .egg-illustration { max-width:240px; } .day-counter { justify-content:center; } }
/* On desktop, distribute the actual remaining viewport instead of summing
   fixed chart and illustration heights. Short/zoomed windows retain scrolling. */
@media(min-width:761px) and (min-height:620px) {
  body:not(.login-page) { height:100dvh; display:flex; flex-direction:column; }
  .topbar { flex:0 0 auto; padding:12px 20px; }
  .brand { font-size:26px; }
  .info b { font-size:22px; }
  .workspace { flex:1 1 0; min-height:0; width:100%; margin:0 auto; padding:12px 20px; gap:22px; grid-template-rows:minmax(0,1fr); }
  .monitor { min-height:0; }
  h1 { font-size:28px; margin:7px 0 12px; }
  .controlbar { margin-bottom:12px; }
  #charts { flex:1 1 0; min-height:0; height:auto; gap:12px; }
  .limits-form { gap:10px; margin-top:10px; }
  #save-status { flex:0 0 auto; min-height:28px; padding-top:8px; line-height:1.4; }
  .development { min-height:0; display:grid; grid-template-rows:auto auto minmax(50px,1fr) auto auto auto auto auto auto; gap:8px; padding-left:22px; }
  .day-counter { margin:0; gap:12px; }
  .day-counter strong { font-size:60px; letter-spacing:-3px; }
  .day-counter div { font-size:14px; line-height:1.4; }
  .egg-illustration { min-height:0; height:100%; width:100%; margin:0; justify-self:center; display:flex; flex-direction:column; }
  .egg-illustration img { flex:1 1 0; min-height:0; height:0; width:100%; }
  .diagram-caption { flex:0 0 auto; line-height:12px; }
  h2 { font-size:23px; margin:0; }
  #stage-description { min-height:0; margin:0; font-size:11px; line-height:1.5; }
  .timeline { gap:4px; margin:0; }
  .timeline button { padding:4px 0; font-size:10px; }
  .milestones { grid-template-columns:1fr 1fr; gap:10px; padding-top:8px; font-size:11px; line-height:1.4; }
  .milestones span { font-size:9px; margin-bottom:3px; }
  .note { margin:0; font-size:9px; line-height:1.5; }
  .source { line-height:1.4; }
}
@media(prefers-reduced-motion:reduce) { * { animation:none!important; transition:none!important; } }
@media(max-width:1100px) { .numeric-panel { left:0; right:auto; } }