@hiai-gg/hiai-opencode 0.2.0 → 0.2.2

package/skills/design-templates/html-ppt/assets/animations/fx/neural-net.js

@@ -0,0 +1,75 @@
+(function(){
+  window.HPX = window.HPX || {};
+  window.HPX['neural-net'] = function(el){
+    const U = window.HPX._u;
+    const k = U.canvas(el), ctx = k.ctx;
+    const ac = U.accent(el,'#7c5cff'), ac2 = U.accent2(el,'#22d3ee');
+    const layers = [4,6,6,3];
+    let nodes = [], edges = [], pulses = [];
+    const layout = () => {
+      nodes = [];
+      const pad = 40;
+      const cw = k.w - pad*2, ch = k.h - pad*2;
+      for (let L=0; L<layers.length; L++){
+        const x = pad + (cw * L / (layers.length-1));
+        const n = layers[L];
+        for (let i=0;i<n;i++){
+          const y = pad + (ch * (i+0.5) / n);
+          nodes.push({x,y,L,i});
+        }
+      }
+      edges = [];
+      for (let L=0; L<layers.length-1; L++){
+        const a = nodes.filter(n=>n.L===L), b = nodes.filter(n=>n.L===L+1);
+        for (const x of a) for (const y of b) edges.push([nodes.indexOf(x),nodes.indexOf(y)]);
+      }
+    };
+    layout();
+    let lw=k.w, lh=k.h, last=0;
+    const stop = U.loop((t) => {
+      if (k.w!==lw||k.h!==lh){ layout(); lw=k.w; lh=k.h; }
+      ctx.clearRect(0,0,k.w,k.h);
+      ctx.strokeStyle = 'rgba(160,160,200,0.22)'; ctx.lineWidth=1;
+      for (const [i,j] of edges){
+        const a=nodes[i], b=nodes[j];
+        ctx.beginPath(); ctx.moveTo(a.x,a.y); ctx.lineTo(b.x,b.y); ctx.stroke();
+      }
+      if (t - last > 0.25){
+        last = t;
+        const starts = nodes.filter(n=>n.L===0);
+        const s = starts[(Math.random()*starts.length)|0];
+        pulses.push({node:s, L:0, t:0});
+      }
+      pulses = pulses.filter(p => p.L < layers.length-1);
+      for (const p of pulses){
+        p.t += 0.03;
+        if (p.t >= 1){
+          const next = nodes.filter(n=>n.L===p.L+1);
+          p.node2 = next[(Math.random()*next.length)|0];
+          if (!p._started){ p._started = true; }
+        }
+      }
+      // animate progression
+      for (const p of pulses){
+        if (!p.target){
+          const next = nodes.filter(n=>n.L===p.L+1);
+          p.target = next[(Math.random()*next.length)|0];
+        }
+        p.t += 0.04;
+        const a = p.node, b = p.target;
+        const x = a.x + (b.x-a.x)*Math.min(1,p.t);
+        const y = a.y + (b.y-a.y)*Math.min(1,p.t);
+        ctx.fillStyle = ac2;
+        ctx.beginPath(); ctx.arc(x,y,4,0,Math.PI*2); ctx.fill();
+        if (p.t >= 1){ p.node = b; p.target=null; p.L++; p.t=0; }
+      }
+      for (const n of nodes){
+        ctx.fillStyle = ac;
+        ctx.beginPath(); ctx.arc(n.x,n.y,6,0,Math.PI*2); ctx.fill();
+        ctx.strokeStyle = ac2; ctx.lineWidth=1.5;
+        ctx.beginPath(); ctx.arc(n.x,n.y,8,0,Math.PI*2); ctx.stroke();
+      }
+    });
+    return { stop(){ stop(); k.destroy(); } };
+  };
+})();

package/skills/design-templates/html-ppt/assets/animations/fx/orbit-ring.js

@@ -0,0 +1,38 @@
+(function(){
+  window.HPX = window.HPX || {};
+  window.HPX['orbit-ring'] = function(el){
+    const U = window.HPX._u;
+    const k = U.canvas(el), ctx = k.ctx;
+    const pal = U.palette(el);
+    const rings = [
+      {r:40,  n:3,  sp:1.2, c:pal[0]},
+      {r:75,  n:5,  sp:0.8, c:pal[1]},
+      {r:110, n:8,  sp:-0.6, c:pal[2]},
+      {r:145, n:12, sp:0.4, c:pal[3]},
+      {r:180, n:16, sp:-0.3, c:pal[4]}
+    ];
+    const stop = U.loop((t) => {
+      ctx.clearRect(0,0,k.w,k.h);
+      const cx=k.w/2, cy=k.h/2;
+      // radial glow
+      const g = ctx.createRadialGradient(cx,cy,0,cx,cy,210);
+      g.addColorStop(0,'rgba(124,92,255,0.25)');
+      g.addColorStop(1,'rgba(0,0,0,0)');
+      ctx.fillStyle = g; ctx.fillRect(0,0,k.w,k.h);
+      for (const R of rings){
+        ctx.strokeStyle = 'rgba(200,200,230,0.2)'; ctx.lineWidth=1;
+        ctx.beginPath(); ctx.arc(cx,cy,R.r,0,Math.PI*2); ctx.stroke();
+        for (let i=0;i<R.n;i++){
+          const a = (i/R.n)*Math.PI*2 + t*R.sp;
+          const x = cx + Math.cos(a)*R.r;
+          const y = cy + Math.sin(a)*R.r;
+          ctx.fillStyle = R.c;
+          ctx.beginPath(); ctx.arc(x,y,4,0,Math.PI*2); ctx.fill();
+        }
+      }
+      ctx.fillStyle = '#fff';
+      ctx.beginPath(); ctx.arc(cx,cy,5,0,Math.PI*2); ctx.fill();
+    });
+    return { stop(){ stop(); k.destroy(); } };
+  };
+})();

package/skills/design-templates/html-ppt/assets/animations/fx/particle-burst.js

@@ -0,0 +1,42 @@
+(function(){
+  window.HPX = window.HPX || {};
+  window.HPX['particle-burst'] = function(el){
+    const U = window.HPX._u;
+    const k = U.canvas(el), ctx = k.ctx;
+    const pal = U.palette(el);
+    let parts = [];
+    const spawn = () => {
+      const cx = k.w/2, cy = k.h/2;
+      const n = 90;
+      for (let i=0;i<n;i++){
+        const a = Math.random()*Math.PI*2;
+        const s = U.rand(80, 260);
+        parts.push({
+          x: cx, y: cy,
+          vx: Math.cos(a)*s, vy: Math.sin(a)*s,
+          life: 1, r: U.rand(2,5),
+          c: pal[(Math.random()*pal.length)|0]
+        });
+      }
+    };
+    spawn();
+    let lastSpawn = 0;
+    const stop = U.loop((t) => {
+      ctx.clearRect(0,0,k.w,k.h);
+      if (t - lastSpawn > 2.5) { spawn(); lastSpawn = t; }
+      const dt = 1/60;
+      parts = parts.filter(p => p.life > 0);
+      for (const p of parts){
+        p.vy += 220*dt;
+        p.vx *= 0.985; p.vy *= 0.985;
+        p.x += p.vx*dt; p.y += p.vy*dt;
+        p.life -= 0.012;
+        ctx.globalAlpha = Math.max(0, p.life);
+        ctx.fillStyle = p.c;
+        ctx.beginPath(); ctx.arc(p.x, p.y, p.r, 0, Math.PI*2); ctx.fill();
+      }
+      ctx.globalAlpha = 1;
+    });
+    return { stop(){ stop(); k.destroy(); } };
+  };
+})();

package/skills/design-templates/html-ppt/assets/animations/fx/shockwave.js

@@ -0,0 +1,39 @@
+(function(){
+  window.HPX = window.HPX || {};
+  window.HPX['shockwave'] = function(el){
+    const U = window.HPX._u;
+    const k = U.canvas(el), ctx = k.ctx;
+    const ac = U.accent(el,'#7c5cff'), ac2 = U.accent2(el,'#22d3ee');
+    let waves = [];
+    let last = -1;
+    const stop = U.loop((t) => {
+      ctx.fillStyle = 'rgba(0,0,0,0.12)';
+      ctx.fillRect(0,0,k.w,k.h);
+      if (t - last > 0.6){ last = t; waves.push({t:0}); }
+      const cx=k.w/2, cy=k.h/2;
+      const max = Math.hypot(k.w,k.h)/2;
+      waves = waves.filter(w => w.t < 1);
+      for (const w of waves){
+        w.t += 0.012;
+        const r = w.t * max;
+        const alpha = 1 - w.t;
+        ctx.strokeStyle = w.t<0.5?ac2:ac;
+        ctx.globalAlpha = alpha;
+        ctx.lineWidth = 3 + (1-w.t)*3;
+        ctx.beginPath(); ctx.arc(cx,cy,r,0,Math.PI*2); ctx.stroke();
+        ctx.strokeStyle = '#fff';
+        ctx.lineWidth = 1;
+        ctx.globalAlpha = alpha*0.4;
+        ctx.beginPath(); ctx.arc(cx,cy,r*0.92,0,Math.PI*2); ctx.stroke();
+      }
+      ctx.globalAlpha = 1;
+      // core
+      const g = ctx.createRadialGradient(cx,cy,0,cx,cy,40);
+      g.addColorStop(0,'rgba(255,255,255,0.9)');
+      g.addColorStop(1,'rgba(124,92,255,0)');
+      ctx.fillStyle = g;
+      ctx.beginPath(); ctx.arc(cx,cy,40,0,Math.PI*2); ctx.fill();
+    });
+    return { stop(){ stop(); k.destroy(); } };
+  };
+})();

package/skills/design-templates/html-ppt/assets/animations/fx/sparkle-trail.js

@@ -0,0 +1,62 @@
+(function(){
+  window.HPX = window.HPX || {};
+  window.HPX['sparkle-trail'] = function(el){
+    const U = window.HPX._u;
+    const k = U.canvas(el), ctx = k.ctx;
+    k.c.style.pointerEvents = 'none';
+    el.style.cursor = 'crosshair';
+    const pal = U.palette(el);
+    let sparks = [];
+    const onMove = (e) => {
+      const r = el.getBoundingClientRect();
+      const x = e.clientX - r.left, y = e.clientY - r.top;
+      for (let i=0;i<3;i++){
+        sparks.push({
+          x, y,
+          vx: U.rand(-60,60), vy: U.rand(-80,20),
+          life: 1, c: pal[(Math.random()*pal.length)|0],
+          r: U.rand(1.5,3.5)
+        });
+      }
+    };
+    // auto-wiggle if no mouse moves
+    let auto = true, autoT = 0;
+    const onAny = () => { auto = false; };
+    el.addEventListener('pointermove', onMove);
+    el.addEventListener('pointerenter', onAny);
+    const stop = U.loop(() => {
+      ctx.fillStyle = 'rgba(0,0,0,0.15)';
+      ctx.fillRect(0,0,k.w,k.h);
+      if (auto){
+        autoT += 0.04;
+        const x = k.w/2 + Math.cos(autoT)*k.w*0.3;
+        const y = k.h/2 + Math.sin(autoT*1.3)*k.h*0.3;
+        for (let i=0;i<3;i++){
+          sparks.push({
+            x, y,
+            vx: U.rand(-60,60), vy: U.rand(-80,20),
+            life: 1, c: pal[(Math.random()*pal.length)|0],
+            r: U.rand(1.5,3.5)
+          });
+        }
+      }
+      const dt = 1/60;
+      sparks = sparks.filter(s => s.life > 0);
+      for (const s of sparks){
+        s.vy += 160*dt;
+        s.x += s.vx*dt; s.y += s.vy*dt;
+        s.life -= 0.018;
+        ctx.globalAlpha = Math.max(0, s.life);
+        ctx.fillStyle = s.c;
+        ctx.beginPath(); ctx.arc(s.x,s.y,s.r,0,Math.PI*2); ctx.fill();
+      }
+      ctx.globalAlpha = 1;
+    });
+    return { stop(){
+      el.removeEventListener('pointermove', onMove);
+      el.removeEventListener('pointerenter', onAny);
+      el.style.cursor = '';
+      stop(); k.destroy();
+    }};
+  };
+})();

package/skills/design-templates/html-ppt/assets/animations/fx/starfield.js

@@ -0,0 +1,30 @@
+(function(){
+  window.HPX = window.HPX || {};
+  window.HPX['starfield'] = function(el){
+    const U = window.HPX._u;
+    const k = U.canvas(el), ctx = k.ctx;
+    const tx = U.text(el, '#ffffff');
+    const N = 260;
+    const stars = Array.from({length:N}, () => ({
+      x: U.rand(-1,1), y: U.rand(-1,1), z: Math.random()
+    }));
+    const stop = U.loop(() => {
+      ctx.fillStyle = 'rgba(0,0,0,0.25)';
+      ctx.fillRect(0,0,k.w,k.h);
+      const cx = k.w/2, cy = k.h/2;
+      for (const s of stars){
+        s.z -= 0.006;
+        if (s.z <= 0.02) { s.x = U.rand(-1,1); s.y = U.rand(-1,1); s.z = 1; }
+        const px = cx + (s.x/s.z)*cx;
+        const py = cy + (s.y/s.z)*cy;
+        if (px<0||py<0||px>k.w||py>k.h) continue;
+        const r = (1-s.z)*2.4;
+        ctx.globalAlpha = 1-s.z;
+        ctx.fillStyle = tx;
+        ctx.beginPath(); ctx.arc(px,py,r,0,Math.PI*2); ctx.fill();
+      }
+      ctx.globalAlpha = 1;
+    });
+    return { stop(){ stop(); k.destroy(); } };
+  };
+})();

package/skills/design-templates/html-ppt/assets/animations/fx/typewriter-multi.js

@@ -0,0 +1,51 @@
+(function(){
+  window.HPX = window.HPX || {};
+  window.HPX['typewriter-multi'] = function(el){
+    if (getComputedStyle(el).position === 'static') el.style.position = 'relative';
+    const lines = [
+      (el.getAttribute('data-fx-line1') || '> initializing knowledge graph...'),
+      (el.getAttribute('data-fx-line2') || '> loading 28 concept nodes'),
+      (el.getAttribute('data-fx-line3') || '> agent ready. awaiting prompt_'),
+    ];
+    const wrap = document.createElement('div');
+    wrap.style.cssText = 'position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;gap:14px;padding:32px 48px;font:600 22px ui-monospace,Menlo,monospace;color:var(--text-1,#e7e7ef);';
+    el.appendChild(wrap);
+    const rows = lines.map((txt) => {
+      const row = document.createElement('div');
+      row.style.cssText = 'white-space:pre;display:flex;align-items:center;';
+      const span = document.createElement('span'); span.textContent = '';
+      const cur = document.createElement('span');
+      cur.textContent = '\u2588';
+      cur.style.cssText = 'display:inline-block;margin-left:2px;color:var(--accent,#22d3ee);animation:hpxBlink 1s steps(2) infinite;';
+      row.appendChild(span); row.appendChild(cur);
+      wrap.appendChild(row);
+      return {row, span, txt, i:0};
+    });
+    // inject blink keyframes once
+    if (!document.getElementById('hpx-blink-kf')){
+      const st = document.createElement('style');
+      st.id = 'hpx-blink-kf';
+      st.textContent = '@keyframes hpxBlink{50%{opacity:0}}';
+      document.head.appendChild(st);
+    }
+    let stopped = false;
+    const speeds = [55, 70, 45];
+    rows.forEach((r, idx) => {
+      const tick = () => {
+        if (stopped) return;
+        if (r.i < r.txt.length){
+          r.span.textContent += r.txt[r.i++];
+          setTimeout(tick, speeds[idx]);
+        } else {
+          setTimeout(() => {
+            if (stopped) return;
+            r.i = 0; r.span.textContent = '';
+            tick();
+          }, 2200);
+        }
+      };
+      setTimeout(tick, idx*400);
+    });
+    return { stop(){ stopped = true; if (wrap.parentNode) wrap.parentNode.removeChild(wrap); } };
+  };
+})();

package/skills/design-templates/html-ppt/assets/animations/fx/word-cascade.js

@@ -0,0 +1,47 @@
+(function(){
+  window.HPX = window.HPX || {};
+  window.HPX['word-cascade'] = function(el){
+    const U = window.HPX._u;
+    const k = U.canvas(el), ctx = k.ctx;
+    const pal = U.palette(el);
+    const WORDS = ['AI','知识','Graph','Claude','LLM','Agent','Vector','RAG','Token','神经',
+      'Prompt','Chain','Skill','Code','Cloud','GPU','Flow','推理','Data','Model'];
+    let items = [];
+    let last = -1;
+    let piles = {}; // column -> stack height
+    const stop = U.loop((t) => {
+      ctx.clearRect(0,0,k.w,k.h);
+      if (t - last > 0.18){
+        last = t;
+        const w = WORDS[(Math.random()*WORDS.length)|0];
+        items.push({
+          text: w, x: U.rand(40, k.w-40), y: -20,
+          vy: 0, c: pal[(Math.random()*pal.length)|0],
+          size: U.rand(16,26), landed: false
+        });
+      }
+      ctx.textAlign='center'; ctx.textBaseline='middle';
+      for (const it of items){
+        if (!it.landed){
+          it.vy += 0.4;
+          it.y += it.vy;
+          const col = Math.round(it.x/60);
+          const floor = k.h - (piles[col]||0) - it.size*0.6;
+          if (it.y >= floor){
+            it.y = floor; it.landed = true;
+            piles[col] = (piles[col]||0) + it.size*1.1;
+            if ((piles[col]||0) > k.h*0.8) piles[col] = 0; // reset if too high
+          }
+        }
+        ctx.fillStyle = it.c;
+        ctx.font = `700 ${it.size}px system-ui,sans-serif`;
+        ctx.fillText(it.text, it.x, it.y);
+      }
+      // prune old landed
+      if (items.length > 120){
+        items = items.filter(i => !i.landed).concat(items.filter(i=>i.landed).slice(-60));
+      }
+    });
+    return { stop(){ stop(); k.destroy(); } };
+  };
+})();

package/skills/design-templates/html-ppt/assets/animations/fx-runtime.js

@@ -0,0 +1,99 @@
+/* html-ppt :: fx-runtime.js
+ * Canvas FX autoloader + lifecycle manager.
+ * - Dynamically loads all fx modules listed in FX_LIST
+ * - Initializes [data-fx] elements when their slide becomes active
+ * - Calls handle.stop() when the slide leaves
+ */
+(function(){
+  'use strict';
+
+  const FX_LIST = [
+    '_util',
+    'particle-burst','confetti-cannon','firework','starfield','matrix-rain',
+    'knowledge-graph','neural-net','constellation','orbit-ring','galaxy-swirl',
+    'word-cascade','letter-explode','chain-react','magnetic-field','data-stream',
+    'gradient-blob','sparkle-trail','shockwave','typewriter-multi','counter-explosion'
+  ];
+
+  // Resolve base path of this script so it works from any page location.
+  const myScript = document.currentScript || (function(){
+    const all = document.getElementsByTagName('script');
+    for (const s of all){ if (s.src && s.src.indexOf('fx-runtime.js')>-1) return s; }
+    return null;
+  })();
+  const base = myScript ? myScript.src.replace(/fx-runtime\.js.*$/, 'fx/') : 'assets/animations/fx/';
+
+  let loaded = 0;
+  const total = FX_LIST.length;
+  const ready = new Promise((resolve) => {
+    if (!total) return resolve();
+    FX_LIST.forEach((name) => {
+      const s = document.createElement('script');
+      s.src = base + name + '.js';
+      s.async = false;
+      s.onload = s.onerror = () => { if (++loaded >= total) resolve(); };
+      document.head.appendChild(s);
+    });
+  });
+
+  window.__hpxActive = window.__hpxActive || new Map();
+
+  function initFxIn(root){
+    if (!window.HPX) return;
+    const els = root.querySelectorAll('[data-fx]');
+    els.forEach((el) => {
+      if (window.__hpxActive.has(el)) return;
+      const name = el.getAttribute('data-fx');
+      const fn = window.HPX[name];
+      if (typeof fn !== 'function') return;
+      try {
+        const handle = fn(el, {}) || { stop(){} };
+        window.__hpxActive.set(el, handle);
+      } catch(e){ console.warn('[hpx-fx]', name, e); }
+    });
+  }
+
+  function stopFxIn(root){
+    const els = root.querySelectorAll('[data-fx]');
+    els.forEach((el) => {
+      const h = window.__hpxActive.get(el);
+      if (h && typeof h.stop === 'function'){
+        try{ h.stop(); }catch(e){}
+      }
+      window.__hpxActive.delete(el);
+    });
+  }
+
+  function reinitFxIn(root){
+    stopFxIn(root);
+    initFxIn(root);
+  }
+  window.__hpxReinit = reinitFxIn;
+
+  function boot(){
+    ready.then(() => {
+      const active = document.querySelector('.slide.is-active') || document.querySelector('.slide');
+      if (active) initFxIn(active);
+
+      // Watch all slides for class changes
+      const slides = document.querySelectorAll('.slide');
+      slides.forEach((sl) => {
+        const mo = new MutationObserver((muts) => {
+          for (const m of muts){
+            if (m.attributeName === 'class'){
+              if (sl.classList.contains('is-active')) initFxIn(sl);
+              else stopFxIn(sl);
+            }
+          }
+        });
+        mo.observe(sl, { attributes: true, attributeFilter: ['class'] });
+      });
+    });
+  }
+
+  if (document.readyState === 'loading'){
+    document.addEventListener('DOMContentLoaded', boot);
+  } else {
+    boot();
+  }
+})();

package/skills/design-templates/html-ppt/assets/base.css

@@ -0,0 +1,150 @@
+/* html-ppt :: base.css — reset + shared tokens + layout primitives */
+/* Default tokens. Themes in assets/themes/*.css override the :root block. */
+:root {
+  --bg: #ffffff;
+  --bg-soft: #f7f7f8;
+  --surface: #ffffff;
+  --surface-2: #f2f2f4;
+  --border: rgba(0,0,0,.08);
+  --border-strong: rgba(0,0,0,.16);
+  --text-1: #111216;
+  --text-2: #55596a;
+  --text-3: #8a8f9e;
+  --accent: #3b6cff;
+  --accent-2: #7a5cff;
+  --accent-3: #ff5c8a;
+  --good: #1aaf6c;
+  --warn: #f5a524;
+  --bad:  #e0445a;
+  --grad: linear-gradient(135deg,#3b6cff,#7a5cff 55%,#ff5c8a);
+  --grad-soft: linear-gradient(135deg,#eef2ff,#f5ecff 55%,#ffeef5);
+  --radius: 18px;
+  --radius-sm: 12px;
+  --radius-lg: 26px;
+  --shadow: 0 10px 30px rgba(18,24,40,.08), 0 2px 6px rgba(18,24,40,.04);
+  --shadow-lg: 0 24px 60px rgba(18,24,40,.14), 0 6px 16px rgba(18,24,40,.06);
+  --font-sans: 'Inter','Noto Sans SC',-apple-system,BlinkMacSystemFont,Helvetica,Arial,sans-serif;
+  --font-serif: 'Playfair Display','Noto Serif SC',Georgia,serif;
+  --font-mono: 'JetBrains Mono','IBM Plex Mono',SFMono-Regular,Menlo,monospace;
+  --font-display: var(--font-sans);
+  --letter-tight: -.03em;
+  --letter-normal: -.01em;
+  --ease: cubic-bezier(.4,0,.2,1);
+}
+
+*,*::before,*::after{box-sizing:border-box}
+html,body{margin:0;padding:0;background:var(--bg);color:var(--text-1);
+  font-family:var(--font-sans);font-weight:400;line-height:1.6;
+  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
+  letter-spacing:var(--letter-normal)}
+img,svg,video{max-width:100%;display:block}
+a{color:var(--accent);text-decoration:none}
+a:hover{text-decoration:underline}
+code,kbd,pre,samp{font-family:var(--font-mono)}
+
+/* ================= SLIDE SYSTEM ================= */
+.deck{position:relative;width:100vw;height:100vh;overflow:hidden;background:var(--bg)}
+.slide{
+  position:absolute;inset:0;
+  display:flex;flex-direction:column;justify-content:center;
+  padding:72px 96px;
+  box-sizing:border-box;
+  opacity:0;pointer-events:none;
+  transition:opacity .5s var(--ease), transform .5s var(--ease);
+  transform:translateX(30px);
+  overflow:hidden;
+}
+.slide.is-active{opacity:1;pointer-events:auto;transform:translateX(0);z-index:2}
+.slide.is-prev{transform:translateX(-30px)}
+
+/* single-page standalone (used when a layout file is opened directly) */
+body.single .slide{position:relative;width:100vw;height:100vh;opacity:1;transform:none;pointer-events:auto}
+
+/* ================= TYPOGRAPHY ================= */
+.eyebrow{font-size:13px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--text-3)}
+.kicker{font-size:14px;font-weight:600;color:var(--accent);letter-spacing:.08em;text-transform:uppercase}
+h1.title,.h1{font-family:var(--font-display);font-size:72px;line-height:1.05;font-weight:800;letter-spacing:var(--letter-tight);margin:0 0 18px;color:var(--text-1)}
+h2.title,.h2{font-family:var(--font-display);font-size:54px;line-height:1.1;font-weight:700;letter-spacing:var(--letter-tight);margin:0 0 14px}
+h3,.h3{font-size:32px;line-height:1.2;font-weight:600;letter-spacing:var(--letter-normal);margin:0 0 10px}
+h4,.h4{font-size:22px;line-height:1.3;font-weight:600;margin:0 0 8px}
+.lede{font-size:22px;line-height:1.55;color:var(--text-2);font-weight:300;max-width:62ch}
+.dim{color:var(--text-2)}
+.dim2{color:var(--text-3)}
+.mono{font-family:var(--font-mono)}
+.serif{font-family:var(--font-serif)}
+.gradient-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
+
+/* ================= LAYOUT PRIMITIVES ================= */
+.stack>*+*{margin-top:14px}
+.row{display:flex;gap:24px;align-items:center}
+.row.wrap{flex-wrap:wrap}
+.grid{display:grid;gap:24px}
+.g2{grid-template-columns:repeat(2,1fr)}
+.g3{grid-template-columns:repeat(3,1fr)}
+.g4{grid-template-columns:repeat(4,1fr)}
+.center{display:flex;align-items:center;justify-content:center;text-align:center}
+.fill{flex:1}
+.sp-t{padding-top:24px}.sp-b{padding-bottom:24px}
+.mt-s{margin-top:8px}.mt-m{margin-top:18px}.mt-l{margin-top:32px}
+.mb-s{margin-bottom:8px}.mb-m{margin-bottom:18px}.mb-l{margin-bottom:32px}
+
+/* ================= CARDS ================= */
+.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
+  padding:26px 28px;box-shadow:var(--shadow);position:relative;overflow:hidden}
+.card-soft{background:var(--surface-2);border:1px solid var(--border)}
+.card-outline{background:transparent;border:1.5px solid var(--border-strong);box-shadow:none}
+.card-accent{background:var(--surface);border-top:3px solid var(--accent)}
+.card-hover{transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
+.card-hover:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
+
+.pill{display:inline-block;padding:4px 12px;border-radius:999px;font-size:12px;font-weight:500;
+  background:var(--surface-2);color:var(--text-2);border:1px solid var(--border)}
+.pill-accent{background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--accent);border-color:color-mix(in srgb,var(--accent) 28%,transparent)}
+
+/* ================= BARS / DIVIDERS ================= */
+.divider{height:1px;background:var(--border);width:100%}
+.divider-accent{height:3px;width:72px;background:var(--accent);border-radius:2px}
+
+/* ================= CHROME (header/footer/progress) ================= */
+.deck-header{position:absolute;top:24px;left:40px;right:40px;display:flex;align-items:center;justify-content:space-between;
+  font-size:12px;color:var(--text-3);letter-spacing:.12em;text-transform:uppercase;z-index:10;pointer-events:none}
+.deck-footer{position:absolute;bottom:24px;left:40px;right:40px;display:flex;align-items:center;justify-content:space-between;
+  font-size:12px;color:var(--text-3);z-index:10;pointer-events:none}
+.slide-number::before{content:attr(data-current)}
+.slide-number::after{content:" / " attr(data-total)}
+.progress-bar{position:fixed;left:0;right:0;bottom:0;height:3px;background:transparent;z-index:20}
+.progress-bar > span{display:block;height:100%;width:0;background:var(--accent);transition:width .3s var(--ease)}
+
+/* ================= PRESENTER / OVERVIEW ================= */
+.notes{display:none!important}
+.notes-overlay{position:fixed;inset:auto 0 0 0;max-height:42vh;background:rgba(20,22,30,.95);color:#e8ebf4;
+  padding:20px 32px;font-size:16px;line-height:1.6;border-top:1px solid rgba(255,255,255,.1);transform:translateY(100%);
+  transition:transform .3s var(--ease);z-index:40;overflow:auto;font-family:var(--font-sans)}
+.notes-overlay.open{transform:translateY(0)}
+.overview{position:fixed;inset:0;background:rgba(10,12,18,.92);backdrop-filter:blur(12px);z-index:50;
+  display:none;padding:40px;overflow:auto}
+.overview.open{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;align-content:start}
+.overview .thumb{background:var(--surface);border:1px solid var(--border);border-radius:12px;
+  aspect-ratio:16/9;overflow:hidden;cursor:pointer;position:relative;color:var(--text-1);padding:16px;
+  font-size:11px;transition:transform .2s var(--ease)}
+.overview .thumb:hover{transform:scale(1.04)}
+.overview .thumb .n{position:absolute;top:8px;left:10px;font-weight:700;font-size:14px;color:var(--text-3)}
+.overview .thumb .t{position:absolute;bottom:10px;left:14px;right:14px;font-weight:600;color:var(--text-1)}
+
+/* ================= PRESENTER VIEW ================= */
+/* Presenter view opens in a separate popup window (S key).
+ * All presenter styles are self-contained in the popup HTML generated by runtime.js.
+ * The audience window (this file) is NOT affected — it stays as normal deck view.
+ * Only the .notes class below is needed to hide speaker notes from audience. */
+
+/* ================= UTILITY ================= */
+.hidden{display:none!important}
+.nowrap{white-space:nowrap}
+.tr{text-align:right}.tc{text-align:center}.tl{text-align:left}
+.uppercase{text-transform:uppercase;letter-spacing:.12em}
+
+/* ================= PRINT ================= */
+@media print{
+  .slide{position:relative;opacity:1!important;transform:none!important;page-break-after:always;height:100vh}
+  .deck-header,.deck-footer,.progress-bar,.notes-overlay,.overview{display:none!important}
+}

package/skills/design-templates/html-ppt/assets/fonts.css

@@ -0,0 +1,9 @@
+/* html-ppt :: shared webfonts */
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600;700;800;900&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@200;300;400;500;600;700;900&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@300;400;600;700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,800;1,400&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@300;400;500;700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&display=swap');