Fix spec-parser GPU window; clearer chart colours, unclipped label

spec_brick.py

@@ -49,7 +49,7 @@ if _should_load():
             _state["tok"] = tok
             _state["model"] = model.to("cuda").eval()
 
-        @spaces.GPU(duration=60)
+        @spaces.GPU(duration=120)   # cold path = 3.4GB download + load + generate
         def _generate(text: str) -> str:
             if _state["model"] is None:
                 _load()

static/app.js

@@ -553,8 +553,10 @@ async function drawRoofline(speed) {
     const ux = lx(Math.min(Math.max(speed.eff_bw || speed.bw, xmin), xmax));
     const uy = ly(Math.min(Math.max(speed.tps, ymin), ymax));
     s += `<line x1="${ux}" y1="${ly(Math.min(Math.max(speed.lo, ymin), ymax))}" x2="${ux}" y2="${ly(Math.min(Math.max(speed.hi, ymin), ymax))}" class="rl-band"/>`;
+    // flip the label to the left when the dot sits near the right edge
+    const flip = ux > W * 0.72;
     s += `<circle cx="${ux}" cy="${uy}" r="6" class="rl-you"/>` +
-         `<text x="${ux + 10}" y="${uy + 4}" class="rl-you-label">you ≈${speed.tps} tok/s</text>`;
+         `<text x="${flip ? ux - 10 : ux + 10}" y="${uy + 4}" class="rl-you-label" text-anchor="${flip ? "end" : "start"}">you ≈${speed.tps} tok/s</text>`;
   }
   s += `</svg>
     <div class="rl-legend">

static/style.css

@@ -393,10 +393,10 @@ details.disc > summary:hover { color: var(--text-primary); }
 .rl-grid { stroke: var(--border); stroke-width: 1; opacity: .5; }
 .rl-tick { fill: var(--text-muted); font: 500 10.5px var(--font-body); }
 .rl-axis { fill: var(--text-secondary); font: 600 11.5px var(--font-body); }
-.rl-dot { opacity: .55; }
-.rl-p1 { fill: #5B6472; }
-.rl-p8 { fill: #8B93A3; }
-.rl-p14 { fill: #B9C0CC; }
+.rl-dot { opacity: .6; }
+.rl-p1 { fill: #2DD4BF; }   /* ~1B runs: teal */
+.rl-p8 { fill: #F472B6; }   /* ~8B runs: pink */
+.rl-p14 { fill: #93C5FD; }  /* ~14B runs: light blue */
 .rl-roof { stroke: var(--warn); stroke-width: 1.8; stroke-dasharray: 6 5; opacity: .9; }
 .rl-band { stroke: var(--accent); stroke-width: 5; opacity: .35; stroke-linecap: round; }
 .rl-you { fill: var(--accent); stroke: #fff; stroke-width: 1.5; }
@@ -404,7 +404,7 @@ details.disc > summary:hover { color: var(--text-primary); }
 .rl-legend { display: flex; flex-wrap: wrap; gap: var(--s-4); margin-top: var(--s-2); font-size: 12px; color: var(--text-muted); }
 .rl-legend .item { display: inline-flex; align-items: center; gap: 6px; }
 .rl-legend .sw { width: 10px; height: 10px; border-radius: 50%; }
-.rl-p1-sw { background: #5B6472; } .rl-p8-sw { background: #8B93A3; } .rl-p14-sw { background: #B9C0CC; }
+.rl-p1-sw { background: #2DD4BF; } .rl-p8-sw { background: #F472B6; } .rl-p14-sw { background: #93C5FD; }
 .rl-roof-sw { background: var(--warn); border-radius: 2px; height: 3px; width: 14px; }
 .rl-you-sw { background: var(--accent); }
 .viz-caption { font-size: 13px; color: var(--text-secondary); line-height: 1.6; margin-top: var(--s-3); }