Polish: autoplay, Mon-YYYY IC labels, scientific var names, larger fonts

script.js

@@ -26,7 +26,7 @@ const app = {
   M:0, T:0, nLon:0, nLat:0, W:0,
   vmean:0, vstd:1,
   rightMode:'truth', n:8, t:0, dragging:false,
-  currentIC:null, currentVar:null, playing:false, timer:null,
+  currentIC:null, currentVar:null, playing:false, timer:null, autoplay:true,
 };
 
 // IEEE-754 half → float
@@ -37,7 +37,8 @@ function h2f(h) {
   return (s ? -1 : 1) * Math.pow(2, e-15) * (1 + f/1024);
 }
 
-function fmtIC(s){ return s.replace('T',' ').slice(0,13) + 'Z'; }   // 2016-02-12 00Z
+const _MON = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
+function fmtIC(s){ const [y,m] = s.split('-'); return `${_MON[+m-1]} ${y}`; }  // Feb 2016
 
 async function init() {
   const [index, coast] = await Promise.all([
@@ -50,7 +51,8 @@ async function init() {
     app.index.ics.map(ic => ({ label: fmtIC(ic.init_time), val: ic.hash })),
     onICPick);
   buildTokens('var-tokens',
-    Object.keys(app.index.variables).map(l => ({ label:l, val:l })),
+    Object.entries(app.index.variables).map(
+      ([l, v]) => ({ label: v.long_name || l, val: l })),
     onVarPick);
   wireControls();
   buildGeometry();
@@ -154,6 +156,7 @@ async function loadBin(icHash, varLabel) {
   rebuildFrames();
   drawFigure();
   setStatus('', 100, true);
+  if (app.autoplay) startPlay();   // auto-animate on load (and after switches)
 }
 
 function setStatus(text, pct, hide) {
@@ -210,7 +213,7 @@ function sceneCfg(domainX) {
 function titleAnn(x, text) {
   return { x, y:1.0, xref:'paper', yref:'paper', text, showarrow:false,
            xanchor:'center', yanchor:'top',
-           font:{ family:'IBM Plex Mono, monospace', size:11, color:'#8b8f98' } };
+           font:{ family:'IBM Plex Mono, monospace', size:16, color:'#aab0bb' } };
 }
 
 function drawFigure() {
@@ -319,9 +322,13 @@ function wireControls() {
   });
 }
 
-function togglePlay() { app.playing ? stopPlay() : startPlay(); }
+function togglePlay() {
+  if (app.playing) { app.autoplay = false; stopPlay(); }
+  else { app.autoplay = true; startPlay(); }
+}
 function startPlay() {
   if (!app.meanFrames) return;
+  clearInterval(app.timer);
   app.playing = true;
   document.getElementById('play').textContent = '❚❚ pause';
   app.timer = setInterval(() => setT((app.t + 1) % app.T), 320);

styles.css

@@ -25,15 +25,15 @@ body {
 /* Header — one line, no hero */
 .head { display:flex; justify-content:space-between; align-items:baseline;
         gap:1.5rem; flex-wrap:wrap; }
-.head h1 { font-size:1.35rem; font-weight:600; letter-spacing:-0.02em; }
+.head h1 { font-size:1.6rem; font-weight:600; letter-spacing:-0.02em; }
 .head h1 .muted { color:var(--muted); font-weight:400; }
 .head-links { display:flex; gap:1.25rem; flex-shrink:0; }
-.head-links a { color:var(--muted); text-decoration:none; font-size:.85rem;
+.head-links a { color:var(--muted); text-decoration:none; font-size:.95rem;
                 display:inline-flex; align-items:center; gap:.35rem;
                 border-bottom:1px solid transparent; transition:.15s; }
 .head-links a:hover { color:var(--text); border-bottom-color:var(--dim); }
 .head-links svg { width:14px; height:14px; }
-.caption { margin-top:.4rem; font-family:var(--mono); font-size:.75rem;
+.caption { margin-top:.5rem; font-family:var(--mono); font-size:.95rem;
            color:var(--muted); letter-spacing:.02em; }
 
 /* Plot — globes float on the dark canvas */
@@ -55,13 +55,13 @@ body {
 /* Controls */
 .controls { display:flex; flex-direction:column; gap:.7rem; margin-top:.6rem; }
 .row { display:flex; align-items:baseline; gap:.5rem; flex-wrap:wrap; }
-.row > .label { font-family:var(--mono); font-size:.72rem; color:var(--muted);
+.row > .label { font-family:var(--mono); font-size:.85rem; color:var(--muted);
                 text-transform:uppercase; letter-spacing:.08em;
                 min-width:9.5rem; flex-shrink:0; }
 
 /* Inline text-token selector */
 .tokens { display:flex; flex-wrap:wrap; align-items:baseline; }
-.token { font-size:.9rem; color:var(--muted); cursor:pointer;
+.token { font-size:1.05rem; color:var(--muted); cursor:pointer;
          transition:color .15s; white-space:nowrap; }
 .token:hover { color:var(--text); }
 .token.active { color:var(--text); text-decoration:underline;
@@ -79,7 +79,7 @@ input[type=range]::-webkit-slider-thumb { -webkit-appearance:none; appearance:no
   background:var(--accent); }
 input[type=range]::-moz-range-thumb { width:12px; height:12px; border:0;
   border-radius:50%; background:var(--accent); }
-.val { font-family:var(--mono); font-size:.8rem; color:var(--text);
+.val { font-family:var(--mono); font-size:.9rem; color:var(--text);
        min-width:2ch; }
 
 /* Timeline + play */
@@ -88,7 +88,7 @@ input[type=range]::-moz-range-thumb { width:12px; height:12px; border:0;
         background:none; border:0; cursor:pointer; padding:0;
         letter-spacing:.04em; }
 .play:hover { color:var(--text); }
-.lead { font-family:var(--mono); font-size:.8rem; color:var(--muted);
+.lead { font-family:var(--mono); font-size:.9rem; color:var(--muted);
         min-width:9ch; }
 
 @media (max-width:720px) {