H='''<!doctype html><html><head><meta charset="utf-8">
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&display=swap" rel="stylesheet">
<style>*{margin:0;padding:0;box-sizing:border-box}
html,body{width:640px;height:360px;overflow:hidden;background:#f7f7f7}
body{font-family:'Inter','Noto Sans JP',sans-serif;color:#242424;-webkit-font-smoothing:antialiased}
.w{width:640px;height:360px;padding:28px 34px;position:relative;display:flex;flex-direction:column;justify-content:center}
.lab{font-family:'Inter',monospace;font-size:10px;letter-spacing:.14em;color:#888;text-transform:uppercase}
.h{font-size:17px;font-weight:700;margin:6px 0 16px}
.card{background:#fff;border-radius:8px;padding:14px 16px}
.dark{background:#242424;color:#fff;border-radius:8px;padding:14px 16px}
.row{display:flex;align-items:center;background:#fff;border-radius:8px;padding:13px 16px;margin-bottom:8px}
.n{font-family:Inter;font-size:11px;color:#999;width:34px}
.tag{margin-left:auto;font-family:Inter;font-size:10px;letter-spacing:.1em;color:#999}
.chip{display:inline-block;border:1px solid #e6e6e6;border-radius:4px;padding:3px 8px;font-size:11px;background:#fff}
.blue{color:#2f6fdf}
</style></head><body><div class="w">'''
E='</div></body></html>'
P={}
P['LOG21']='''<div class="lab">ROS 2 · NODE GRAPH</div><div class="h">カメを動かす信号は、トピックを流れている</div>
<div style="display:flex;align-items:center;gap:12px;margin-top:30px">
<div class="card" style="width:150px"><div class="lab">NODE</div><div style="font-weight:700;margin-top:4px">teleop_turtle</div></div>
<div style="flex:1;height:2px;background:#2f6fdf;position:relative"><div style="position:absolute;right:-2px;top:-5px;border-left:10px solid #2f6fdf;border-top:6px solid transparent;border-bottom:6px solid transparent"></div></div>
<div class="dark" style="width:170px"><div class="lab" style="color:#aaa">TOPIC</div><div style="font-family:Inter;font-weight:600;margin-top:4px;font-size:13px">/turtle1/cmd_vel</div></div>
<div style="flex:1;height:2px;background:#2f6fdf;position:relative"><div style="position:absolute;right:-2px;top:-5px;border-left:10px solid #2f6fdf;border-top:6px solid transparent;border-bottom:6px solid transparent"></div></div>
<div class="card" style="width:130px"><div class="lab">NODE</div><div style="font-weight:700;margin-top:4px">turtlesim</div></div></div>
<div class="card" style="margin-top:34px;font-family:Inter;font-size:12px;line-height:1.8;color:#555">$ ros2 topic echo /turtle1/cmd_vel<br><span class="blue">linear: {x, y, z} &nbsp; angular: {x, y, z}</span></div>'''
P['LOG22']='''<div style="display:flex;gap:16px;height:100%">
<div class="card" style="flex:1.3;position:relative"><div class="lab">RVIZ2 · AXES</div>
<svg width="300" height="250" style="position:absolute;left:30px;top:40px">
<g stroke="#e6e6e6">'''+''.join(f'<line x1="{20+i*26}" y1="230" x2="{90+i*12}" y2="120"/>' for i in range(10))+''.join(f'<line x1="{20+ (90-20)*t:.0f}" y1="{230-110*t:.0f}" x2="{254+(198-254)*t:.0f}" y2="{230-110*t:.0f}"/>' for t in [0,.25,.5,.75,1])+'''</g>
<line x1="140" y1="175" x2="250" y2="200" stroke="#242424" stroke-width="5"/><line x1="140" y1="175" x2="60" y2="210" stroke="#242424" stroke-width="5"/><line x1="140" y1="175" x2="140" y2="40" stroke="#2f6fdf" stroke-width="5"/><circle cx="140" cy="175" r="5" fill="#242424"/></svg></div>
<div style="flex:1;display:flex;flex-direction:column;gap:8px;justify-content:center">
<div class="row"><span style="width:12px;height:12px;background:#242424;border-radius:2px"></span><b style="margin-left:12px">X</b><span class="tag">前</span></div>
<div class="row"><span style="width:12px;height:12px;background:#242424;border-radius:2px"></span><b style="margin-left:12px">Y</b><span class="tag">左</span></div>
<div class="row"><span style="width:12px;height:12px;background:#2f6fdf;border-radius:2px"></span><b style="margin-left:12px">Z</b><span class="tag">上</span></div>
<div class="lab" style="margin-top:6px">REP-103 · RIGHT-HANDED</div></div></div>'''
P['LOG23']='''<div class="lab">UNITY ⇄ ROS 2</div><div class="h">脳と体をつなぐ</div>
<div style="display:flex;align-items:stretch;gap:0;margin-top:26px">
<div class="dark" style="flex:1;padding:26px 22px"><div class="lab" style="color:#aaa">BRAIN</div><div style="font-size:26px;font-weight:700;margin-top:8px">ROS 2</div><div style="font-size:12px;color:#bbb;margin-top:6px">計算・指令</div></div>
<div style="width:130px;display:flex;flex-direction:column;align-items:center;justify-content:center">
<div style="width:100%;height:2px;background:#2f6fdf"></div><div style="font-family:Inter;font-size:12px;color:#2f6fdf;margin-top:8px">TCP :10000</div></div>
<div class="card" style="flex:1;padding:26px 22px"><div class="lab">BODY</div><div style="font-size:26px;font-weight:700;margin-top:8px">Unity</div><div style="font-size:12px;color:#888;margin-top:6px">mechArm を召喚</div></div></div>'''
P['LOG29']='''<div class="lab">DIGITAL TWIN · NEXT STEPS</div><div class="h">次に挑む3つの実験</div>
<div class="row" style="background:#242424;color:#fff"><span class="n" style="color:#aaa">01</span><b>Python でシーケンス制御</b><span class="tag" style="color:#aaa">EXP 1</span></div>
<div class="row"><span class="n">02</span><b>Unity ➔ ROS 2 の双方向同期</b><span class="tag">EXP 2</span></div>
<div class="row"><span class="n">03</span><b>リアルタイム・テレオペ</b><span class="tag">EXP 3</span></div>'''
sw=[('#2f6fdf','予約語','def · class · if'),('#f2f2f2','関数・メソッド','publish()'),('#b5b5b5','文字・数値','"link1" · 0.5'),('#6b6b6b','コメント','# メモ'),('#d9d9d9','変数・クラス名','node · msg')]
P['LOG32']='<div class="lab">PYTHON · SYNTAX COLORS</div><div class="h">色分けは、役割の地図</div><div style="display:flex;gap:14px"><div class="dark" style="flex:1;font-family:Inter;font-size:12px;line-height:2;padding:16px 18px;background:#242424">'+'<br>'.join(f'<span style="display:inline-block;width:{w}px;height:8px;border-radius:4px;background:{c}"></span>' for c,w in [('#2f6fdf',60),('#f2f2f2',110),('#b5b5b5',80),('#6b6b6b',140),('#d9d9d9',70),('#2f6fdf',40),('#f2f2f2',90)])+'</div><div style="flex:1.3">'+''.join(f'<div class="row" style="padding:9px 14px;margin-bottom:6px"><span style="width:12px;height:12px;border-radius:3px;background:{c};border:1px solid #ddd"></span><b style="margin-left:12px;font-size:13px">{t}</b><span class="tag" style="text-transform:none;letter-spacing:0">{s}</span></div>' for c,t,s in sw)+'</div></div>'
P['LOG36']='''<div class="lab">HRI · CONFIDENCE GAUGE</div><div class="h">確信度を、色で周辺視野に伝える</div>
<div class="card" style="margin-top:30px;padding:26px 22px"><div style="display:flex;height:22px;border-radius:11px;overflow:hidden">
<div style="flex:5;background:#2f6fdf"></div><div style="flex:3;background:#a9c1ef"></div><div style="flex:2;background:#e4572e"></div></div>
<div style="display:flex;margin-top:12px;font-size:12px"><div style="flex:5">安心</div><div style="flex:3">注意</div><div style="flex:2">警告</div></div></div>
<div class="lab" style="margin-top:16px">HudManager.cs</div>'''
P['LOG74']='''<div class="lab">ROLES · GEMINI × HUMAN × CLINE</div><div class="h">三者の線引き</div>
<div style="display:flex;gap:12px;margin-top:24px">
<div class="card" style="flex:1;padding:22px 18px"><div class="lab">STRATEGY</div><div style="font-size:22px;font-weight:700;margin-top:8px">Gemini</div><div style="font-size:12px;color:#888;margin-top:6px">設計する</div></div>
<div class="dark" style="flex:1;padding:22px 18px"><div class="lab" style="color:#aaa">DECISION</div><div style="font-size:22px;font-weight:700;margin-top:8px">自分</div><div style="font-size:12px;color:#bbb;margin-top:6px">決める</div></div>
<div class="card" style="flex:1;padding:22px 18px"><div class="lab">IMPLEMENT</div><div style="font-size:22px;font-weight:700;margin-top:8px">Cline</div><div style="font-size:12px;color:#888;margin-top:6px">実装する</div></div></div>'''
P['LOG75']='''<div class="lab">RECOVERY PROTOCOL</div><div class="h">不具合の大きさで、戻し方を変える</div>
<div class="row"><span class="n">01</span><b>作業単位の差し戻し</b><span class="tag">GIT</span></div>
<div class="row"><span class="n">02</span><b>シーン単位の復旧</b><span class="tag">UNITY</span></div>
<div class="row" style="background:#242424;color:#fff"><span class="n" style="color:#aaa">03</span><b>完全復旧</b><span class="tag" style="color:#aaa">GOOGLE DRIVE</span></div>'''
P['LOG77']='''<div class="lab">COST · CLINE</div><div class="h">定額と従量課金の壁</div>
<div class="card" style="margin-top:10px;padding:18px 18px 14px"><svg width="540" height="170">
<line x1="30" y1="150" x2="530" y2="150" stroke="#e6e6e6"/><line x1="30" y1="10" x2="30" y2="150" stroke="#e6e6e6"/>
<line x1="30" y1="85" x2="520" y2="85" stroke="#242424" stroke-width="3"/>
<polyline fill="none" stroke="#2f6fdf" stroke-width="3" points="'''+' '.join(f'{30+i*5},{150-0.0055*(i*5)**1.6:.0f}' for i in range(0,99))+'''"/>
<text x="440" y="78" font-size="12" font-family="Noto Sans JP" fill="#242424">定額（Pro）</text>
<text x="400" y="22" font-size="12" font-family="Noto Sans JP" fill="#2f6fdf">従量（API）</text>
<text x="34" y="166" font-size="10" font-family="Inter" fill="#999" letter-spacing="1.4">TOKENS →</text></svg></div>'''
P['LOG104']='''<div style="display:flex;gap:14px;height:100%">
<div class="dark" style="flex:1.25;padding:18px 18px;display:flex;flex-direction:column;background:#1b1b1d">
<div style="display:flex;align-items:center;gap:10px"><img src="face-joy.webp" style="width:30px;height:29px;border-radius:6px;background:#fff"><b style="font-size:13px">ハコブくん</b></div>
<div style="background:#2c2c30;border-radius:8px;padding:12px 14px;margin-top:14px;font-size:12px;line-height:1.7">ハコブくんにおまかせ！<br>ロボット開発の記録、全部頭に入ってるよ。<br>なんでも聞いてね！</div>
<div style="margin-top:12px;display:flex;flex-wrap:wrap;gap:6px">
<span class="chip" style="background:transparent;color:#fff;border-color:#555">このプロジェクトって何をやってるの？</span>
<span class="chip" style="background:transparent;color:#fff;border-color:#555">失敗したことその原因を教えて</span>
<span class="chip" style="background:transparent;color:#fff;border-color:#555">一番苦労したのはどこ？</span></div></div>
<div style="flex:1;display:flex;flex-direction:column;justify-content:center;gap:8px">
<div class="lab">HAKOBU · AI AGENT</div>
<div class="row"><span class="n">01</span><b style="font-size:13px">ナレッジベース</b></div>
<div class="row"><span class="n">02</span><b style="font-size:13px">チャットフロー</b></div>
<div class="row"><span class="n">03</span><b style="font-size:13px">カスタムUI</b></div></div></div>'''
P['LOG105']='''<div class="lab">REPOSITORIES · 2</div><div class="h">コードも記事も、戻せる状態に</div>
<div style="display:flex;gap:12px;margin-top:22px">
<div class="card" style="flex:1;padding:22px 18px"><div class="lab">REPO 1</div><div style="font-size:20px;font-weight:700;margin-top:8px">コード</div><div style="font-size:12px;color:#888;margin-top:6px">Unity · Python</div></div>
<div class="card" style="flex:1;padding:22px 18px"><div class="lab">REPO 2</div><div style="font-size:20px;font-weight:700;margin-top:8px">コンテンツ</div><div style="font-size:12px;color:#888;margin-top:6px">記事 · 図解</div></div></div>
<div class="dark" style="margin-top:12px;display:flex;align-items:center"><span style="font-family:Inter;font-weight:600">CLAUDE.md</span><span style="margin-left:auto;font-size:12px;color:#bbb">AI エージェントへの決まりごと</span></div>'''
for k,v in P.items(): open(k+'.html','w').write(H+v+E)
