:root{--bg:#FAF8F1;--panel:#F2F0E4;--text:#2B2E28;--muted:#6E7566;--matcha:#6E9460;--deep:#4C6B42;
  --soft:#AFC7A3;--rule:#E7E2D4;--track:#E3E0D1;--over:#B64E3A;--ref:#C5BCA2;--focus:#4C6B42}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font:16px/1.6 "DM Sans",ui-sans-serif,system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
main{max-width:1040px;margin:0 auto;padding:36px 16px 80px}
h1,h2,h3{font-family:"Newsreader",Georgia,serif;font-weight:500;letter-spacing:-.01em;margin:0}
h1{font-size:40px;line-height:1.1;margin:0 0 6px}
h2{font-size:22px;margin:40px 0 10px;padding-bottom:8px;border-bottom:1px solid var(--rule)}
p{margin:0 0 10px}
.lede{color:var(--muted);max-width:62ch;margin-bottom:14px}
a{color:var(--matcha);text-decoration:none;border-bottom:1.5px solid var(--soft)}
a:hover{border-bottom-color:var(--matcha)}
.num{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-variant-numeric:tabular-nums}
small,.small{font-size:13px;color:var(--muted)}

/* controls */
.controls{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;margin:14px 0 8px}
.ctl{display:flex;align-items:center;gap:10px;min-width:0}
.ctl label{font-size:14px;color:var(--muted);white-space:nowrap}
.ctl output{min-width:5ch;font:14px ui-monospace,Menlo,Consolas,monospace;color:var(--deep)}
input[type=range]{width:150px;max-width:40vw;accent-color:var(--matcha);margin:0}
button{font:500 14px "DM Sans",system-ui,sans-serif;color:var(--text);background:var(--panel);border:1px solid var(--rule);
  border-radius:6px;padding:7px 12px;cursor:pointer}
button:hover{border-color:var(--soft);background:#ECE9DB}
button.primary{background:var(--matcha);color:#fff;border-color:var(--matcha)}
button.primary:hover{background:var(--deep);border-color:var(--deep)}
button:focus-visible,[tabindex]:focus-visible,input:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.msg{min-height:1.6em;margin:6px 0 10px;font-size:14.5px;color:var(--over)}
.msg.ok{color:var(--deep)}

/* the board */
.board{display:flex;gap:8px;align-items:flex-end;overflow-x:auto;overflow-y:hidden;padding:14px 4px 8px;
  background:var(--panel);border-radius:8px;scrollbar-width:thin;-webkit-overflow-scrolling:touch}
.station{flex:0 0 auto;width:64px;display:flex;flex-direction:column;align-items:center;gap:4px}
.station .col{position:relative;width:100%;height:var(--colh);background:var(--track);border-radius:5px;overflow:visible}
.station .col.over{outline:2px solid var(--over)}
.station .col.target{outline:2px dashed var(--matcha);outline-offset:-2px}
.station .stack{position:absolute;left:0;right:0;bottom:0;display:flex;flex-direction:column-reverse}
.takt{position:absolute;left:-3px;right:-3px;border-top:2px dashed var(--deep);pointer-events:none}
.station .hdr{font:12.5px ui-monospace,Menlo,Consolas,monospace;color:var(--muted);text-align:center;white-space:nowrap}
.station .hdr b{color:var(--text);font-weight:500}
.station .hdr.over b{color:var(--over)}
.task{display:flex;align-items:center;justify-content:center;gap:2px;height:var(--h);min-height:14px;width:100%;
  background:var(--soft);border-top:1px solid var(--bg);font:12px ui-monospace,Menlo,Consolas,monospace;color:var(--text);
  cursor:grab;user-select:none;-webkit-user-select:none;touch-action:none;transition:background .15s}
.task:hover{background:#9DBB8F}
.task.over{background:var(--over);color:#fff}
.task.dragging{opacity:.35}
.task.sel{box-shadow:inset 0 0 0 2px var(--deep)}
.task.ghost{position:fixed;z-index:10;pointer-events:none;opacity:.9;box-shadow:0 6px 18px rgba(43,46,40,.25);border-radius:3px}
.task .t{opacity:.75}
.tray{margin:8px 0 0;padding:10px;background:var(--panel);border-radius:8px;min-height:52px;display:flex;flex-wrap:wrap;gap:6px;align-items:flex-start}
.tray.target{outline:2px dashed var(--matcha);outline-offset:-2px}
.tray .task{width:auto;height:auto;min-height:0;padding:5px 9px;border-radius:4px;border:0}
.tray .label{width:100%;font-size:13px;color:var(--muted)}

/* metrics */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:8px;margin:12px 0}
.tile{background:var(--panel);border-radius:8px;padding:10px 12px}
.tile .k{font-size:12.5px;color:var(--muted)}
.tile .v{font:500 22px/1.2 ui-monospace,Menlo,Consolas,monospace;color:var(--deep)}
.tile .v.bad{color:var(--over)}
.tile .s{font-size:12px;color:var(--muted)}
.compare{margin:10px 0 0;padding:14px 16px;background:var(--panel);border-left:4px solid var(--matcha);border-radius:8px;display:none}
.compare.show{display:block}
.compare .big{font:500 26px/1.2 "Newsreader",Georgia,serif;margin:0 0 4px}
.compare .big .num{color:var(--deep)}
.legend{font-size:13px;color:var(--muted);margin:6px 0 0}

/* simulation bars */
.bars{margin:10px 0}
.bar{display:flex;align-items:center;gap:11px;margin:0 0 8px}
.bar .lbl{font:12.5px ui-monospace,Menlo,Consolas,monospace;color:var(--muted);width:92px;flex:none}
.bar .track{flex:1;height:16px;background:var(--track);border-radius:3px;overflow:hidden}
.bar .fill{display:block;height:100%;min-width:3px;background:var(--matcha);border-radius:3px;transition:width .3s cubic-bezier(.4,0,.2,1)}
.bar .fill.ref{background:var(--ref)}
.bar .val{font:12.5px ui-monospace,Menlo,Consolas,monospace;color:var(--deep);width:84px;text-align:right;flex:none}
.foot{margin-top:40px;font-size:13.5px;color:var(--muted)}
@media (max-width:600px){h1{font-size:32px} .station{width:44px} .task{font-size:10.5px} .station .hdr{font-size:11px} .bar .lbl{width:70px} .bar .val{width:70px}}