:root{color-scheme:dark;font-family:system-ui,sans-serif;color:#e8ebff;background:#0c0d19}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 10% 0%,#292044,transparent 60%)}header,main{max-width:1500px;margin:auto;padding:24px}header{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-bottom:0}.eyebrow{font-size:11px;letter-spacing:3px;color:#91e9ef}h1{font-size:30px;margin:8px 0}h1 span{display:block;font-weight:400;font-size:14px;color:#a9abc3;margin-top:8px}a{color:#a8eaff}section{background:#141625;border:1px solid #303248;border-radius:14px;padding:18px}button,select,input,.file-button{font:inherit;border:1px solid #42465f;border-radius:7px;color:inherit;background:#202337;padding:10px}button,.file-button{cursor:pointer;min-height:42px}button:hover,.file-button:hover{border-color:#80e9f2;background:#2c304a}button:disabled{opacity:.4;cursor:default}button.primary{background:#a748df;border-color:#c376f1;font-weight:700;min-width:135px}label{display:flex;flex-direction:column;gap:6px;font-size:12px;color:#bfc4df}input[type=number]{width:122px}input[type=range]{padding:0;accent-color:#77e0e7;max-width:120px}label.check{flex-direction:row;align-items:center;font-size:13px}label.check input{accent-color:#b46bea}h2{font-size:16px;margin:0 0 14px}small{color:#9c9fb8;font-weight:400}.toolbar,.transport,.fields,footer{display:flex;gap:12px;align-items:end;flex-wrap:wrap}.transport{margin-top:12px;align-items:center}output{font-variant-numeric:tabular-nums;font-size:22px;color:#85eaf3;min-width:120px}.timeline-panel{margin-top:16px}.timeline-heading{display:flex;align-items:center;justify-content:space-between;gap:16px}.timeline-heading p,.help{font-size:12px;color:#a5aac6;line-height:1.7}.timeline-heading h2{margin:0}canvas{width:100%;height:310px;display:block;border-radius:8px;touch-action:none;background:#0d101c}#scroll{width:100%;max-width:none;margin:16px 0}.legend{display:flex;flex-wrap:wrap;gap:20px;font-size:11px;color:#97a9c8}.gold{color:#ffd46c}.panels{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px}.fields{align-items:center}footer{margin-top:20px;align-items:center}#status{font-size:13px;color:#8fe3ca;margin-left:auto}.help{margin-bottom:0}button:focus-visible,select:focus-visible,input:focus-visible,a:focus-visible{outline:2px solid #82e7ff;outline-offset:3px}@media(max-width:800px){header,main{padding:14px}.panels{grid-template-columns:1fr}h1{font-size:24px}.toolbar>*{flex:1}.toolbar select{width:100%}header a{font-size:12px}canvas{height:290px}#status{width:100%;margin:0}}

.timeline-heading { flex-wrap: wrap; margin-bottom: 12px; }
.timeline-heading > div { flex: 1; min-width: 220px; }