kimi-k3 · go

config: kimi-k3--opencode-go--dev
batch: 2026-07-19--unified
transport: opencode-go-gateway
protocol: api · plan
served model: kimi-k3
captured: Jul 18, 2026, 11:54 AM · N=2

variant

live

slot 0 · P-q · sandboxed iframe

The screenshot is the exact frozen pixels the similarity channels measured. Run live re-executes the raw output in a sandboxed iframe; its rendering depends on your browser and fonts and is not guaranteed to match the measured pixels.

similarity neighborsNo similarity data for this session — this batch has no computed pairs.

Fidelity — does the card show the right data?

namematch
conditionmatch
datematch
max tempmismatchshown: 9
min tempmatchshown: 16
hourlyambiguouscoverage · 0 match · 0 mismatch · 24 not shown
request sidematch0 violation(s)

extractor fidelity-extractor-v1+Berlin-2026-07-15

Source — raw model output, one byte unchanged

download card.html

<!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>Weather</title>
<style>
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%}
body{
  margin:0;
  min-height:100vh;
  display:grid;
  place-items:center;
  overflow:hidden;
  font-family:"Inter","SF Pro Display","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  color:#f2f6fb;
  background:#0c1b2e;
  -webkit-font-smoothing:antialiased;
  --bg1:#0b2a63;--bg2:#1552b8;--bg3:#2f8fdf;--accent:#ffc94d;--accent2:#ff8f5c;
}
body[data-theme="clear"]{--bg1:#0b2a63;--bg2:#1552b8;--bg3:#2f8fdf;--accent:#ffc94d;--accent2:#ff8f5c}
body[data-theme="cloud"]{--bg1:#20293a;--bg2:#33415c;--bg3:#4d6484;--accent:#a8c6e8;--accent2:#7fd0ff}
body[data-theme="rain"]{--bg1:#101d2b;--bg2:#1d3348;--bg3:#2c4f6d;--accent:#6fc3ff;--accent2:#4a90d9}
body[data-theme="snow"]{--bg1:#26313f;--bg2:#3d4f63;--bg3:#5f7d9c;--accent:#cfe8ff;--accent2:#9fd0ff}
body[data-theme="storm"]{--bg1:#12142a;--bg2:#232447;--bg3:#343660;--accent:#ffd23f;--accent2:#8e7bff}
body[data-theme="fog"]{--bg1:#2a3138;--bg2:#424e58;--bg3:#5d6b77;--accent:#dfe7ec;--accent2:#aec4d4}

.bg{position:fixed;inset:0;z-index:-2;background:linear-gradient(158deg,var(--bg1),var(--bg2) 52%,var(--bg3));transition:background 1.2s ease}
.bg::after{content:"";position:absolute;inset:0;background:radial-gradient(1100px 520px at 18% -10%,rgba(255,255,255,.14),transparent 60%),radial-gradient(900px 600px at 110% 112%,rgba(0,0,0,.3),transparent 55%)}
.orb{position:fixed;z-index:-1;border-radius:50%;filter:blur(90px);pointer-events:none}
.orb.a{width:520px;height:520px;left:-120px;top:-140px;background:radial-gradient(circle,var(--accent),transparent 65%);opacity:.26;animation:drift 26s ease-in-out infinite alternate}
.orb.b{width:640px;height:640px;right:-180px;bottom:-220px;background:radial-gradient(circle,var(--accent2),transparent 65%);opacity:.2;animation:drift 32s ease-in-out infinite alternate-reverse}
@keyframes drift{from{transform:translate(0,0) scale(1)}to{transform:translate(60px,40px) scale(1.12)}}

.card{
  position:relative;
  width:920px;max-width:94vw;
  min-height:620px;
  max-height:calc(100vh - 48px);
  overflow:auto;
  border-radius:28px;
  padding:34px 40px 24px;
  background:linear-gradient(165deg,rgba(255,255,255,.12),rgba(255,255,255,.05) 45%,rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 34px 90px rgba(3,10,25,.5),inset 0 1px 0 rgba(255,255,255,.14);
  backdrop-filter:blur(24px) saturate(1.15);
  -webkit-backdrop-filter:blur(24px) saturate(1.15);
  animation:rise .7s cubic-bezier(.2,.7,.2,1) both;
}
.card::-webkit-scrollbar{width:8px}
.card::-webkit-scrollbar-thumb{background:rgba(255,255,255,.16);border-radius:99px}
@keyframes rise{from{opacity:0;transform:translateY(16px) scale(.985)}to{opacity:1;transform:none}}

.content{opacity:0;transform:translateY(10px);transition:opacity .6s ease,transform .6s ease}
.content.ready{opacity:1;transform:none}

.hdr{display:flex;justify-content:space-between;align-items:flex-start;gap:20px}
.loc-row{display:flex;align-items:center;gap:10px}
.loc-row svg{width:21px;height:21px;color:var(--accent);flex:none}
h1.loc{margin:0;font-size:27px;font-weight:650;letter-spacing:.2px;max-width:560px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.date-line{margin-top:5px;font-size:14px;color:rgba(235,242,250,.72);letter-spacing:.3px}
.hdr-right{display:flex;flex-direction:column;align-items:flex-end;gap:8px;flex:none}
.badge{font-size:10.5px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;color:#0e1c2e;background:var(--accent);padding:5px 11px;border-radius:999px;box-shadow:0 4px 14px rgba(0,0,0,.25)}
.coords{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;font-size:11.5px;color:rgba(235,242,250,.55);letter-spacing:.6px}

.hero{display:grid;grid-template-columns:150px 1fr auto;align-items:center;gap:28px;margin-top:24px}
.hero-icon{position:relative;width:150px;height:150px;display:grid;place-items:center}
.hero-icon .glow{position:absolute;inset:10px;border-radius:50%;background:radial-gradient(circle,var(--accent) 0%,transparent 68%);opacity:.3;filter:blur(14px)}
#iconBox{position:relative;animation:hover 5.5s ease-in-out infinite;display:grid;place-items:center}
#iconBox .ic{width:126px;height:126px;color:#fff;filter:drop-shadow(0 8px 20px rgba(0,0,0,.32))}
@keyframes hover{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.cond{font-size:17px;font-weight:600;letter-spacing:.4px;color:rgba(240,246,252,.92)}
.tmax{display:flex;align-items:flex-start;line-height:.95;margin-top:4px}
.tmax .num{font-size:100px;font-weight:200;letter-spacing:-3px}
.tmax .unit{font-size:28px;font-weight:300;color:var(--accent);margin-top:14px;margin-left:8px}
.tmax-lab{font-size:11.5px;letter-spacing:2.2px;text-transform:uppercase;color:rgba(235,242,250,.5);margin-top:8px}
.hero-side{display:flex;flex-direction:column;border-left:1px solid rgba(255,255,255,.14);padding-left:26px;min-width:170px}
.side-block{padding:11px 0}
.side-block+.side-block{border-top:1px solid rgba(255,255,255,.1)}
.side-val{font-size:30px;font-weight:300}
.side-val.cool{color:#9fd4ff}
.side-lab{font-size:10.5px;letter-spacing:1.8px;text-transform:uppercase;color:rgba(235,242,250,.5);margin-top:4px}

.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:24px}
.stat{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:16px;padding:12px 16px}
.stat-val{font-size:21px;font-weight:600}
.stat-lab{font-size:10.5px;letter-spacing:1.6px;text-transform:uppercase;color:rgba(235,242,250,.5);margin-top:3px}

.chart-wrap{margin-top:24px}
.sec-title{display:flex;align-items:center;gap:10px;font-size:11.5px;letter-spacing:2px;text-transform:uppercase;color:rgba(235,242,250,.6);font-weight:600}
.sec-title::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,rgba(255,255,255,.18),transparent)}
.sec-title span{color:var(--accent)}
#chart{width:100%;height:auto;display:block;margin-top:6px}
#chart .gl{fill:rgba(240,246,252,.42);font-size:10px}
#chart .xl{fill:rgba(240,246,252,.55);font-size:10px;font-family:ui-monospace,Menlo,Consolas,monospace}
#chart .pl{fill:rgba(240,246,252,.72);font-size:9.5px}
#chart .area{animation:fadeA 1.3s ease .25s both}
@keyframes fadeA{from{opacity:0}to{opacity:1}}

.chips{display:flex;gap:9px;overflow-x:auto;padding:8px 2px 8px;margin-top:8px}
.chips::-webkit-scrollbar{height:6px}
.chips::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18);border-radius:99px}
.chips::-webkit-scrollbar-track{background:rgba(255,255,255,.05);border-radius:99px}
.chip{flex:0 0 auto;min-width:62px;text-align:center;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:8px 6px;transition:transform .25s,background .25s,border-color .25s}
.chip:hover{transform:translateY(-2px);background:rgba(255,255,255,.11)}
.chip-h{display:block;font-size:10.5px;letter-spacing:1px;color:rgba(235,242,250,.55);font-family:ui-monospace,Menlo,Consolas,monospace}
.chip-t{display:block;font-size:16px;font-weight:600;margin-top:3px}
.chip.now{border-color:var(--accent);background:rgba(255,255,255,.1);background:color-mix(in srgb,var(--accent) 15%,transparent);box-shadow:0 6px 18px rgba(0,0,0,.25)}

.foot{margin-top:14px;display:flex;justify-content:space-between;gap:12px;font-size:11px;color:rgba(235,242,250,.45);letter-spacing:.5px}

.state{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center;padding:40px}
.state svg{width:46px;height:46px;color:var(--accent)}
.state h2{margin:0;font-size:22px;font-weight:650}
.state p{margin:0;max-width:440px;color:rgba(235,242,250,.65);font-size:14px;line-height:1.6}
.spinner{width:46px;height:46px;border-radius:50%;border:3px solid rgba(255,255,255,.15);border-top-color:var(--accent);animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

.ic-sun .rays{transform-box:fill-box;transform-origin:center;animation:spin 26s linear infinite}
.drops line,.flakes line{animation:fall 1.5s ease-in infinite}
.drops line:nth-child(2){animation-delay:.3s}.drops line:nth-child(3){animation-delay:.6s}
.drops line:nth-child(4){animation-delay:.15s}.drops line:nth-child(5){animation-delay:.45s}
.flakes line:nth-child(2){animation-delay:.4s}.flakes line:nth-child(3){animation-delay:.8s}
.flakes line:nth-child(4){animation-delay:.2s}.flakes line:nth-child(5){animation-delay:.6s}
@keyframes fall{0%{transform:translateY(-1.6px);opacity:0}35%{opacity:1}100%{transform:translateY(2.2px);opacity:0}}
.bolt{animation:flash 3s ease-in-out infinite}
@keyframes flash{0%,55%,100%{opacity:1}60%,70%{opacity:.15}65%,78%{opacity:.9}}
.foglines line{animation:sway 4.5s ease-in-out infinite alternate}
.foglines line:nth-child(2){animation-delay:1.2s}
@keyframes sway{from{transform:translateX(-1.4px)}to{transform:translateX(1.4px)}}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
</style>
</head>
<body data-theme="clear">
<div class="bg"></div>
<div class="orb a"></div>
<div class="orb b"></div>

<main class="card">
  <div class="content" id="content" hidden>
    <header class="hdr">
      <div>
        <div class="loc-row">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 10c0 7-9 13-9 13S3 17 3 10a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>
          <h1 class="loc" id="locName">—</h1>
        </div>
        <div class="date-line" id="dateLine">—</div>
      </div>
      <div class="hdr-right">
        <span class="badge" id="rangeTag">UTC</span>
        <span class="coords" id="coords"></span>
      </div>
    </header>

    <section class="hero">
      <div class="hero-icon"><span class="glow"></span><div id="iconBox"></div></div>
      <div class="hero-main">
        <div class="cond" id="cond">—</div>
        <div class="tmax"><span class="num" id="tmaxNum">–</span><span class="unit">°C</span></div>
        <div class="tmax-lab">Daytime high</div>
      </div>
      <div class="hero-side">
        <div class="side-block"><div class="side-val cool" id="tminNum">–</div><div class="side-lab">Nighttime low</div></div>
        <div class="side-block"><div class="side-val" id="rangeNum">–</div><div class="side-lab">Daily range</div></div>
      </div>
    </section>

    <section class="stats">
      <div class="stat"><div class="stat-val" id="statMean">–</div><div class="stat-lab">Mean temp</div></div>
      <div class="stat"><div class="stat-val" id="statWarm">–</div><div class="stat-lab">Warmest hour</div></div>
      <div class="stat"><div class="stat-val" id="statCold">–</div><div class="stat-lab">Coldest hour</div></div>
    </section>

    <section class="chart-wrap">
      <div class="sec-title">Hourly temperature <span>UTC</span></div>
      <svg id="chart" viewBox="0 0 832 186" preserveAspectRatio="xMidYMid meet" role="img" aria-label="Hourly temperature chart"></svg>
    </section>

    <div class="chips" id="chips"></div>

    <footer class="foot"><span>Source: Open-Meteo</span><span>All times UTC · Temperatures in °C</span></footer>
  </div>

  <div class="state" id="loader">
    <div class="spinner"></div>
    <p>Loading weather…</p>
  </div>

  <div class="state" id="errorBox" hidden>
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>
    <h2>Unable to load weather data</h2>
    <p id="errMsg"></p>
  </div>
</main>

<script>
(function(){
"use strict";
function $(id){return document.getElementById(id);}

/* ---------- query parameters ---------- */
var q=new URLSearchParams(window.location.search);
function toNum(v,d){var n=parseFloat(v);return isFinite(n)?n:d;}
var lat=toNum(q.get("lat"),52.52); if(lat<-90||lat>90)lat=52.52;
var lon=toNum(q.get("lon"),13.405); if(lon<-180||lon>180)lon=13.405;
var name=(q.get("name")||"").trim().slice(0,80)||"Berlin";

function todayUTC(){return new Date().toISOString().slice(0,10);}
function validDate(s){
  if(!/^\d{4}-\d{2}-\d{2}$/.test(s))return false;
  var p=s.split("-"),y=+p[0],m=+p[1],d=+p[2];
  var dt=new Date(Date.UTC(y,m-1,d));
  return dt.getUTCFullYear()===y&&dt.getUTCMonth()===m-1&&dt.getUTCDate()===d;
}
var today=todayUTC();
var date=q.get("date")||"";
if(!validDate(date))date=today;

/* ---------- weather code table ---------- */
var WMO={
  0:{label:"Clear sky",icon:"sun",theme:"clear"},
  1:{label:"Mainly clear",icon:"sun",theme:"clear"},
  2:{label:"Partly cloudy",icon:"cloud-sun",theme:"cloud"},
  3:{label:"Overcast",icon:"cloud",theme:"cloud"},
  45:{label:"Fog",icon:"fog",theme:"fog"},
  48:{label:"Rime fog",icon:"fog",theme:"fog"},
  51:{label:"Light drizzle",icon:"drizzle",theme:"rain"},
  53:{label:"Drizzle",icon:"drizzle",theme:"rain"},
  55:{label:"Heavy drizzle",icon:"drizzle",theme:"rain"},
  56:{label:"Freezing drizzle",icon:"drizzle",theme:"snow"},
  57:{label:"Freezing drizzle",icon:"drizzle",theme:"snow"},
  61:{label:"Light rain",icon:"rain",theme:"rain"},
  63:{label:"Rain",icon:"rain",theme:"rain"},
  65:{label:"Heavy rain",icon:"rain",theme:"rain"},
  66:{label:"Freezing rain",icon:"rain",theme:"snow"},
  67:{label:"Freezing rain",icon:"rain",theme:"snow"},
  71:{label:"Light snow",icon:"snow",theme:"snow"},
  73:{label:"Snow",icon:"snow",theme:"snow"},
  75:{label:"Heavy snow",icon:"snow",theme:"snow"},
  77:{label:"Snow grains",icon:"snow",theme:"snow"},
  80:{label:"Light rain showers",icon:"rain",theme:"rain"},
  81:{label:"Rain showers",icon:"rain",theme:"rain"},
  82:{label:"Violent rain showers",icon:"rain",theme:"rain"},
  85:{label:"Snow showers",icon:"snow",theme:"snow"},
  86:{label:"Snow showers",icon:"snow",theme:"snow"},
  95:{label:"Thunderstorm",icon:"storm",theme:"storm"},
  96:{label:"Thunderstorm with hail",icon:"storm",theme:"storm"},
  99:{label:"Thunderstorm with hail",icon:"storm",theme:"storm"}
};
function wmo(code){return WMO[code]||{label:"Unknown conditions",icon:"cloud",theme:"cloud"};}

/* ---------- icons ---------- */
var OPEN='<svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">';
var ICONS={
  sun:OPEN.replace('class="ic"','class="ic ic-sun"')+'<g class="rays"><line x1="12" y1="1.6" x2="12" y2="3.6"/><line x1="12" y1="20.4" x2="12" y2="22.4"/><line x1="4.6" y1="4.6" x2="6" y2="6"/><line x1="18" y1="18" x2="19.4" y2="19.4"/><line x1="1.6" y1="12" x2="3.6" y2="12"/><line x1="20.4" y1="12" x2="22.4" y2="12"/><line x1="4.6" y1="19.4" x2="6" y2="18"/><line x1="18" y1="6" x2="19.4" y2="4.6"/></g><circle cx="12" cy="12" r="4.3"/></svg>',
  "cloud-sun":OPEN+'<circle cx="7.6" cy="7" r="2.5"/><line x1="7.6" y1="2.7" x2="7.6" y2="3.9"/><line x1="3.3" y1="7" x2="4.5" y2="7"/><line x1="4.6" y1="4" x2="5.4" y2="4.8"/><line x1="10.6" y1="4" x2="9.8" y2="4.8"/><path d="M18.4 20.4H9.6a4.1 4.1 0 1 1 .78-8.12 5.6 5.6 0 0 1 10.6 2.5 3.5 3.5 0 0 1-2.58 5.62z"/></svg>',
  cloud:OPEN+'<path d="M18 10h-1.26A8 8 0 1 0 9 20h9a5 5 0 0 0 0-10z"/></svg>',
  rain:OPEN+'<path d="M20 16.6A5 5 0 0 0 18 7h-1.26A8 8 0 1 0 4 15.3"/><g class="drops"><line x1="8" y1="17.2" x2="8" y2="20.6"/><line x1="12" y1="16.4" x2="12" y2="19.8"/><line x1="16" y1="17.2" x2="16" y2="20.6"/></g></svg>',
  drizzle:OPEN+'<path d="M20 16.6A5 5 0 0 0 18 7h-1.26A8 8 0 1 0 4 15.3"/><g class="drops"><line x1="8" y1="17.4" x2="8" y2="19"/><line x1="12" y1="16.8" x2="12" y2="18.4"/><line x1="16" y1="17.4" x2="16" y2="19"/><line x1="10" y1="20.2" x2="10" y2="21.4"/><line x1="14" y1="20.2" x2="14" y2="21.4"/></g></svg>',
  snow:OPEN+'<path d="M20 16.6A5 5 0 0 0 18 7h-1.26A8 8 0 1 0 4 15.3"/><g class="flakes"><line x1="8" y1="17.4" x2="8" y2="17.42"/><line x1="12" y1="19" x2="12" y2="19.02"/><line x1="16" y1="17.4" x2="16" y2="17.42"/><line x1="10" y1="21" x2="10" y2="21.02"/><line x1="14" y1="21.6" x2="14" y2="21.62"/></g></svg>',
  storm:OPEN+'<path d="M19 16.9A5 5 0 0 0 18 7h-1.26a8 8 0 1 0-11.62 9"/><polyline class="bolt" points="13 11 9 17 15 17 11 23"/></svg>',
  fog:OPEN+'<path d="M18 8h-1.26A8 8 0 1 0 9 18h9a5 5 0 0 0 0-10z"/><g class="foglines"><line x1="5" y1="20.6" x2="19" y2="20.6"/><line x1="7.5" y1="23" x2="16.5" y2="23"/></g></svg>'
};
function iconFor(k){return ICONS[k]||ICONS.cloud;}

/* ---------- data ---------- */
function load(){
  var base=date<today?"/api/om/archive":"/api/om/forecast";
  var params=new URLSearchParams({
    latitude:String(lat),
    longitude:String(lon),
    daily:"temperature_2m_max,temperature_2m_min,weather_code",
    hourly:"temperature_2m",
    timezone:"UTC",
    temperature_unit:"celsius",
    start_date:date,
    end_date:date
  });
  return fetch(base+"?"+params.toString()).then(function(res){
    if(!res.ok)throw new Error("Request failed (HTTP "+res.status+")");
    return res.json();
  });
}

function smooth(p){
  if(p.length<3)return "M "+p.map(function(a){return a.x.toFixed(1)+","+a.y.toFixed(1);}).join(" L ");
  var d="M "+p[0].x.toFixed(1)+","+p[0].y.toFixed(1);
  for(var i=0;i<p.length-1;i++){
    var p0=p[i-1]||p[i],p1=p[i],p2=p[i+1],p3=p[i+2]||p2;
    var c1x=p1.x+(p2.x-p0.x)/6,c1y=p1.y+(p2.y-p0.y)/6;
    var c2x=p2.x-(p3.x-p1.x)/6,c2y=p2.y-(p3.y-p1.y)/6;
    d+=" C "+c1x.toFixed(1)+","+c1y.toFixed(1)+" "+c2x.toFixed(1)+","+c2y.toFixed(1)+" "+p2.x.toFixed(1)+","+p2.y.toFixed(1);
  }
  return d;
}

function renderChart(pairs){
  var svg=$("chart");
  var W=832,H=186,PL=36,PR=20,PT=30,PB=28;
  var iw=W-PL-PR,ih=H-PT-PB,n=pairs.length;
  var ts=pairs.map(function(p){return p.t;});
  var mn=Math.min.apply(null,ts),mx=Math.max.apply(null,ts);
  if(mx-mn<2){mx+=1;mn-=1;}
  var pad=(mx-mn)*0.14;mn-=pad;mx+=pad;
  function X(i){return n===1?PL+iw/2:PL+i*iw/(n-1);}
  function Y(t){return PT+(mx-t)/(mx-mn)*ih;}
  var pts=pairs.map(function(p,i){return{x:X(i),y:Y(p.t),t:p.t,h:p.h};});
  var accent=getComputedStyle(document.body).getPropertyValue("--accent").trim()||"#ffc94d";

  var s='<defs><linearGradient id="ag" x1="0" y1="0" x2="0" y2="1">'+
        '<stop offset="0" stop-color="'+accent+'" stop-opacity="0.36"/>'+
        '<stop offset="1" stop-color="'+accent+'" stop-opacity="0"/></linearGradient></defs>';

  [0.25,0.5,0.75].forEach(function(f){
    var v=mx-f*(mx-mn),y=Y(v);
    s+='<line x1="'+PL+'" y1="'+y.toFixed(1)+'" x2="'+(W-PR)+'" y2="'+y.toFixed(1)+'" stroke="rgba(255,255,255,.08)" stroke-width="1"/>'+
       '<text class="gl" x="'+(PL-8)+'" y="'+(y+3.5).toFixed(1)+'" text-anchor="end">'+Math.round(v)+'°</text>';
  });
  s+='<line x1="'+PL+'" y1="'+(PT+ih)+'" x2="'+(W-PR)+'" y2="'+(PT+ih)+'" stroke="rgba(255,255,255,.16)" stroke-width="1"/>';

  var line=smooth(pts);
  var area=line+" L "+pts[n-1].x.toFixed(1)+","+(PT+ih)+" L "+pts[0].x.toFixed(1)+","+(PT+ih)+" Z";
  s+='<path class="area" d="'+area+'" fill="url(#ag)"/>';
  s+='<path class="tl" d="'+line+'" fill="none" stroke="'+accent+'" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"/>';

  var i,wi=0,ci=0;
  for(i=0;i<n;i++){
    if(pts[i].t>pts[wi].t)wi=i;
    if(pts[i].t<pts[ci].t)ci=i;
    if(i%3===0){
      s+='<circle cx="'+pts[i].x.toFixed(1)+'" cy="'+pts[i].y.toFixed(1)+'" r="2" fill="rgba(255,255,255,.85)"/>'+
         '<text class="pl" x="'+pts[i].x.toFixed(1)+'" y="'+(pts[i].y-9).toFixed(1)+'" text-anchor="middle">'+Math.round(pts[i].t)+'°</text>'+
         '<text class="xl" x="'+pts[i].x.toFixed(1)+'" y="'+(H-7)+'" text-anchor="middle">'+pts[i].h.slice(11,13)+'</text>';
    }
  }
  s+='<circle cx="'+pts[wi].x.toFixed(1)+'" cy="'+pts[wi].y.toFixed(1)+'" r="4.4" fill="'+accent+'" stroke="rgba(10,20,35,.35)" stroke-width="1.5"/>'+
     '<text x="'+pts[wi].x.toFixed(1)+'" y="'+(pts[wi].y-12).toFixed(1)+'" text-anchor="middle" fill="'+accent+'" font-size="12" font-weight="700">'+Math.round(pts[wi].t)+'°</text>';
  s+='<circle cx="'+pts[ci].x.toFixed(1)+'" cy="'+pts[ci].y.toFixed(1)+'" r="4.4" fill="#9fd4ff" stroke="rgba(10,20,35,.35)" stroke-width="1.5"/>'+
     '<text x="'+pts[ci].x.toFixed(1)+'" y="'+(pts[ci].y+19).toFixed(1)+'" text-anchor="middle" fill="#9fd4ff" font-size="12" font-weight="700">'+Math.round(pts[ci].t)+'°</text>';

  svg.innerHTML=s;
  try{
    var pathEl=svg.querySelector(".tl"),len=pathEl.getTotalLength();
    pathEl.style.strokeDasharray=len;
    pathEl.style.strokeDashoffset=len;
    requestAnimationFrame(function(){requestAnimationFrame(function(){
      pathEl.style.transition="stroke-dashoffset 1.15s ease .1s";
      pathEl.style.strokeDashoffset="0";
    });});
  }catch(e){}
}

function renderChips(pairs){
  var box=$("chips");box.textContent="";
  var nowH=new Date().getUTCHours();
  pairs.forEach(function(p,i){
    var c=document.createElement("div");c.className="chip";
    if(date===today&&i===nowH)c.classList.add("now");
    var h=document.createElement("span");h.className="chip-h";h.textContent=p.h.slice(11,13)+":00";
    var t=document.createElement("span");t.className="chip-t";t.textContent=Math.round(p.t)+"°";
    c.appendChild(h);c.appendChild(t);box.appendChild(c);
  });
}

function render(data){
  var d=data&&data.daily;
  var tMax=d&&d.temperature_2m_max&&d.temperature_2m_max[0];
  var tMin=d&&d.temperature_2m_min&&d.temperature_2m_min[0];
  var code=d&&d.weather_code&&d.weather_code[0];
  var hours=data&&data.hourly&&data.hourly.time;
  var temps=data&&data.hourly&&data.hourly.temperature_2m;
  if(!isFinite(tMax)||!isFinite(tMin)||typeof code!=="number")throw new Error("Daily data missing from response.");
  if(!Array.isArray(hours)||!Array.isArray(temps))throw new Error("Hourly data missing from response.");

  var pairs=[];
  for(var i=0;i<hours.length;i++){
    if(typeof temps[i]==="number"&&isFinite(temps[i]))pairs.push({h:String(hours[i]),t:temps[i]});
  }
  if(!pairs.length)throw new Error("No hourly temperatures available for this date.");

  var info=wmo(code);
  document.body.setAttribute("data-theme",info.theme);
  document.title="Weather · "+name;

  $("locName").textContent=name;
  var dt=new Date(date+"T00:00:00Z");
  $("dateLine").textContent=dt.toLocaleDateString("en-GB",{weekday:"long",day:"numeric",month:"long",year:"numeric",timeZone:"UTC"});
  $("rangeTag").textContent=date<today?"Past · Archive":(date===today?"Today":"Upcoming · Forecast");
  $("coords").textContent=Math.abs(lat).toFixed(2)+"° "+(lat>=0?"N":"S")+" · "+Math.abs(lon).toFixed(2)+"° "+(lon>=0?"E":"W");

  $("iconBox").innerHTML=iconFor(info.icon);
  $("cond").textContent=info.label;
  $("tmaxNum").textContent=Math.round(tMax);
  $("tminNum").textContent=Math.round(tMin)+"°";
  $("rangeNum").textContent=Math.round(tMax-tMin)+"°";

  var sum=0,wi=0,ci=0;
  pairs.forEach(function(p,i){
    sum+=p.t;
    if(p.t>pairs[wi].t)wi=i;
    if(p.t<pairs[ci].t)ci=i;
  });
  $("statMean").textContent=Math.round(sum/pairs.length)+"°";
  $("statWarm").textContent=pairs[wi].h.slice(11,13)+":00";
  $("statCold").textContent=pairs[ci].h.slice(11,13)+":00";

  renderChart(pairs);
  renderChips(pairs);
}

/* ---------- boot ---------- */
load().then(function(data){
  render(data);
  $("loader").hidden=true;
  var c=$("content");
  c.hidden=false;
  requestAnimationFrame(function(){c.classList.add("ready");});
}).catch(function(err){
  $("loader").hidden=true;
  $("errorBox").hidden=false;
  $("errMsg").textContent="The weather data for "+name+" on "+date+" could not be loaded."+(err&&err.message?" ("+err.message+")":" Please try again later.");
});
})();
</script>
</body>
</html>

L1 — cheap deterministic descriptors

bytes total	23,985	html / css / js	3,032 / 9,016 / 11,937
dom nodes	70	dom depth	8
css rules	112	js present	yes
brightness	60.5	contrast	17.5
colorfulness	23.3	whitespace	47.5%

This slot's telemetry

prompt tokens	390	completion tokens	30,691
total tokens	31,081	wall	958.4 s
cost	—	request id	—

config.json532 B

{
  "N": 2,
  "auth": {
    "credential_ref": "WCB_OPENCODE_KEY",
    "method": "oauth"
  },
  "billing": "plan",
  "config_id": "kimi-k3--opencode-go--dev",
  "effort": null,
  "family": "kimi",
  "m": {
    "min": 2,
    "q": 2
  },
  "model_id": "kimi-k3",
  "protocol": "api",
  "served_model": "kimi-k3",
  "telemetry": {
    "completion_tokens": 74812,
    "cost_usd": null,
    "prompt_tokens": 1544,
    "total_tokens": 76356,
    "wall_ms": 2257083
  },
  "transport": "opencode-go-gateway",
  "vendor_sanction_ref": null
}

send-log2.5 KB

{
  "N": 2,
  "batch_id": "2026-07-20--refill4-go-kimi-k3",
  "config_id": "kimi-k3--opencode-go--dev",
  "positions": [
    {
      "attempts": [
        {
          "attempt_index": 0,
          "backoff_ms": null,
          "charged": true,
          "ended_at": "2026-07-20T11:28:35.329006+00:00",
          "http_status": 200,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-07-20T11:25:05.181937+00:00"
        }
      ],
      "block_index": 0,
      "model_reaching_attempt_index": 0,
      "slot_index": 0,
      "terminal_state": "valid",
      "variant": "P-min"
    },
    {
      "attempts": [
        {
          "attempt_index": 0,
          "backoff_ms": null,
          "charged": true,
          "ended_at": "2026-07-20T11:44:39.891919+00:00",
          "http_status": 200,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-07-20T11:28:41.452753+00:00"
        }
      ],
      "block_index": 0,
      "model_reaching_attempt_index": 0,
      "slot_index": 0,
      "terminal_state": "valid",
      "variant": "P-q"
    },
    {
      "attempts": [
        {
          "attempt_index": 0,
          "backoff_ms": null,
          "charged": true,
          "ended_at": "2026-07-20T11:54:43.316363+00:00",
          "http_status": 200,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-07-20T11:44:43.569877+00:00"
        }
      ],
      "block_index": 1,
      "model_reaching_attempt_index": 0,
      "slot_index": 1,
      "terminal_state": "valid",
      "variant": "P-q"
    },
    {
      "attempts": [
        {
          "attempt_index": 0,
          "backoff_ms": null,
          "charged": true,
          "ended_at": "2026-07-20T12:02:55.730452+00:00",
          "http_status": 200,
          "outcome": "valid",
          "reached_model": true,
          "reason": "ok",
          "request_id": null,
          "started_at": "2026-07-20T11:54:46.942677+00:00"
        }
      ],
      "block_index": 1,
      "model_reaching_attempt_index": 0,
      "slot_index": 1,
      "terminal_state": "valid",
      "variant": "P-min"
    }
  ],
  "retry_policy": {
    "max_unreachable_retries": 5,
    "rate_limit_backoff": {
      "max_attempts": 4,
      "max_total_ms": 60000
    }
  }
}