*{box-sizing:border-box;margin:0;padding:0}html,body,#root{height:100%;width:100%}body{font-family:system-ui,-apple-system,sans-serif;background:#0a0c12;color:#c8cdd6;overflow:hidden}.app{display:flex;flex-direction:column;height:100%;width:100%}header{display:flex;justify-content:space-between;align-items:center;padding:8px 16px;background:#11141c;border-bottom:1px solid #222;flex-shrink:0}header h1{font-size:1rem;font-weight:600;color:#eee}header button,.btns button{background:#1c2030;color:#ccc;border:1px solid #333;padding:5px 10px;border-radius:3px;cursor:pointer;font-size:.8rem;margin-left:4px}header button:hover,.btns button:hover{background:#2a3040}.body{display:flex;flex:1;min-height:0;overflow:hidden}.view{flex:1;position:relative;min-width:0;min-height:0}.view canvas{display:block;width:100%!important;height:100%!important}.hud{position:absolute;top:12px;left:12px;background:#0a0c12d9;border:1px solid #333;padding:10px 12px;font-size:.8rem;line-height:1.55;pointer-events:none;border-radius:4px;z-index:10}.ecl{color:#e6a23c;text-transform:uppercase;font-size:.75rem}.hit{color:#e05;font-weight:600}.side{width:280px;background:#11141c;border-left:1px solid #222;padding:12px;overflow-y:auto;font-size:.82rem;flex-shrink:0}.side h3{font-size:.75rem;color:#777;text-transform:uppercase;letter-spacing:.04em;margin-bottom:8px}.side section{margin-bottom:18px}.btns{display:flex;flex-wrap:wrap;gap:4px}.btns button{margin:0;flex:1 1 40%}label{display:block;margin-bottom:12px}label input[type=range]{width:100%;margin-top:3px}