<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><meta name="color-scheme" content="dark">
<title>Varynth Diff</title><link rel="icon" href="/assets/mark.svg" type="image/svg+xml"><link rel="stylesheet" href="/assets/control-room.css"><style>
body { overflow:auto; }
.diff-app { min-height:100vh; display:flex; flex-direction:column; }
.diff-header { height:58px; flex:0 0 58px; display:flex; align-items:center; gap:12px; padding:0 20px; border-bottom:1px solid var(--line); background:var(--rail); }
.diff-header img { width:28px; height:28px; }
.diff-title { font-size:16px; font-weight:600; }.diff-subtitle { color:var(--quiet); font-size:12px; margin-left:auto; }
.diff-controls { padding:16px 22px; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; border-bottom:1px solid var(--line-soft); background:var(--bg); }
.diff-controls textarea { min-height:92px; resize:vertical; background:var(--panel); color:var(--ink); border:1px solid var(--line); border-radius:var(--radius); padding:11px; font:12px/1.6 var(--mono); }
.diff-actions { display:flex; gap:8px; align-items:stretch; }.diff-actions .button { min-width:90px; }.diff-out { flex:1; overflow:auto; padding:20px 22px 38px; background:var(--bg); }
.diff-file { margin:0 auto 24px; max-width:1280px; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:var(--panel); }.diff-file-heading { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:12px 14px; border-bottom:1px solid var(--line); }.diff-file-heading h2 { font:12px var(--mono); overflow-wrap:anywhere; }.diff-stats { display:flex; gap:9px; font:11px var(--mono); }.diff-stats .added { color:var(--green); }.diff-stats .removed { color:var(--red); }
.diff-table { width:100%; border-collapse:collapse; table-layout:fixed; font:12px/1.65 var(--mono); }.diff-table th { color:var(--quiet); font-weight:500; text-align:left; padding:8px 11px; border-bottom:1px solid var(--line-soft); }.diff-table td { vertical-align:top; border-bottom:1px solid #20222a; }.diff-line { width:52px; padding:2px 8px; text-align:right; color:var(--quiet); user-select:none; }.diff-source { width:calc(50% - 52px); padding:2px 11px; white-space:pre-wrap; overflow-wrap:anywhere; }.diff-source.added { background:#17251f; color:var(--green); }.diff-source.removed { background:#2a2025; color:var(--red); }.diff-line.added { color:var(--green); background:#13201b; }.diff-line.removed { color:var(--red); background:#251d22; }.diff-note { padding:8px 11px; color:var(--accent-light); background:#211d2d; white-space:pre-wrap; }.quiet-empty { text-align:center; border:1px dashed var(--line); padding:36px 18px; }.diff-help { max-width:1280px; margin:0 auto 10px; color:var(--quiet); font-size:11px; }
@media(max-width:720px){.diff-controls{grid-template-columns:1fr}.diff-actions{justify-content:flex-end}.diff-header{padding:0 14px}.diff-subtitle{display:none}.diff-out{padding:12px 10px 28px}.diff-source{font-size:11px}}
</style>
</head>
<body><div class="diff-app"><header class="diff-header"><img src="/assets/mark.svg" alt=""><span class="diff-title">Varynth diff</span><span class="diff-subtitle" id="diff-summary">No changes</span><a class="button subtle" href="/">Back to Control Room</a></header><form class="diff-controls" id="diff-form"><textarea id="diff-input" aria-label="Unified diff" placeholder="Paste a unified diff here…"></textarea><div class="diff-actions"><button class="button subtle" id="diff-example" type="button">Example</button><button class="button subtle" id="diff-clear" type="button">Clear</button><button class="button primary" type="submit">Render</button></div></form><div class="diff-out" id="out"><div class="diff-help">Review changes by file, with old and new lines aligned.</div><div class="quiet-empty">No diff loaded.</div></div></div><script type="module" src="/assets/diff.mjs"></script></body></html>