d = dict(l.split("|", 1) for l in open("scratchpad/_assets.txt").read().splitlines())
GIF = "data:image/gif;base64," + d["GIF"]
ORIG = "data:image/png;base64," + d["ORIG"]
BEFORE = "data:image/png;base64," + d["BEFORE"]

CSS = """
  :root{
    color-scheme: dark;
    --ground:#0a0a11; --panel:#13131e; --edge:#272338; --edge-soft:#1d1a2b;
    --ink:#ece9f7; --muted:#9a95b4; --faint:#6a6684;
    --accent:#b7a6ff; --accent-2:#8f7de0; --glow:#7a5cff;
    --ok:#7ee0a6; --no:#e8879b;
    --mono:ui-monospace,"Cascadia Code","JetBrains Mono",Consolas,monospace;
    --sans:system-ui,-apple-system,"Segoe UI",sans-serif;
  }
  *{box-sizing:border-box}
  body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--sans);
    line-height:1.55;-webkit-font-smoothing:antialiased;
    background-image:radial-gradient(120% 90% at 50% -10%, #18142a 0%, #0a0a11 55%);}
  .scan{position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.35;
    background:repeating-linear-gradient(to bottom, rgba(255,255,255,.025) 0 1px, transparent 1px 3px);}
  .wrap{position:relative;z-index:1;max-width:1060px;margin:0 auto;padding:64px 24px 80px;}
  .eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.22em;text-transform:uppercase;
    color:var(--accent-2);display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin:0 0 22px;}
  .eyebrow .dot{width:5px;height:5px;border-radius:50%;background:var(--accent);
    box-shadow:0 0 10px 1px var(--glow);}
  h1{font-size:clamp(34px,6vw,60px);line-height:1.02;margin:0 0 16px;font-weight:650;
    letter-spacing:-.02em;text-wrap:balance;}
  h1 em{font-style:normal;color:var(--accent);}
  .lede{font-size:clamp(16px,2.2vw,19px);color:var(--muted);max-width:60ch;margin:0 0 44px;text-wrap:pretty;}
  .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:0 0 12px;}
  @media(max-width:760px){.grid{grid-template-columns:1fr;max-width:420px;margin-inline:auto;}}
  .card{background:var(--panel);border:1px solid var(--edge-soft);border-radius:14px;overflow:hidden;
    display:flex;flex-direction:column;}
  .card.now{border-color:var(--accent-2);box-shadow:0 0 0 1px rgba(183,166,255,.25),
    0 18px 50px -18px var(--glow), inset 0 0 40px -22px var(--glow);}
  .frame{position:relative;aspect-ratio:4/3;background:#05050a;overflow:hidden;}
  .frame img{width:100%;height:100%;object-fit:cover;display:block;}
  .card.now .frame::after{content:"";position:absolute;inset:0;pointer-events:none;
    box-shadow:inset 0 0 70px -30px var(--glow);}
  .meta{padding:12px 15px 14px;display:flex;align-items:baseline;justify-content:space-between;gap:10px;}
  .meta h3{margin:0;font-size:14px;font-weight:600;letter-spacing:.01em;}
  .meta p{margin:2px 0 0;font-family:var(--mono);font-size:11.5px;color:var(--faint);letter-spacing:.02em;}
  .tag{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.06em;padding:3px 8px;
    border-radius:999px;white-space:nowrap;}
  .tag.ref{color:var(--muted);border:1px solid var(--edge);}
  .tag.no{color:var(--no);border:1px solid rgba(232,135,155,.35);background:rgba(232,135,155,.07);}
  .tag.ok{color:var(--ok);border:1px solid rgba(126,224,166,.35);background:rgba(126,224,166,.08);}
  .note{font-family:var(--mono);font-size:12px;color:var(--faint);margin:0 4px 52px;letter-spacing:.02em;}
  .split{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;margin-top:8px;}
  @media(max-width:760px){.split{grid-template-columns:1fr;gap:32px;}}
  h2{font-size:13px;font-family:var(--mono);letter-spacing:.16em;text-transform:uppercase;
    color:var(--accent-2);margin:0 0 18px;font-weight:600;}
  .cause{border-left:2px solid var(--accent-2);padding:2px 0 2px 20px;margin:0 0 26px;}
  .cause h4{margin:0 0 6px;font-size:15px;font-weight:600;}
  .cause p{margin:0;color:var(--muted);font-size:14.5px;}
  code{font-family:var(--mono);font-size:.86em;color:var(--accent);background:rgba(183,166,255,.09);
    padding:1px 6px;border-radius:5px;}
  ul.fixes{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px;}
  ul.fixes li{display:flex;gap:12px;align-items:flex-start;font-size:14px;color:var(--muted);}
  ul.fixes .t{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.05em;
    color:var(--ground);background:var(--accent);padding:2px 7px;border-radius:5px;margin-top:2px;flex:none;}
  ul.fixes b{color:var(--ink);font-weight:600;}
  footer{margin-top:60px;padding-top:22px;border-top:1px solid var(--edge-soft);
    font-family:var(--mono);font-size:11.5px;color:var(--faint);letter-spacing:.04em;
    display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;}
"""

BODY = """
<div class="scan"></div>
<div class="wrap">
  <p class="eyebrow"><span class="dot"></span> VWE BattleTech &middot; MUNGA / Tesla 4.10 &middot; task&nbsp;#52</p>
  <h1>The translocation&nbsp;<em>warp</em>, restored.</h1>
  <p class="lede">The respawn effect from the 1995 arcade pod &mdash; a swirling energy vortex the pilot
    dissolves into and reappears from. Reconstructed from <code>BTL4OPT.EXE</code> and matched,
    frame by frame, to a photograph of the original cabinet.</p>

  <div class="grid">
    <div class="card">
      <div class="frame"><img src="__ORIG__" alt="Photograph of the original arcade cabinet showing the warp"></div>
      <div class="meta"><div><h3>The original</h3><p>cabinet photo &middot; tsphere.bgf</p></div><span class="tag ref">TARGET</span></div>
    </div>
    <div class="card">
      <div class="frame"><img src="__BEFORE__" alt="Our earlier render showing radial spokes"></div>
      <div class="meta"><div><h3>Our render, before</h3><p>radial &ldquo;spokes&rdquo;</p></div><span class="tag no">&#10007; BUG</span></div>
    </div>
    <div class="card now">
      <div class="frame"><img src="__GIF__" alt="Our render now: a smooth animated lavender vortex"></div>
      <div class="meta"><div><h3>Our render, now</h3><p>live &middot; spinning + churning</p></div><span class="tag ok">&#10003; FIXED</span></div>
    </div>
  </div>
  <p class="note">// right panel is a live capture of btl4.exe &mdash; 30 frames, ~2s of the settled swirl</p>

  <div class="split">
    <div>
      <h2>What was actually wrong</h2>
      <div class="cause">
        <h4>Texture-scroll precision collapse</h4>
        <p>The swirl scrolls its cloud texture by <code>scrollDelta &times; time</code>, where
          <code>time</code> is <em>absolute</em> runtime. That product grows without bound, so within
          seconds the UV offset is large enough that adding it per-pixel destroys float precision &mdash;
          the coordinates quantize into coarse steps and a smooth cloud shatters into grainy radial
          spokes. Wrapping the offset with <code>fmodf(&hellip;, 1.0f)</code> is identical under
          REPEAT tiling but keeps full precision.</p>
      </div>
      <p style="color:var(--faint);font-size:13px;margin:0;">This same bug silently degraded every
        scrolling texture &mdash; beams, exhaust &mdash; over a long session. The warp just made it
        impossible to ignore.</p>
    </div>
    <div>
      <h2>And the look itself</h2>
      <ul class="fixes">
        <li><span class="t">MESH</span><span><b>Bicone, on-axis.</b> tsphere.bgf is a 45-vertex bicone viewed straight down its throat and spun in place &mdash; not an off-axis tornado.</span></li>
        <li><span class="t">TEX</span><span><b>Cloud &times; wide lavender ramp.</b> The <code>bintA</code> cloud through a full-range dark&#8594;lavender ramp &mdash; no geometry &ldquo;bands&rdquo;, no twist.</span></li>
        <li><span class="t">METHOD</span><span><b>Verified offline first.</b> Rendered the real mesh in a standalone rasterizer, matched capture.png, then ported the confirmed parameters.</span></li>
      </ul>
    </div>
  </div>

  <footer>
    <span>reconstructed from decompiled binary &middot; evidence tier T2 (runtime-verified)</span>
    <span>btl4 &middot; L4D3D::SetTextureScrolling &middot; btl4vid.cpp</span>
  </footer>
</div>
"""

BODY = BODY.replace("__ORIG__", ORIG).replace("__BEFORE__", BEFORE).replace("__GIF__", GIF)
html = "<title>Translocation Warp — restored</title>\n<style>" + CSS + "</style>\n" + BODY
open("scratchpad/warp_showcase.html", "w", encoding="utf-8").write(html)
print("wrote scratchpad/warp_showcase.html", len(html), "chars")
