:root{color-scheme:dark;font:14px system-ui,sans-serif;background:#111923;color:#dfebef}*{box-sizing:border-box}body{margin:0;height:100vh;display:flex;flex-direction:column}header,footer{display:flex;align-items:center;gap:24px;padding:16px 22px;background:#182530;border-bottom:1px solid #304350}header strong{letter-spacing:.04em}header #title{flex:1;color:#a6bac7}button{background:#29434f;color:#e6f4f8;border:1px solid #537781;border-radius:5px;padding:8px 12px;cursor:pointer}button:disabled{opacity:.45;cursor:default}main{flex:1;min-height:0;display:flex}aside{width:270px;padding:20px;overflow:auto;border-right:1px solid #304350}h1,h2{font-size:14px;font-weight:600;margin:0 0 15px}h2{margin-top:30px}#status{font-size:12px;color:#a8bfcb}.layer{padding:12px 0;border-bottom:1px solid #293d4a}.layer label{display:flex;gap:10px;align-items:center}.layer small{display:block;margin-top:6px;color:#b3c8d0}.layer input[type=range]{width:100%;margin-top:9px}#selection{white-space:pre-wrap;overflow-wrap:anywhere;font:12px/1.5 monospace;color:#b8ccd6}#viewport{flex:1;position:relative;min-width:0}#viewport>canvas{display:block;width:100%;height:100%}#charts{position:absolute;bottom:10px;right:10px;max-width:65%;display:flex;flex-direction:column;gap:5px}.series{width:100%;max-width:520px;background:#12202ddd;border:1px solid #314b5d;border-radius:6px}footer{border-top:1px solid #304350;gap:16px}#time{flex:1}#source-note{font-size:12px;color:#96abb9}#error{position:absolute;top:15px;left:15px;right:15px;padding:15px;background:#652f35;border-radius:6px}#legends p{font-size:12px;color:#b8d8df}input{accent-color:#6ad9b7}@media(max-width:700px){aside{width:200px;padding:12px}header,footer{padding:10px;gap:10px}#source-note{display:none}}

header strong{max-width:24rem;line-height:1.25}header{flex-wrap:wrap}