*{box-sizing:border-box}body{margin:0;background:#111;color:#ddd;font:14px system-ui,sans-serif}
header{padding:6px 12px;display:flex;gap:16px;align-items:baseline;flex-wrap:wrap}h1{font-size:18px;margin:0}.hint{color:#888;font-size:12px}
#sim{position:relative;height:62vh;background:#000}#c{width:100%;height:100%;display:block;cursor:crosshair}
#legend{position:absolute;right:14px;bottom:10px;text-align:center;color:#fff;font-size:12px;pointer-events:none}
#legend-bar{height:2px;background:#fff;border-left:2px solid #fff;border-right:2px solid #fff;margin-bottom:3px}
#overlay{position:absolute;left:10px;top:8px;color:#aaa;font-size:12px;pointer-events:none;white-space:pre}
.panel{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;padding:10px 12px;background:#1b1b1b;border-bottom:1px solid #333}
input[type=number]{width:9em;background:#222;color:#eee;border:1px solid #444;padding:2px 4px}select{background:#222;color:#eee;border:1px solid #444}
#time{width:200px;vertical-align:middle}button{padding:6px 14px;border:0;border-radius:4px;background:#444;color:#fff;cursor:pointer}
#start{background:#2e9e44}#start:disabled{background:#555;color:#999;cursor:not-allowed}#start.running{background:#c0392b}
#readout{font-family:monospace;font-size:12px;color:#aaa;width:100%}
#masses{display:flex;flex-wrap:wrap;gap:10px;padding:10px 12px}
.mass{background:#1b1b1b;border:1px solid #333;border-left:6px solid;border-radius:4px;padding:8px;display:grid;grid-template-columns:auto 8em auto 8em;align-items:center;gap:4px 6px;font-size:12px}
.mass h3{grid-column:1/-1;margin:0;font-size:13px;display:flex;justify-content:space-between}.mass input{width:7.5em}
.mass.ejected{opacity:.45}.mass button{padding:2px 8px;font-size:11px;background:#633}
#sim{background-size:cover;background-position:center}#c{position:relative;z-index:1}
#legend,#overlay,#tip{z-index:2}
#tip{position:absolute;display:none;background:rgba(20,20,20,.9);border:1px solid #555;padding:4px 8px;font-size:12px;pointer-events:none;border-radius:3px}
#fade{width:100px;vertical-align:middle}
.mass select{width:9em;font-size:11px}
#era{position:absolute;top:8px;left:50%;transform:translateX(-50%);z-index:2;font:600 18px system-ui;color:#ffd27a;text-shadow:0 0 6px #000;display:none;pointer-events:none}

.mass input.name{width:11em;font-weight:600;background:transparent;color:inherit;border:1px solid transparent}.mass input.name:hover,.mass input.name:focus{border-color:#555}
#warn{position:absolute;top:36px;left:50%;transform:translateX(-50%);z-index:3;display:none;background:rgba(150,20,20,.92);color:#fff;font:600 14px system-ui;padding:6px 14px;border-radius:4px;cursor:pointer;box-shadow:0 0 10px #000}
.esc-label{position:absolute;z-index:2;display:none;transform:translateX(-50%);color:#ff4a4a;font:600 12px system-ui;text-shadow:0 0 4px #000;pointer-events:none;white-space:nowrap}
.music{display:inline-flex;align-items:center;gap:6px}#musicVol{width:80px;vertical-align:middle}#musicSkip{padding:2px 8px}#musicNow{font-size:11px;color:#9ab;max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}