Constant HTML_HEAD
Source const HTML_HEAD: &str = r#"<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Forge spatial encounter debugger</title>
<style>
:root{color-scheme:dark;font-family:Inter,ui-sans-serif,system-ui,sans-serif;background:#070b14;color:#e5edf8}
*{box-sizing:border-box}body{margin:0;min-height:100vh;background:radial-gradient(circle at top,#14213d 0,#070b14 55%)}
header{padding:20px 24px 12px;display:flex;align-items:end;justify-content:space-between;gap:16px}h1{font-size:20px;margin:0}#fixture{color:#7dd3fc}
.subtitle{color:#8da2bd;font-size:13px;margin-top:5px}.layout{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:14px;padding:0 20px 20px;height:calc(100vh - 86px)}
.panel{background:rgba(10,17,31,.92);border:1px solid #22314a;border-radius:12px;box-shadow:0 18px 60px #0006;overflow:hidden}
.main{display:grid;grid-template-rows:auto minmax(360px,1fr) auto}.controls{display:flex;align-items:center;gap:8px;padding:12px;border-bottom:1px solid #22314a;flex-wrap:wrap}
button,select{border:1px solid #314562;background:#14213a;color:#e5edf8;border-radius:7px;padding:7px 11px;cursor:pointer}button:hover{background:#1d3152}button:disabled{opacity:.4;cursor:default}
input[type=range]{flex:1;min-width:160px;accent-color:#38bdf8}.step{font-variant-numeric:tabular-nums;color:#9fb0c8;font-size:12px;min-width:74px;text-align:right}
#arena{width:100%;height:100%;min-height:360px;background:#09101d}.info{padding:12px 14px;border-top:1px solid #22314a;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.datum{min-width:0}.datum b{display:block;text-transform:uppercase;letter-spacing:.08em;font-size:10px;color:#7186a4;margin-bottom:3px}.datum span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px}
.side{display:grid;grid-template-rows:auto 1fr}.side h2{font-size:13px;text-transform:uppercase;letter-spacing:.08em;color:#91a5c0;margin:0;padding:14px;border-bottom:1px solid #22314a}
#events{overflow:auto;margin:0;padding:7px;list-style:none}.event{display:grid;grid-template-columns:58px 1fr;gap:8px;padding:9px;border-radius:7px;cursor:pointer;border:1px solid transparent}.event:hover{background:#111e34}.event.current{background:#142c48;border-color:#27628b}.event-time{font:11px ui-monospace,monospace;color:#7dd3fc}.event-name{font-size:12px}.event-source{font-size:11px;color:#7f93af;margin-top:3px}
.legend{position:absolute}.grid{stroke:#1d2b40;stroke-width:1}.axis{stroke:#3b506d;stroke-width:1.3}.obstacle{fill:#33415588;stroke:#94a3b8;stroke-width:2}.path-past{fill:none;stroke-width:3}.path-future{fill:none;stroke-width:2;stroke-dasharray:6 7;opacity:.25}.label{font:12px ui-sans-serif,system-ui;fill:#e8eef8;paint-order:stroke;stroke:#070b14;stroke-width:4;stroke-linejoin:round}.coord{font:10px ui-monospace,monospace;fill:#7186a4}.target-ring{fill:none;stroke:#fff;stroke-width:2;stroke-dasharray:4 3}.inactive{opacity:.35}.dead{opacity:.28}
@media(max-width:850px){.layout{grid-template-columns:1fr;height:auto}.main{min-height:620px}.side{height:360px}.info{grid-template-columns:repeat(2,1fr)}}
</style>
</head>
<body>
<header><div><h1>Forge spatial encounter debugger · <span id="fixture"></span></h1><div class="subtitle">Recorded encounter states from representative runtime telemetry</div></div></header>
<div class="layout">
<section class="panel main">
<div class="controls"><button id="prev">← Previous</button><button id="play">Play</button><button id="next">Next →</button><input id="slider" type="range" min="0" value="0"><span class="step" id="step"></span><select id="layer"></select></div>
<svg id="arena" role="img" aria-label="Spatial encounter state"></svg>
<div class="info"><div class="datum"><b>Time</b><span id="time"></span></div><div class="datum"><b>Event</b><span id="event"></span></div><div class="datum"><b>Source</b><span id="source"></span></div><div class="datum"><b>Target</b><span id="target"></span></div><div class="datum"><b>Pull / Group</b><span id="pull"></span></div></div>
</section>
<aside class="panel side"><h2>Runtime state steps</h2><ol id="events"></ol></aside>
</div>
<script>const DATA="#;