Orris

Make me a presentation on CVA with appropriate images attached

Asking for Preferences
Reading File
Reading File
Reading File
Finding Sources
Finding Sources
Searching Images

ischemic stroke brain CT scan infarction

Reading File
Reading File
Searching Images

hemorrhagic stroke intracerebral hemorrhage CT brain

Searching Images

stroke pathophysiology ischemic penumbra diagram

Reading File
Searching Images

FAST stroke recognition face arm speech time symptoms

Searching Images

stroke treatment tPA thrombolysis thrombectomy management

Reading File
Searching Images

stroke risk factors hypertension diabetes atrial fibrillation

Running Command

mkdir -p /home/daytona/workspace/cva-presentation && ls /home/daytona/workspace/…

Writing File

~/cva-presentation/build.js

const pptxgen = require("pptxgenjs");
const { execSync } = require("child_process");

// ─── Colour palette ──────────────────────────────────────────────────────────
const NAVY   = "0D2B55";   // dominant background
const TEAL   = "1A8A7A";   // accent / section bars
const WHITE  = "FFFFFF";
const OFFWHITE = "E8F0F7";
const LIGHT_TEAL = "A8D8D0";
const ORANGE = "E86A1A";   // high-emphasis accent
const DARK   = "122035";

// ─── Helper to fetch images as base64 ────────────────────────────────────────
function fetchImages(urls) {
  try {
    const result = execSync(
      `node /home/daytona/skills/shared/scripts/fetch_images.js ${urls.map(u => `"${u}"`).join(" ")}`,
      { timeout: 60000 }
    ).toString();
    return JSON.parse(result);
  } catch (e) {
    console.error("Image fetch error:", e.message);
    return urls.map(u => ({ url: u, base64: null, error: e.message }));
  }
}

// ─── Image URLs ───────────────────────────────────────────────────────────────
const IMG_URLS = {
  penumbra:    "https://cdn.orris.care/cdss_images/pmc_clinical_VQA_c3613ee0c87f8624fdfb5c89a6f62f4ec1e18d7baca5d47cdd41c56ade7abbf9.jpg",
  ischemicCT:  "https://cdn.orris.care/cdss_images/pmc_clinical_VQA_bb2c559ca43cf7729fbfc39b45811a59878f2dfba97813b9630c6d1d33823287.jpg",
  ischemicCT2: "https://cdn.orris.care/cdss_images/pmc_clinical_VQA_aa51b36d16b00a49b1c8e373f3fa79f6f853dd169facf25520754f9cc9a17ae7.jpg",
  hemorrhageCT:"https://cdn.orris.care/cdss_images/pmc_clinical_VQA_ba84bd6b30d9bd2c2eafa5d43c0af30cae5e074b194d1b3f729c84cccb373b34.jpg",
  thrombectomy:"https://cdn.orris.care/cdss_images/pmc_clinical_VQA_e2f9935e673530fffb0a9f1f1af266e4e236181ccc17e06ddfd0128eff01cc45.jpg",
  riskFactors: "https://cdn.orris.care/cdss_images/pmc_clinical_VQA_f2fa2370c44952002821453c124fa99559322ad8393dd4d9bf1ca86134631162.jpg",
  mgmtFlow:    "https://cdn.orris.care/cdss_images/b3fdac342455aeedb70c9edf5bd1fcf092ea20d3f2446af2fd6fac2a44870138.png",
  hemorrhage2: "https://cdn.orris.care/cdss_images/pmc_clinical_VQA_8aab0971b40205cf5c487a5acd614d6593447a4a31e59ca6059836b43510b260.jpg",
};

console.log("Fetching images...");
const imgs = fetchImages(Object.values(IMG_URLS));
const imgMap = {};
Object.keys(IMG_URLS).forEach((k, i) => {
  imgMap[k] = imgs[i] && !imgs[i].error ? imgs[i].base64 : null;
  if (!imgMap[k]) console.warn(`  ⚠ Failed: ${k}`);
  else console.log(`  βœ“ ${k}`);
});

// ─── Presentation ─────────────────────────────────────────────────────────────
const pres = new pptxgen();
pres.layout  = "LAYOUT_16x9";
pres.title   = "Cerebrovascular Accident (CVA) / Stroke";
pres.author  = "Medical Education";

// ─── Helper: section header bar ───────────────────────────────────────────────
function addHeaderBar(slide, title, subtitle) {
  // Dark left panel
  slide.addShape(pres.ShapeType.rect, { x: 0, y: 0, w: 10, h: 0.75, fill: { color: NAVY } });
  slide.addShape(pres.ShapeType.rect, { x: 0, y: 0.75, w: 10, h: 0.08, fill: { color: TEAL } });
  slide.addText(title, {
    x: 0.3, y: 0, w: 9.4, h: 0.75,
    fontSize: 22, bold: true, color: WHITE, valign: "middle", margin: 0
  });
  if (subtitle) {
    slide.addText(subtitle, {
      x: 0.3, y: 0.78, w: 9.4, h: 0.35,
      fontSize: 11, color: LIGHT_TEAL, italic: true, margin: 0
    });
  }
}

// ─── Helper: bullet list ─────────────────────────────────────────────────────
function makeBullets(items, opts = {}) {
  return items.map((txt, i) => ({
    text: txt,
    options: {
      bullet: { type: "bullet" },
      fontSize: opts.fontSize || 15,
      color: opts.color || DARK,
      bold: opts.bold || false,
      breakLine: i < items.length - 1
    }
  }));
}

// ════════════════════════════════════════════════════════════════════════════
//  SLIDE 1 β€” TITLE
// ════════════════════════════════════════════════════════════════════════════
{
  const s = pres.addSlide();
  // Full-bleed navy background
  s.addShape(pres.ShapeType.rect, { x: 0, y: 0, w: 10, h: 5.625, fill: { color: NAVY } });
  // Decorative teal stripe
  s.addShape(pres.ShapeType.rect, { x: 0, y: 3.8, w: 10, h: 0.12, fill: { color: TEAL } });
  s.addShape(pres.ShapeType.rect, { x: 0, y: 3.95, w: 10, h: 0.05, fill: { color: ORANGE } });

  s.addText("Cerebrovascular Accident", {
    x: 0.6, y: 1.0, w: 8.8, h: 1.0,
    fontSize: 42, bold: true, color: WHITE, align: "center"
  });
  s.addText("( CVA / Stroke )", {
    x: 0.6, y: 2.0, w: 8.8, h: 0.7,
    fontSize: 28, color: LIGHT_TEAL, align: "center"
  });
  s.addText("An Introductory Overview for Medical Students", {
    x: 0.6, y: 2.9, w: 8.8, h: 0.5,
    fontSize: 16, color: OFFWHITE, align: "center", italic: true
  });
  s.addText("Harrison's Principles of Internal Medicine, 22e  β€’  Adams & Victor's Neurology, 12e  β€’  Family Medicine 9e", {
    x: 0.6, y: 4.8, w: 8.8, h: 0.45,
    fontSize: 9, color: LIGHT_TEAL, align: "center", italic: true
  });
}

// ════════════════════════════════════════════════════════════════════════════
//  SLIDE 2 β€” OUTLINE
// ════════════════════════════════════════════════════════════════════════════
{
  const s = pres.addSlide();
  s.addShape(pres.ShapeType.rect, { x: 0, y: 0, w: 10, h: 5.625, fill: { color: OFFWHITE } });
  addHeaderBar(s, "Outline", "What we'll cover today");

  const topics = [
    "1.  Definition & Epidemiology",
    "2.  Types of Stroke β€” Ischemic vs Hemorrhagic",
    "3.  Pathophysiology & the Ischemic Penumbra",
    "4.  Risk Factors",
    "5.  Clinical Presentation & FAST",
    "6.  Investigations & Imaging",
    "7.  Acute Management",
    "8.  Secondary Prevention & Complications",
    "9.  Key Takeaways",
  ];

  s.addText(topics.map((t, i) => ({
    text: t, options: { breakLine: i < topics.length - 1, fontSize: 17, color: NAVY, bold: false }
  })), { x: 1.2, y: 1.3, w: 7.5, h: 4.0 });
}

// ════════════════════════════════════════════════════════════════════════════
//  SLIDE 3 β€” DEFINITION & EPIDEMIOLOGY
// ════════════════════════════════════════════════════════════════════════════
{
  const s = pres.addSlide();
  s.addShape(pres.ShapeType.rect, { x: 0, y: 0, w: 10, h: 5.625, fill: { color: OFFWHITE } });
  addHeaderBar(s, "Definition & Epidemiology");

  // Definition box
  s.addShape(pres.ShapeType.rect, { x: 0.3, y: 1.05, w: 9.4, h: 1.05, fill: { color: TEAL }, line: { color: TEAL } });
  s.addText([
    { text: "Stroke (CVA): ", options: { bold: true, color: WHITE, fontSize: 14 } },
    { text: "abrupt onset of neurologic deficit attributable to a vascular cause. Defined clinically; brain imaging confirms subtype.", options: { color: WHITE, fontSize: 14 } }
  ], { x: 0.4, y: 1.07, w: 9.2, h: 1.0, valign: "middle" });

  // Two-column stats
  const col1 = [
    "2nd leading cause of death worldwide",
    "7.1 million deaths from stroke in 2020",
    "~7 million Americans (β‰₯20 yrs) report prior stroke",
    "Prevalence set to rise by 3.4 million over next decade",
  ];
  const col2 = [
    "~87% of strokes are ischemic",
    "~13% are hemorrhagic (ICH + SAH)",
    "Age-standardised death rate fell 15% 2010–2020",
    "Remains the 2nd most disabling condition in adults β‰₯50",
  ];

  s.addText("Global Burden", { x: 0.3, y: 2.25, w: 4.5, h: 0.35, fontSize: 13, bold: true, color: NAVY });
  s.addText(makeBullets(col1, { fontSize: 13 }), { x: 0.3, y: 2.6, w: 4.5, h: 2.5 });

  s.addText("Stroke Subtypes", { x: 5.2, y: 2.25, w: 4.5, h: 0.35, fontSize: 13, bold: true, color: NAVY });
  s.addText(makeBullets(col2, { fontSize: 13 }), { x: 5.2, y: 2.6, w: 4.5, h: 2.5 });

  s.addShape(pres.ShapeType.line, { x: 4.9, y: 2.2, w: 0, h: 3.0, line: { color: TEAL, width: 1.5 } });

  s.addText("Source: Harrison's Principles of Internal Medicine 22e", {
    x: 0.3, y: 5.3, w: 9.4, h: 0.2, fontSize: 8, color: "888888", italic: true
  });
}

// ════════════════════════════════════════════════════════════════════════════
//  SLIDE 4 β€” TYPES OF STROKE
// ════════════════════════════════════════════════════════════════════════════
{
  const s = pres.addSlide();
  s.addShape(pres.ShapeType.rect, { x: 0, y: 0, w: 10, h: 5.625, fill: { color: OFFWHITE } });
  addHeaderBar(s, "Types of Stroke");

  // Ischemic box
  s.addShape(pres.ShapeType.rect, { x: 0.25, y: 1.1, w: 4.5, h: 0.45, fill: { color: NAVY } });
  s.addText("Ischemic Stroke (~87%)", { x: 0.25, y: 1.1, w: 4.5, h: 0.45, fontSize: 14, bold: true, color: WHITE, align: "center", valign: "middle" });

  const ischemicPoints = [
    "Thrombotic: atherosclerotic plaque rupture",
    "Embolic: cardiac source (AF, valvular disease)",
    "Lacunar: small-vessel lipohyalinosis",
    "Cryptogenic: no identified cause",
  ];
  s.addText(makeBullets(ischemicPoints, { fontSize: 13 }), { x: 0.25, y: 1.6, w: 4.5, h: 1.8 });

  if (imgMap.ischemicCT2) {
    s.addImage({ data: imgMap.ischemicCT2, x: 0.25, y: 3.45, w: 4.5, h: 1.9 });
    s.addText("CT: Right MCA territory infarct", { x: 0.25, y: 5.2, w: 4.5, h: 0.2, fontSize: 8, color: "555555", italic: true, align: "center" });
  }

  // Hemorrhagic box
  s.addShape(pres.ShapeType.rect, { x: 5.25, y: 1.1, w: 4.5, h: 0.45, fill: { color: ORANGE } });
  s.addText("Hemorrhagic Stroke (~13%)", { x: 5.25, y: 1.1, w: 4.5, h: 0.45, fontSize: 14, bold: true, color: WHITE, align: "center", valign: "middle" });

  const hemorPoints = [
    "Intracerebral hemorrhage (ICH): HTN, amyloid angiopathy",
    "Subarachnoid hemorrhage (SAH): aneurysm rupture",
    "Produces mass effect + raised ICP",
    "Higher early mortality than ischemic stroke",
  ];
  s.addText(makeBullets(hemorPoints, { fontSize: 13 }), { x: 5.25, y: 1.6, w: 4.5, h: 1.8 });

  if (imgMap.hemorrhageCT) {
    s.addImage({ data: imgMap.hemorrhageCT, x: 5.25, y: 3.45, w: 4.5, h: 1.9 });
    s.addText("CT: Acute ICH β€” hyperdense hematoma", { x: 5.25, y: 5.2, w: 4.5, h: 0.2, fontSize: 8, color: "555555", italic: true, align: "center" });
  }

  // Divider
  s.addShape(pres.ShapeType.line, { x: 4.9, y: 1.05, w: 0, h: 4.5, line: { color: TEAL, width: 1.5 } });

  // TIA note
  s.addShape(pres.ShapeType.rect, { x: 0.25, y: 5.3, w: 9.5, h: 0.25, fill: { color: LIGHT_TEAL } });
  s.addText("TIA: Symptoms resolve within 24 h with NO infarct on imaging β€” high-risk precursor requiring urgent evaluation", {
    x: 0.25, y: 5.3, w: 9.5, h: 0.25, fontSize: 9.5, color: NAVY, bold: false, align: "center", valign: "middle"
  });
}

// ════════════════════════════════════════════════════════════════════════════
//  SLIDE 5 β€” PATHOPHYSIOLOGY & PENUMBRA
// ════════════════════════════════════════════════════════════════════════════
{
  const s = pres.addSlide();
  s.addShape(pres.ShapeType.rect, { x: 0, y: 0, w: 10, h: 5.625, fill: { color: OFFWHITE } });
  addHeaderBar(s, "Pathophysiology & the Ischemic Penumbra");

  const pathPoints = [
    "Focal ↓ in cerebral blood flow β†’ rapid energy failure (neurons lack glycogen)",
    "Seconds: neurological symptoms appear",
    "Minutes: infarction / cell death if flow not restored",
    "Ischemic core: irreversibly damaged, necrotic tissue",
    "Penumbra: hypo-perfused but salvageable tissue β€” TARGET of treatment",
    "Benign oligemia: reduced flow, expected to recover spontaneously",
    "\"Time is Brain\" β€” 1.9 million neurons lost per minute of untreated stroke",
  ];

  s.addText(makeBullets(pathPoints, { fontSize: 13.5 }), { x: 0.3, y: 1.1, w: 5.5, h: 4.1 });

  if (imgMap.penumbra) {
    s.addImage({ data: imgMap.penumbra, x: 6.0, y: 1.1, w: 3.7, h: 3.7 });
    s.addText("Ischemic core expands into penumbra over time", {
      x: 6.0, y: 4.85, w: 3.7, h: 0.3, fontSize: 9, color: "555555", italic: true, align: "center"
    });
  }

  s.addText("Source: Harrison's Principles of Internal Medicine 22e", {
    x: 0.3, y: 5.3, w: 5.5, h: 0.2, fontSize: 8, color: "888888", italic: true
  });
}

// ════════════════════════════════════════════════════════════════════════════
//  SLIDE 6 β€” RISK FACTORS
// ════════════════════════════════════════════════════════════════════════════
{
  const s = pres.addSlide();
  s.addShape(pres.ShapeType.rect, { x: 0, y: 0, w: 10, h: 5.625, fill: { color: OFFWHITE } });
  addHeaderBar(s, "Risk Factors");

  const modifiable = [
    "Hypertension (greatest modifiable RF)",
    "Atrial fibrillation (embolic stroke)",
    "Diabetes mellitus",
    "Hyperlipidaemia / dyslipidaemia",
    "Smoking (doubles lifetime stroke risk)",
    "Obesity & physical inactivity",
    "Carotid artery stenosis",
  ];
  const nonMod = [
    "Age (risk doubles each decade after 55)",
    "Male sex (higher at younger age)",
    "Family history / genetics",
    "Prior stroke or TIA",
    "Race/ethnicity (higher in Black, Hispanic patients)",
  ];

  s.addShape(pres.ShapeType.rect, { x: 0.25, y: 1.1, w: 3.7, h: 0.4, fill: { color: TEAL } });
  s.addText("Modifiable", { x: 0.25, y: 1.1, w: 3.7, h: 0.4, fontSize: 13, bold: true, color: WHITE, align: "center", valign: "middle" });
  s.addText(makeBullets(modifiable, { fontSize: 12.5 }), { x: 0.25, y: 1.55, w: 3.7, h: 3.8 });

  s.addShape(pres.ShapeType.rect, { x: 4.1, y: 1.1, w: 3.2, h: 0.4, fill: { color: NAVY } });
  s.addText("Non-Modifiable", { x: 4.1, y: 1.1, w: 3.2, h: 0.4, fontSize: 13, bold: true, color: WHITE, align: "center", valign: "middle" });
  s.addText(makeBullets(nonMod, { fontSize: 12.5 }), { x: 4.1, y: 1.55, w: 3.2, h: 3.8 });

  if (imgMap.riskFactors) {
    s.addImage({ data: imgMap.riskFactors, x: 7.4, y: 1.1, w: 2.4, h: 4.2 });
  }
}

// ════════════════════════════════════════════════════════════════════════════
//  SLIDE 7 β€” CLINICAL PRESENTATION & FAST
// ════════════════════════════════════════════════════════════════════════════
{
  const s = pres.addSlide();
  s.addShape(pres.ShapeType.rect, { x: 0, y: 0, w: 10, h: 5.625, fill: { color: NAVY } });
  addHeaderBar(s, "Clinical Presentation & the FAST Mnemonic");

  // FAST boxes
  const fastData = [
    { letter: "F", word: "FACIAL DROOP", desc: "Ask the patient to smile β€” does one side droop?", color: "E84040" },
    { letter: "A", word: "ARM WEAKNESS", desc: "Ask to raise both arms β€” does one drift downward?", color: ORANGE },
    { letter: "S", word: "SPEECH CHANGE", desc: "Slurred, strange, or unable to speak/understand?", color: TEAL },
    { letter: "T", word: "TIME TO CALL", desc: "Call emergency services immediately β€” every minute counts", color: "6C5CE7" },
  ];

  fastData.forEach((item, i) => {
    const x = 0.25 + i * 2.37;
    s.addShape(pres.ShapeType.rect, { x, y: 1.1, w: 2.2, h: 3.6, fill: { color: item.color }, line: { color: WHITE, width: 0.5 } });
    s.addText(item.letter, { x, y: 1.1, w: 2.2, h: 1.0, fontSize: 52, bold: true, color: WHITE, align: "center", valign: "middle" });
    s.addShape(pres.ShapeType.line, { x, y: 2.1, w: 2.2, h: 0, line: { color: WHITE, width: 0.8 } });
    s.addText(item.word, { x, y: 2.1, w: 2.2, h: 0.5, fontSize: 11, bold: true, color: WHITE, align: "center", valign: "middle" });
    s.addText(item.desc, { x: x + 0.08, y: 2.65, w: 2.05, h: 2.0, fontSize: 11, color: WHITE, align: "center" });
  });

  // Additional symptoms
  s.addText("Other sudden-onset red flags: loss of vision in one eye, severe headache (thunderclap), sudden vertigo/ataxia, hemisensory loss", {
    x: 0.25, y: 4.85, w: 9.5, h: 0.5, fontSize: 10, color: OFFWHITE, italic: true, align: "center"
  });
}

// ════════════════════════════════════════════════════════════════════════════
//  SLIDE 8 β€” INVESTIGATIONS & IMAGING
// ════════════════════════════════════════════════════════════════════════════
{
  const s = pres.addSlide();
  s.addShape(pres.ShapeType.rect, { x: 0, y: 0, w: 10, h: 5.625, fill: { color: OFFWHITE } });
  addHeaderBar(s, "Investigations & Imaging", "Rapid evaluation is mandatory β€” time is brain");

  const invRows = [
    { cat: "First-line Imaging", items: "NCCT head (exclude haemorrhage) β€’ CTA (large vessel occlusion)" },
    { cat: "MRI / DWI", items: "Most sensitive for acute infarct within minutes; restricted diffusion confirms ischaemia" },
    { cat: "Bloods", items: "FBC, U&E, glucose, coagulation, lipids, HbA1c, troponin" },
    { cat: "Cardiac", items: "12-lead ECG (AF detection) β€’ Echo (cardioembolic source) β€’ Holter if paroxysmal AF" },
    { cat: "Vascular", items: "Carotid Doppler / CTA neck (carotid stenosis) β€’ MRA brain" },
  ];

  invRows.forEach((row, i) => {
    const y = 1.22 + i * 0.78;
    const bg = i % 2 === 0 ? WHITE : "EAF2F8";
    s.addShape(pres.ShapeType.rect, { x: 0.25, y, w: 9.5, h: 0.72, fill: { color: bg } });
    s.addText(row.cat, { x: 0.3, y, w: 2.5, h: 0.72, fontSize: 12, bold: true, color: NAVY, valign: "middle" });
    s.addShape(pres.ShapeType.line, { x: 2.85, y, w: 0, h: 0.72, line: { color: TEAL, width: 1 } });
    s.addText(row.items, { x: 2.95, y, w: 6.7, h: 0.72, fontSize: 12, color: DARK, valign: "middle" });
  });

  if (imgMap.ischemicCT) {
    s.addImage({ data: imgMap.ischemicCT, x: 0.25, y: 5.18, w: 0.0, h: 0.0 }); // hidden anchor
  }
  s.addText("CT is the standard first imaging modality β€” it rapidly distinguishes ischaemic from haemorrhagic stroke", {
    x: 0.3, y: 5.3, w: 9.4, h: 0.2, fontSize: 9, color: "555555", italic: true
  });
}

// ════════════════════════════════════════════════════════════════════════════
//  SLIDE 9 β€” CT IMAGING COMPARISON
// ════════════════════════════════════════════════════════════════════════════
{
  const s = pres.addSlide();
  s.addShape(pres.ShapeType.rect, { x: 0, y: 0, w: 10, h: 5.625, fill: { color: DARK } });
  addHeaderBar(s, "CT Imaging: Ischemic vs Hemorrhagic");

  if (imgMap.ischemicCT) {
    s.addImage({ data: imgMap.ischemicCT, x: 0.3, y: 1.1, w: 4.4, h: 3.7 });
  }
  s.addShape(pres.ShapeType.rect, { x: 0.3, y: 4.85, w: 4.4, h: 0.55, fill: { color: TEAL } });
  s.addText([
    { text: "Ischemic: ", options: { bold: true, color: WHITE } },
    { text: "Hypoattenuating (dark) zone β€” right MCA territory", options: { color: WHITE } }
  ], { x: 0.3, y: 4.85, w: 4.4, h: 0.55, fontSize: 11, valign: "middle", align: "center" });

  if (imgMap.hemorrhage2) {
    s.addImage({ data: imgMap.hemorrhage2, x: 5.3, y: 1.1, w: 4.4, h: 3.7 });
  }
  s.addShape(pres.ShapeType.rect, { x: 5.3, y: 4.85, w: 4.4, h: 0.55, fill: { color: ORANGE } });
  s.addText([
    { text: "Hemorrhagic: ", options: { bold: true, color: WHITE } },
    { text: "Hyperattenuating (bright) hematoma β€” acute blood", options: { color: WHITE } }
  ], { x: 5.3, y: 4.85, w: 4.4, h: 0.55, fontSize: 11, valign: "middle", align: "center" });

  s.addShape(pres.ShapeType.line, { x: 5.0, y: 1.0, w: 0, h: 4.5, line: { color: TEAL, width: 1.5 } });
}

// ════════════════════════════════════════════════════════════════════════════
//  SLIDE 10 β€” ACUTE MANAGEMENT
// ════════════════════════════════════════════════════════════════════════════
{
  const s = pres.addSlide();
  s.addShape(pres.ShapeType.rect, { x: 0, y: 0, w: 10, h: 5.625, fill: { color: OFFWHITE } });
  addHeaderBar(s, "Acute Management", "General + Ischemic stroke specific");

  // General
  s.addShape(pres.ShapeType.rect, { x: 0.25, y: 1.0, w: 4.5, h: 0.38, fill: { color: NAVY } });
  s.addText("General Principles (all strokes)", { x: 0.25, y: 1.0, w: 4.5, h: 0.38, fontSize: 12, bold: true, color: WHITE, align: "center", valign: "middle" });
  const general = [
    "ABCs β€” airway, breathing, circulation",
    "Supplemental Oβ‚‚ if SpOβ‚‚ < 94%",
    "Continuous cardiac monitoring & ECG",
    "Blood glucose monitoring & correction",
    "Avoid aggressive BP lowering (auto-regulation)",
    "Admission to stroke unit (reduces mortality)",
  ];
  s.addText(makeBullets(general, { fontSize: 12 }), { x: 0.25, y: 1.4, w: 4.5, h: 2.8 });

  // Ischemic specific
  s.addShape(pres.ShapeType.rect, { x: 5.2, y: 1.0, w: 4.55, h: 0.38, fill: { color: TEAL } });
  s.addText("Ischemic Stroke Reperfusion", { x: 5.2, y: 1.0, w: 4.55, h: 0.38, fontSize: 12, bold: true, color: WHITE, align: "center", valign: "middle" });
  const ischemic = [
    "IV alteplase (rtPA): within 4.5 h of onset",
    "Contraindicated in haemorrhage (CT essential first)",
    "Endovascular thrombectomy: LVO within 24 h",
    "Aspirin 300 mg (if no lysis & not hemorrhagic)",
    "Target BP: allow ≀220/120 mmHg (pre-lysis <185/110)",
    "DVT prophylaxis from day 1",
  ];
  s.addText(makeBullets(ischemic, { fontSize: 12 }), { x: 5.2, y: 1.4, w: 4.55, h: 2.8 });

  s.addShape(pres.ShapeType.line, { x: 4.85, y: 0.95, w: 0, h: 3.5, line: { color: TEAL, width: 1.5 } });

  if (imgMap.thrombectomy) {
    s.addImage({ data: imgMap.thrombectomy, x: 0.3, y: 4.25, w: 9.4, h: 1.1 });
    s.addText("DSA: MCA occlusion (left) β†’ complete recanalization post-thrombectomy (right)", {
      x: 0.3, y: 5.18, w: 9.4, h: 0.2, fontSize: 8.5, color: "555555", italic: true, align: "center"
    });
  }
}

// ════════════════════════════════════════════════════════════════════════════
//  SLIDE 11 β€” MANAGEMENT FLOWCHART
// ════════════════════════════════════════════════════════════════════════════
{
  const s = pres.addSlide();
  s.addShape(pres.ShapeType.rect, { x: 0, y: 0, w: 10, h: 5.625, fill: { color: OFFWHITE } });
  addHeaderBar(s, "Stroke Management Pathway", "Harrison's Principles of Internal Medicine 22e");

  if (imgMap.mgmtFlow) {
    s.addImage({ data: imgMap.mgmtFlow, x: 0.3, y: 1.0, w: 9.4, h: 4.3 });
  } else {
    s.addText("(Flowchart image unavailable)", { x: 1, y: 2, w: 8, h: 2, fontSize: 18, color: "999999", align: "center" });
  }
}

// ════════════════════════════════════════════════════════════════════════════
//  SLIDE 12 β€” SECONDARY PREVENTION & COMPLICATIONS
// ════════════════════════════════════════════════════════════════════════════
{
  const s = pres.addSlide();
  s.addShape(pres.ShapeType.rect, { x: 0, y: 0, w: 10, h: 5.625, fill: { color: OFFWHITE } });
  addHeaderBar(s, "Secondary Prevention & Complications");

  const prevItems = [
    "Antiplatelet therapy: aspirin Β± clopidogrel (dual 3 weeks post-minor stroke/TIA)",
    "Anticoagulation: warfarin or NOAC for AF / cardioembolic source",
    "Statin therapy: high-intensity (atorvastatin 40–80 mg)",
    "BP control: target <130/80 mmHg (ACEI/ARB preferred)",
    "Carotid endarterectomy (CEA): β‰₯70% symptomatic stenosis within 2 weeks",
    "Lifestyle: smoking cessation, regular exercise, Mediterranean diet",
  ];

  const compItems = [
    "Aspiration pneumonia (most common early complication)",
    "DVT / pulmonary embolism",
    "Cerebral oedema (large MCA infarcts β†’ herniation)",
    "Post-stroke depression (~30% of survivors)",
    "Haemorrhagic transformation of ischaemic infarct",
    "Epilepsy (early ~2-5%, late ~5-10%)",
  ];

  s.addShape(pres.ShapeType.rect, { x: 0.25, y: 1.05, w: 4.5, h: 0.38, fill: { color: TEAL } });
  s.addText("Secondary Prevention", { x: 0.25, y: 1.05, w: 4.5, h: 0.38, fontSize: 12, bold: true, color: WHITE, align: "center", valign: "middle" });
  s.addText(makeBullets(prevItems, { fontSize: 12 }), { x: 0.25, y: 1.48, w: 4.5, h: 4.0 });

  s.addShape(pres.ShapeType.rect, { x: 5.2, y: 1.05, w: 4.55, h: 0.38, fill: { color: ORANGE } });
  s.addText("Common Complications", { x: 5.2, y: 1.05, w: 4.55, h: 0.38, fontSize: 12, bold: true, color: WHITE, align: "center", valign: "middle" });
  s.addText(makeBullets(compItems, { fontSize: 12 }), { x: 5.2, y: 1.48, w: 4.55, h: 4.0 });

  s.addShape(pres.ShapeType.line, { x: 4.85, y: 1.0, w: 0, h: 4.5, line: { color: TEAL, width: 1.5 } });
}

// ════════════════════════════════════════════════════════════════════════════
//  SLIDE 13 β€” KEY TAKEAWAYS
// ════════════════════════════════════════════════════════════════════════════
{
  const s = pres.addSlide();
  s.addShape(pres.ShapeType.rect, { x: 0, y: 0, w: 10, h: 5.625, fill: { color: NAVY } });
  addHeaderBar(s, "Key Takeaways");

  const takeaways = [
    { num: "1", text: "Stroke = abrupt vascular neurological deficit; TIA resolves <24 h with no infarct." },
    { num: "2", text: "FAST: Face / Arm / Speech / Time β€” teach patients to call emergency services immediately." },
    { num: "3", text: "Always do NCCT first β€” cannot give tPA without excluding haemorrhage." },
    { num: "4", text: "Ischemic: IV tPA within 4.5 h; thrombectomy for LVO within 24 h β€” the sooner the better." },
    { num: "5", text: "Haemorrhagic stroke: manage BP, reverse anticoagulation, consider surgical drainage." },
    { num: "6", text: "Top modifiable risk factors: hypertension, AF, smoking, diabetes, hyperlipidaemia." },
    { num: "7", text: "Secondary prevention = antiplatelet/anticoagulant + statin + BP control + lifestyle change." },
  ];

  takeaways.forEach((item, i) => {
    const y = 1.1 + i * 0.62;
    s.addShape(pres.ShapeType.ellipse, { x: 0.25, y: y + 0.04, w: 0.45, h: 0.45, fill: { color: TEAL } });
    s.addText(item.num, { x: 0.25, y: y + 0.04, w: 0.45, h: 0.45, fontSize: 14, bold: true, color: WHITE, align: "center", valign: "middle" });
    s.addText(item.text, { x: 0.85, y, w: 9.0, h: 0.58, fontSize: 13, color: OFFWHITE, valign: "middle" });
  });
}

// ════════════════════════════════════════════════════════════════════════════
//  SLIDE 14 β€” REFERENCES
// ════════════════════════════════════════════════════════════════════════════
{
  const s = pres.addSlide();
  s.addShape(pres.ShapeType.rect, { x: 0, y: 0, w: 10, h: 5.625, fill: { color: OFFWHITE } });
  addHeaderBar(s, "References");

  const refs = [
    "1.  Smith WS, Hemphill JC. Introduction to Cerebrovascular Diseases. In: Harrison's Principles of Internal Medicine, 22nd ed. McGraw-Hill, 2025.",
    "2.  Victor M, Ropper AH. Stroke and Cerebrovascular Diseases. In: Adams and Victor's Principles of Neurology, 12th ed. McGraw-Hill.",
    "3.  Siwek J et al. Stroke (Cerebrovascular Accident). In: Textbook of Family Medicine, 9th ed. Elsevier, 2021.",
    "4.  Grainger & Allison's Diagnostic Radiology. Cerebrovascular Disease and Stroke, 7th ed. Elsevier, 2021.",
    "5.  Fuster V et al. Stroke and Cerebrovascular Disease. In: Fuster & Hurst's The Heart, 15th ed. McGraw-Hill.",
    "6.  Powers WJ et al. Guidelines for the Early Management of Patients with Acute Ischemic Stroke. Stroke. 2019.",
  ];

  s.addText(refs.map((r, i) => ({
    text: r, options: { breakLine: i < refs.length - 1, fontSize: 13, color: DARK }
  })), { x: 0.4, y: 1.2, w: 9.2, h: 4.2 });
}

// ─── Export ───────────────────────────────────────────────────────────────────
const outPath = "/home/daytona/workspace/cva-presentation/CVA_Stroke_Presentation.pptx";
pres.writeFile({ fileName: outPath }).then(() => {
  console.log("βœ…  Saved:", outPath);
}).catch(err => {
  console.error("❌  Error:", err);
  process.exit(1);
});
Running Command

cd /home/daytona/workspace/cva-presentation && node build.js 2>&1

Running Command

ls -lh /home/daytona/workspace/cva-presentation/CVA_Stroke_Presentation.pptx

Your presentation is ready! 🧠

CVA Stroke Presentation

Presentation Β· PPTX

What's inside β€” 14 slides

#SlideImages
1Title β€” Navy/teal designβ€”
2Outlineβ€”
3Definition & Epidemiology β€” Harrison's statisticsβ€”
4Types of Stroke β€” Ischemic vs Hemorrhagic, TIA noteCT scan of MCA infarct + CT of acute ICH
5Pathophysiology & Ischemic PenumbraPenumbra diagram (core β†’ penumbra expansion)
6Risk Factors β€” Modifiable vs Non-ModifiableRisk factor infographic
7Clinical Presentation & FAST β€” bold 4-column layoutβ€”
8Investigations & Imaging β€” table formatβ€”
9CT Imaging Comparison β€” side-by-side dark slideIschemic CT (hypoattenuation) + Hemorrhagic CT (hyperattenuation)
10Acute Management β€” general + reperfusionDSA thrombectomy before/after
11Management Pathway FlowchartHarrison's stroke management flowchart
12Secondary Prevention & Complicationsβ€”
13Key Takeaways β€” numbered summaryβ€”
14References β€” 6 authoritative sourcesβ€”
Sources used: Harrison's Principles of Internal Medicine 22e, Adams & Victor's Principles of Neurology 12e, Textbook of Family Medicine 9e, Grainger & Allison's Diagnostic Radiology, Fuster & Hurst's The Heart 15e.

Visualise me how NSAID drugs acts inside body with a video explaining everything about NSAID drugs

Asking for Preferences
Reading File
Finding Sources
Finding Sources
Finding Sources
Finding Sources
Reading File
Reading File
Reading File
Running Command

mkdir -p /home/daytona/workspace/nsaid-explainer

Writing File

~/nsaid-explainer/index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>NSAIDs – How They Work Inside the Body</title>
<style>
  /* ── Reset & Base ─────────────────────────────────────────────────── */
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  :root {
    --navy:   #0D2B55;
    --teal:   #1A8A7A;
    --teal2:  #25C2A0;
    --orange: #E86A1A;
    --red:    #C0392B;
    --yellow: #F4C842;
    --white:  #FFFFFF;
    --offwhite: #F0F6FF;
    --light:  #D8EEF5;
    --dark:   #0a1e3d;
    --grey:   #888;
  }
  html, body { width:100%; height:100%; overflow:hidden; background:#000; }

  /* ── Scene container ─────────────────────────────────────────────── */
  #stage {
    width: 100vw; height: 100vh;
    position: relative; overflow: hidden;
    font-family: 'Segoe UI', system-ui, sans-serif;
  }

  /* ── Shared slide base ───────────────────────────────────────────── */
  .scene {
    position: absolute; inset: 0;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    padding: 40px 60px;
    opacity: 0; pointer-events: none;
    transition: opacity 0.6s ease;
  }
  .scene.active { opacity: 1; pointer-events: all; }

  /* ── Progress bar ────────────────────────────────────────────────── */
  #progress-bar {
    position: fixed; top: 0; left: 0; height: 4px;
    background: var(--teal2);
    transition: width 0.5s ease;
    z-index: 999;
  }

  /* ── Nav controls ────────────────────────────────────────────────── */
  #nav {
    position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%);
    display: flex; gap: 16px; align-items: center; z-index: 999;
  }
  .nav-btn {
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.3);
    color: #fff; font-size: 15px; font-weight: 600;
    padding: 9px 26px; border-radius: 30px; cursor: pointer;
    backdrop-filter: blur(8px);
    transition: background 0.2s, transform 0.15s;
  }
  .nav-btn:hover { background: rgba(255,255,255,0.25); transform: scale(1.04); }
  .nav-btn:disabled { opacity: 0.3; cursor: default; }
  #slide-counter {
    color: rgba(255,255,255,0.7); font-size: 13px; min-width: 70px; text-align: center;
  }

  /* ── Auto-play toggle ────────────────────────────────────────────── */
  #autoplay-btn {
    position: fixed; top: 16px; right: 20px; z-index: 999;
    background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.3);
    color: #fff; font-size: 12px; padding: 6px 14px; border-radius: 20px;
    cursor: pointer; backdrop-filter: blur(6px);
  }
  #autoplay-btn:hover { background: rgba(255,255,255,0.22); }

  /* ── Dot navigation ──────────────────────────────────────────────── */
  #dots {
    position: fixed; right: 20px; top: 50%; transform: translateY(-50%);
    display: flex; flex-direction: column; gap: 8px; z-index: 999;
  }
  .dot {
    width: 9px; height: 9px; border-radius: 50%;
    background: rgba(255,255,255,0.3); cursor: pointer;
    transition: background 0.3s, transform 0.2s;
  }
  .dot.active { background: var(--teal2); transform: scale(1.4); }

  /* ════════════════════════════════════════════════════════════════
     SCENE 0 β€” TITLE
  ════════════════════════════════════════════════════════════════ */
  #s0 { background: linear-gradient(135deg, #0a1e3d 0%, #0D2B55 60%, #1a4060 100%); }
  #s0 .pill-row { display:flex; gap:12px; flex-wrap:wrap; justify-content:center; margin-bottom:32px; }
  .pill {
    background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.2);
    color: rgba(255,255,255,0.85); border-radius: 40px;
    padding: 6px 18px; font-size: 13px;
    animation: floatPill 3s ease-in-out infinite alternate;
  }
  .pill:nth-child(2) { animation-delay: 0.4s; }
  .pill:nth-child(3) { animation-delay: 0.8s; }
  .pill:nth-child(4) { animation-delay: 1.2s; }
  .pill:nth-child(5) { animation-delay: 1.6s; }
  @keyframes floatPill { from { transform:translateY(0); } to { transform:translateY(-6px); } }

  #s0 h1 { font-size: clamp(36px,5vw,64px); color: #fff; text-align:center; font-weight:800; line-height:1.1; }
  #s0 h1 span { color: var(--teal2); }
  #s0 .subtitle { color: rgba(255,255,255,0.6); font-size: clamp(14px,2vw,20px); margin-top:16px; text-align:center; }
  #s0 .start-hint { margin-top:48px; color:rgba(255,255,255,0.4); font-size:13px; animation: pulse 2s infinite; }
  @keyframes pulse { 0%,100%{opacity:0.4} 50%{opacity:1} }

  /* ════════════════════════════════════════════════════════════════
     SCENE 1 β€” WHAT ARE NSAIDs?
  ════════════════════════════════════════════════════════════════ */
  #s1 { background: linear-gradient(160deg, #0D2B55, #113a6e); }
  #s1 .card-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; max-width:900px; width:100%; }
  .info-card {
    background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.15);
    border-radius: 16px; padding: 22px 24px;
    backdrop-filter: blur(6px);
    opacity: 0; transform: translateY(20px);
    transition: opacity 0.5s, transform 0.5s;
  }
  .info-card.show { opacity:1; transform:translateY(0); }
  .info-card .icon { font-size: 32px; margin-bottom: 10px; }
  .info-card h3 { color: var(--teal2); font-size: 16px; margin-bottom: 8px; }
  .info-card p, .info-card ul { color: rgba(255,255,255,0.8); font-size: 14px; line-height: 1.6; }
  .info-card ul { padding-left: 18px; }
  .info-card ul li { margin-bottom: 4px; }
  .scene-title { font-size: clamp(22px,3.5vw,36px); font-weight:700; color:#fff; margin-bottom:28px; text-align:center; }
  .scene-title span { color: var(--teal2); }

  /* ════════════════════════════════════════════════════════════════
     SCENE 2 β€” INJURY β†’ ARACHIDONIC ACID
  ════════════════════════════════════════════════════════════════ */
  #s2 { background: linear-gradient(150deg, #1a0a0a, #2d0f0f, #3a1a0a); }

  .body-svg-wrap { position:relative; width:100%; max-width:860px; }
  .body-svg-wrap svg { width:100%; }

  /* ════════════════════════════════════════════════════════════════
     SCENE 3 β€” COX PATHWAY (the core mechanism)
  ════════════════════════════════════════════════════════════════ */
  #s3 { background: linear-gradient(150deg, #0a0a1a, #0f1a2d, #051520); }

  .pathway-container {
    width: 100%; max-width: 950px;
    display: flex; flex-direction: column; align-items: center; gap: 0;
  }

  .pw-row { display:flex; align-items:center; justify-content:center; gap:0; width:100%; }
  .pw-box {
    border-radius: 12px; padding: 12px 20px;
    font-size: 14px; font-weight: 600; text-align: center;
    min-width: 140px; position: relative;
    opacity: 0; transform: scale(0.8);
    transition: opacity 0.5s, transform 0.5s;
  }
  .pw-box.show { opacity:1; transform:scale(1); }
  .pw-arrow {
    font-size: 22px; color: rgba(255,255,255,0.4); margin: 0 8px;
    opacity: 0; transition: opacity 0.5s;
  }
  .pw-arrow.show { opacity:1; }
  .pw-arrow-down { font-size:28px; color:rgba(255,255,255,0.4); margin:2px 0; opacity:0; transition:opacity 0.5s; }
  .pw-arrow-down.show { opacity:1; }

  .box-membrane { background:#1a3a5c; border:2px solid #4a9fd4; color:#a8d8f0; }
  .box-aa { background:#3d1a00; border:2px solid var(--orange); color:#ffd0a0; }
  .box-cox1 { background:#1a3a1a; border:2px solid #4CAF50; color:#b0ffb0; }
  .box-cox2 { background:#3a1a3a; border:2px solid #c084fc; color:#e8c0ff; }
  .box-pgh2 { background:#2a2a00; border:2px solid var(--yellow); color:#fff0a0; }
  .box-txa2 { background:#3a0000; border:2px solid var(--red); color:#ffa0a0; }
  .box-pgi2 { background:#001a3a; border:2px solid #60a0ff; color:#a0c8ff; }
  .box-pge2 { background:#1a1a00; border:2px solid #d4d400; color:#ffffa0; }
  .box-pgd2 { background:#001a1a; border:2px solid #00d4d4; color:#a0ffff; }
  .box-nsaid { background: linear-gradient(135deg,#1a4a1a,#2a6a2a); border:3px solid var(--teal2); color:#fff; font-weight:800; font-size:16px; box-shadow: 0 0 20px rgba(37,194,160,0.5); }
  .box-coxib { background: linear-gradient(135deg,#3a1a4a,#5a2a6a); border:3px solid #c084fc; color:#fff; font-weight:800; font-size:16px; box-shadow: 0 0 20px rgba(192,132,252,0.5); }

  .inhibit-line {
    width: 3px; background: var(--red);
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%,-50%) rotate(-45deg);
    transform-origin: center;
    opacity: 0;
    transition: opacity 0.4s, height 0.4s;
    border-radius: 2px;
    height: 0;
  }
  .inhibit-line.show { opacity:1; height: 60px; }

  .nsaid-blocker {
    position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px;
  }
  .blocker-label {
    font-size: 11px; color: var(--red); font-weight: 700; letter-spacing:1px;
    opacity:0; transition: opacity 0.4s;
  }
  .blocker-label.show { opacity:1; }

  .effect-row {
    display:flex; gap:24px; justify-content:center; flex-wrap:wrap; margin-top:6px;
  }
  .effect-badge {
    border-radius: 20px; padding: 6px 16px; font-size: 13px; font-weight:600;
    opacity: 0; transform: translateY(8px);
    transition: opacity 0.4s, transform 0.4s;
  }
  .effect-badge.show { opacity:1; transform:translateY(0); }
  .badge-pain { background:#3d0000; border:1px solid var(--red); color:#ffaaaa; }
  .badge-fever { background:#3d2000; border:1px solid var(--orange); color:#ffd0a0; }
  .badge-inflam { background:#3d3d00; border:1px solid var(--yellow); color:#ffffa0; }
  .badge-platelet { background:#00003d; border:1px solid #6060ff; color:#aaaaff; }

  /* ════════════════════════════════════════════════════════════════
     SCENE 4 β€” NSAID DRUG CLASSES
  ════════════════════════════════════════════════════════════════ */
  #s4 { background: linear-gradient(150deg, #051a0f, #0d3020, #051a30); }

  .drug-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
    max-width: 900px; width: 100%;
  }
  .drug-card {
    border-radius: 14px; padding: 18px 20px;
    background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.15);
    opacity: 0; transform: translateY(16px);
    transition: opacity 0.5s, transform 0.5s;
  }
  .drug-card.show { opacity:1; transform:translateY(0); }
  .drug-card .dc-header { display:flex; align-items:center; gap:10px; margin-bottom:10px; }
  .dc-dot { width:12px; height:12px; border-radius:50%; flex-shrink:0; }
  .drug-card h3 { font-size: 14px; font-weight:700; color:#fff; }
  .drug-card p { font-size: 12.5px; color:rgba(255,255,255,0.7); line-height:1.5; }
  .drug-card .examples { margin-top: 8px; font-size: 12px; color: var(--teal2); font-weight:600; }

  /* ════════════════════════════════════════════════════════════════
     SCENE 5 β€” THERAPEUTIC EFFECTS (animated body)
  ════════════════════════════════════════════════════════════════ */
  #s5 { background: linear-gradient(150deg, #0a1a0a, #0f2d1a, #051a0a); }

  .effects-layout { display:flex; gap:40px; align-items:center; max-width:900px; width:100%; }
  .effects-body { flex: 0 0 220px; }
  .effects-list { flex: 1; display:flex; flex-direction:column; gap:16px; }

  .effect-item {
    display:flex; align-items:flex-start; gap:14px;
    background: rgba(255,255,255,0.06); border-radius:12px; padding:14px 18px;
    border-left: 4px solid transparent;
    opacity:0; transform:translateX(20px);
    transition: opacity 0.5s, transform 0.5s;
  }
  .effect-item.show { opacity:1; transform:translateX(0); }
  .effect-item .ei-icon { font-size: 26px; flex-shrink:0; }
  .effect-item h4 { font-size:15px; font-weight:700; color:#fff; margin-bottom:4px; }
  .effect-item p { font-size:13px; color:rgba(255,255,255,0.7); line-height:1.5; }

  /* ════════════════════════════════════════════════════════════════
     SCENE 6 β€” SIDE EFFECTS
  ════════════════════════════════════════════════════════════════ */
  #s6 { background: linear-gradient(150deg, #1a0505, #2d0a0a, #1a0510); }

  .side-grid {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px;
    max-width: 860px; width: 100%;
  }
  .side-card {
    border-radius: 14px; padding: 18px 22px;
    display: flex; gap: 14px; align-items: flex-start;
    opacity: 0; transform: scale(0.93);
    transition: opacity 0.5s, transform 0.5s;
  }
  .side-card.show { opacity:1; transform:scale(1); }
  .side-card .sc-icon { font-size:28px; flex-shrink:0; }
  .side-card h4 { font-size:15px; font-weight:700; margin-bottom:6px; }
  .side-card p { font-size:13px; line-height:1.55; opacity:0.85; }
  .sc-gi { background:#2d0505; border:1px solid #8B0000; color:#ffa0a0; }
  .sc-cv { background:#0a0a2d; border:1px solid #3030aa; color:#a0a0ff; }
  .sc-renal { background:#0a2d2d; border:1px solid #00aaaa; color:#a0ffff; }
  .sc-platelet { background:#2d1a00; border:1px solid #aa5500; color:#ffd0a0; }

  /* ════════════════════════════════════════════════════════════════
     SCENE 7 β€” COX-1 vs COX-2 Selectivity
  ════════════════════════════════════════════════════════════════ */
  #s7 { background: linear-gradient(150deg, #080d1a, #0d1530, #0a1020); }

  .cox-compare { display:flex; gap:30px; max-width:900px; width:100%; align-items:stretch; }
  .cox-col {
    flex:1; border-radius:16px; padding:24px 22px;
    opacity:0; transform:translateX(-20px);
    transition: opacity 0.5s, transform 0.5s;
  }
  .cox-col.right { transform:translateX(20px); }
  .cox-col.show { opacity:1; transform:translateX(0); }
  .cox-col h3 { font-size:18px; font-weight:800; margin-bottom:14px; text-align:center; }
  .cox-col ul { list-style:none; padding:0; }
  .cox-col ul li { font-size:13.5px; line-height:1.7; opacity:0.85; padding-left:18px; position:relative; }
  .cox-col ul li::before { content:"β–Έ"; position:absolute; left:0; }

  .cox1-col { background:#1a2d1a; border:2px solid #4CAF50; color:#c0ffc0; }
  .cox1-col h3 { color:#4CAF50; }
  .cox2-col { background:#2a1a3a; border:2px solid #c084fc; color:#e0c0ff; }
  .cox2-col h3 { color:#c084fc; }

  .cox-middle {
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
    flex: 0 0 160px;
    opacity:0; transition:opacity 0.6s 0.4s;
  }
  .cox-middle.show { opacity:1; }
  .cox-mid-box {
    background: rgba(255,255,255,0.07); border-radius:10px; padding:10px 14px;
    text-align:center; font-size:12.5px; color:rgba(255,255,255,0.75); width:100%;
  }
  .cox-mid-box strong { color: var(--yellow); display:block; font-size:14px; margin-bottom:4px; }

  /* ════════════════════════════════════════════════════════════════
     SCENE 8 β€” CLINICAL USES & CONTRAINDICATIONS
  ════════════════════════════════════════════════════════════════ */
  #s8 { background: linear-gradient(150deg, #0a1520, #0f2030, #051525); }

  .clin-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; max-width:900px; width:100%; }
  .clin-col { display:flex; flex-direction:column; gap:14px; }
  .clin-card {
    border-radius:12px; padding:16px 18px;
    opacity:0; transform:translateY(14px);
    transition: opacity 0.4s, transform 0.4s;
  }
  .clin-card.show { opacity:1; transform:translateY(0); }
  .clin-card h4 { font-size:14px; font-weight:700; margin-bottom:6px; }
  .clin-card p, .clin-card ul { font-size:13px; line-height:1.55; opacity:0.85; }
  .clin-card ul { padding-left:16px; }
  .cc-use { background:#0a2010; border:1px solid #2a8040; color:#b0ffb0; }
  .cc-contra { background:#200a0a; border:1px solid #802020; color:#ffb0b0; }

  /* ════════════════════════════════════════════════════════════════
     SCENE 9 β€” KEY TAKEAWAYS
  ════════════════════════════════════════════════════════════════ */
  #s9 { background: linear-gradient(135deg, #0a1e3d, #0D2B55, #1a4060); }

  .takeaway-list { max-width:780px; width:100%; display:flex; flex-direction:column; gap:14px; }
  .ta-item {
    display:flex; align-items:flex-start; gap:16px;
    background: rgba(255,255,255,0.06); border-radius:12px; padding:14px 18px;
    border-left: 3px solid var(--teal2);
    opacity:0; transform:translateX(-15px);
    transition: opacity 0.4s, transform 0.4s;
  }
  .ta-item.show { opacity:1; transform:translateX(0); }
  .ta-num { width:30px; height:30px; border-radius:50%; background:var(--teal); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:14px; flex-shrink:0; }
  .ta-item p { font-size:14px; color:rgba(255,255,255,0.85); line-height:1.6; }
  .ta-item p strong { color:var(--teal2); }

  .source-note {
    margin-top: 20px; font-size: 11px; color: rgba(255,255,255,0.35); text-align:center;
    opacity:0; transition:opacity 1s 2s;
  }
  .source-note.show { opacity:1; }

  /* ════════════════════════════════════════════════════════════════
     ANIMATED ELEMENTS
  ════════════════════════════════════════════════════════════════ */
  @keyframes bounce { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }
  @keyframes glow { 0%,100%{box-shadow:0 0 8px rgba(37,194,160,0.3)} 50%{box-shadow:0 0 24px rgba(37,194,160,0.8)} }
  @keyframes shake { 0%,100%{transform:rotate(0)} 25%{transform:rotate(-4deg)} 75%{transform:rotate(4deg)} }
  @keyframes ripple {
    0% { transform:scale(0.5); opacity:1; }
    100% { transform:scale(2.5); opacity:0; }
  }
  @keyframes flowRight {
    0%{stroke-dashoffset:200} 100%{stroke-dashoffset:0}
  }
  @keyframes fadeUp { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }
  @keyframes spin { to { transform:rotate(360deg); } }

  .delayed-1 { transition-delay: 0.15s !important; }
  .delayed-2 { transition-delay: 0.30s !important; }
  .delayed-3 { transition-delay: 0.45s !important; }
  .delayed-4 { transition-delay: 0.60s !important; }
  .delayed-5 { transition-delay: 0.75s !important; }
  .delayed-6 { transition-delay: 0.90s !important; }
</style>
</head>
<body>
<div id="stage">

  <!-- Progress -->
  <div id="progress-bar"></div>

  <!-- Auto-play -->
  <button id="autoplay-btn" onclick="toggleAutoplay()">β–Ά Auto-Play</button>

  <!-- Dot nav -->
  <div id="dots"></div>

  <!-- ══════════════════════════════════════════════════════
       SCENE 0 β€” TITLE
  ══════════════════════════════════════════════════════════ -->
  <div class="scene active" id="s0">
    <div class="pill-row">
      <div class="pill">πŸ’Š Ibuprofen</div>
      <div class="pill">πŸ’Š Naproxen</div>
      <div class="pill">πŸ’Š Aspirin</div>
      <div class="pill">πŸ’Š Diclofenac</div>
      <div class="pill">πŸ’Š Celecoxib</div>
    </div>
    <h1>NSAIDs<br/><span>How They Work Inside Your Body</span></h1>
    <p class="subtitle">A visual journey through the COX pathway, mechanisms, effects & clinical use</p>
    <p class="start-hint">β–Ά Press NEXT to begin</p>
  </div>

  <!-- ══════════════════════════════════════════════════════
       SCENE 1 β€” WHAT ARE NSAIDs?
  ══════════════════════════════════════════════════════════ -->
  <div class="scene" id="s1">
    <h2 class="scene-title">What Are <span>NSAIDs?</span></h2>
    <div class="card-grid">
      <div class="info-card">
        <div class="icon">πŸ’Š</div>
        <h3>Definition</h3>
        <p><strong>Non-Steroidal Anti-Inflammatory Drugs</strong> β€” a diverse group of medications with anti-inflammatory, analgesic (pain-relieving), antipyretic (fever-reducing), and antithrombotic properties.</p>
      </div>
      <div class="info-card">
        <div class="icon">πŸ“Š</div>
        <h3>How Common?</h3>
        <ul>
          <li>Among the most widely used drugs worldwide</li>
          <li>Available OTC and by prescription</li>
          <li>Over 30 million people use NSAIDs daily</li>
          <li>Multiple routes: oral, IV, rectal, topical</li>
        </ul>
      </div>
      <div class="info-card">
        <div class="icon">🎯</div>
        <h3>Primary Target</h3>
        <p>NSAIDs block the <strong>Cyclooxygenase (COX)</strong> enzyme β€” the gateway enzyme in the prostaglandin synthesis pathway. This is the master mechanism behind all their effects.</p>
      </div>
      <div class="info-card">
        <div class="icon">βš–οΈ</div>
        <h3>Two Enzyme Forms</h3>
        <ul>
          <li><strong>COX-1</strong> β€” constitutive, protective roles</li>
          <li><strong>COX-2</strong> β€” inducible, inflammatory mediator</li>
          <li>NSAIDs differ in selectivity for each isoform</li>
        </ul>
      </div>
    </div>
  </div>

  <!-- ══════════════════════════════════════════════════════
       SCENE 2 β€” INJURY TRIGGERS THE CASCADE
  ══════════════════════════════════════════════════════════ -->
  <div class="scene" id="s2">
    <h2 class="scene-title">Step 1 β€” <span>The Inflammatory Cascade Begins</span></h2>
    <div style="max-width:860px;width:100%;">
      <svg viewBox="0 0 860 340" xmlns="http://www.w3.org/2000/svg" id="cascade-svg">
        <!-- Background -->
        <defs>
          <linearGradient id="cellGrad" x1="0%" y1="0%" x2="100%" y2="100%">
            <stop offset="0%" style="stop-color:#1a3a5c;stop-opacity:1"/>
            <stop offset="100%" style="stop-color:#0d2040;stop-opacity:1"/>
          </linearGradient>
          <linearGradient id="memGrad" x1="0%" y1="0%" x2="0%" y2="100%">
            <stop offset="0%" style="stop-color:#4a9fd4;stop-opacity:0.8"/>
            <stop offset="100%" style="stop-color:#2a6090;stop-opacity:0.4"/>
          </linearGradient>
          <marker id="arrowhead" markerWidth="8" markerHeight="6" refX="6" refY="3" orient="auto">
            <polygon points="0 0, 8 3, 0 6" fill="rgba(255,200,100,0.8)"/>
          </marker>
          <marker id="arrowGreen" markerWidth="8" markerHeight="6" refX="6" refY="3" orient="auto">
            <polygon points="0 0, 8 3, 0 6" fill="#25C2A0"/>
          </marker>
        </defs>

        <!-- CELL -->
        <ellipse cx="160" cy="170" rx="130" ry="100" fill="url(#cellGrad)" stroke="#4a9fd4" stroke-width="2" opacity="0.9"/>
        <text x="160" y="130" text-anchor="middle" fill="rgba(255,255,255,0.6)" font-size="12">CELL MEMBRANE</text>

        <!-- Phospholipids in membrane -->
        <rect x="60" y="155" width="200" height="28" rx="5" fill="url(#memGrad)" stroke="#60b0e0" stroke-width="1.5"/>
        <text x="160" y="174" text-anchor="middle" fill="#c0e8ff" font-size="11" font-weight="600">MEMBRANE PHOSPHOLIPIDS</text>

        <!-- Nucleus -->
        <ellipse cx="160" cy="215" rx="45" ry="32" fill="rgba(30,80,120,0.6)" stroke="#4080a0" stroke-width="1.5"/>
        <text x="160" y="219" text-anchor="middle" fill="rgba(200,230,255,0.7)" font-size="10">NUCLEUS</text>

        <!-- INJURY event -->
        <g id="injury-grp" opacity="0">
          <circle cx="60" cy="90" r="26" fill="rgba(180,40,40,0.9)" stroke="#ff6060" stroke-width="2"/>
          <text x="60" y="86" text-anchor="middle" fill="#fff" font-size="10" font-weight="700">INJURY</text>
          <text x="60" y="99" text-anchor="middle" fill="#ffc0c0" font-size="9">/ Cytokine</text>
          <!-- ripple rings -->
          <circle cx="60" cy="90" r="26" fill="none" stroke="#ff6060" stroke-width="2" opacity="0">
            <animate attributeName="r" values="26;50" dur="1.2s" repeatCount="indefinite"/>
            <animate attributeName="opacity" values="0.8;0" dur="1.2s" repeatCount="indefinite"/>
          </circle>
        </g>

        <!-- Phospholipase A2 step -->
        <g id="pla2-grp" opacity="0">
          <rect x="295" y="145" width="150" height="50" rx="10" fill="rgba(60,30,0,0.9)" stroke="#d4820a" stroke-width="2"/>
          <text x="370" y="163" text-anchor="middle" fill="#ffc080" font-size="11" font-weight="700">Phospholipase Aβ‚‚</text>
          <text x="370" y="181" text-anchor="middle" fill="rgba(255,200,140,0.8)" font-size="10">(activated by injury)</text>
        </g>

        <!-- Arrow: membrane β†’ PLA2 -->
        <path id="arrow1" d="M260 170 L290 170" stroke="rgba(255,200,100,0.8)" stroke-width="2.5" fill="none" marker-end="url(#arrowhead)" stroke-dasharray="30" stroke-dashoffset="30">
          <animate attributeName="stroke-dashoffset" from="30" to="0" dur="0.6s" begin="1.5s" fill="freeze"/>
        </path>

        <!-- Arachidonic acid box -->
        <g id="aa-grp" opacity="0">
          <rect x="480" y="135" width="160" height="60" rx="12" fill="rgba(80,40,0,0.9)" stroke="#E86A1A" stroke-width="2.5"/>
          <text x="560" y="156" text-anchor="middle" fill="#ffd0a0" font-size="13" font-weight="800">ARACHIDONIC</text>
          <text x="560" y="174" text-anchor="middle" fill="#ffd0a0" font-size="13" font-weight="800">ACID (AA)</text>
          <text x="560" y="189" text-anchor="middle" fill="rgba(255,200,140,0.7)" font-size="10">Released from membrane</text>
        </g>

        <!-- Arrow: PLA2 β†’ AA -->
        <path id="arrow2" d="M445 170 L475 165" stroke="rgba(255,200,100,0.8)" stroke-width="2.5" fill="none" marker-end="url(#arrowhead)" stroke-dasharray="40" stroke-dashoffset="40">
          <animate attributeName="stroke-dashoffset" from="40" to="0" dur="0.6s" begin="2.5s" fill="freeze"/>
        </path>

        <!-- Next step label -->
        <g id="next-label" opacity="0">
          <text x="660" y="168" fill="#25C2A0" font-size="13" font-weight="700">β†’ COX Enzyme</text>
          <text x="660" y="184" fill="rgba(255,255,255,0.5)" font-size="11">awaits...</text>
        </g>

        <!-- Caption -->
        <text x="430" y="300" text-anchor="middle" fill="rgba(255,255,255,0.45)" font-size="11">
          Source: Brenner &amp; Rector's The Kidney, 2-Vol Set | COX Pathway Figure 13.1
        </text>
      </svg>
    </div>
    <p style="color:rgba(255,255,255,0.55);font-size:13px;margin-top:8px;text-align:center;">
      Tissue injury or cytokines activate <strong style="color:#ffd0a0">Phospholipase Aβ‚‚</strong>, liberating 
      <strong style="color:#E86A1A">Arachidonic Acid</strong> from cell membrane phospholipids β€” the substrate for COX enzymes.
    </p>
  </div>

  <!-- ══════════════════════════════════════════════════════
       SCENE 3 β€” THE COX PATHWAY & NSAID BLOCK
  ══════════════════════════════════════════════════════════ -->
  <div class="scene" id="s3">
    <h2 class="scene-title">Step 2 β€” <span>The COX Pathway & How NSAIDs Block It</span></h2>
    <div class="pathway-container">

      <!-- Row 1: AA -->
      <div class="pw-row">
        <div class="pw-box box-aa" id="pw-aa">
          πŸ”΄ Arachidonic Acid
          <div style="font-size:11px;opacity:0.7;font-weight:400;margin-top:3px;">substrate</div>
        </div>
      </div>
      <div class="pw-arrow-down" id="pw-arr1">↓</div>

      <!-- Row 2: COX-1 + COX-2 side by side with NSAID blockers -->
      <div class="pw-row" style="gap:30px;">
        <!-- COX-1 column -->
        <div style="display:flex;flex-direction:column;align-items:center;gap:4px;">
          <div class="nsaid-blocker">
            <div class="blocker-label" id="bl1">🚫 NSAIDs BLOCK</div>
            <div class="pw-box box-cox1" id="pw-cox1">
              COX-1 (Constitutive)
              <div style="font-size:11px;opacity:0.7;font-weight:400;margin-top:3px;">protective, always on</div>
            </div>
          </div>
        </div>

        <!-- NSAID box in middle -->
        <div style="display:flex;flex-direction:column;align-items:center;gap:8px;">
          <div class="pw-box box-nsaid" id="pw-nsaid" style="min-width:120px;padding:10px 14px;">
            πŸ’Š NSAIDs
            <div style="font-size:11px;font-weight:400;margin-top:3px;opacity:0.85;">inhibit both COX-1 &amp; COX-2</div>
          </div>
          <div class="pw-box box-coxib" id="pw-coxib" style="min-width:120px;padding:10px 14px;">
            πŸ’Š COX-2 Inhibitors
            <div style="font-size:11px;font-weight:400;margin-top:3px;opacity:0.85;">selective COX-2 block</div>
          </div>
        </div>

        <!-- COX-2 column -->
        <div style="display:flex;flex-direction:column;align-items:center;gap:4px;">
          <div class="nsaid-blocker">
            <div class="blocker-label" id="bl2">🚫 NSAIDs BLOCK</div>
            <div class="pw-box box-cox2" id="pw-cox2">
              COX-2 (Inducible)
              <div style="font-size:11px;opacity:0.7;font-weight:400;margin-top:3px;">inflammation-driven</div>
            </div>
          </div>
        </div>
      </div>
      <div class="pw-arrow-down" id="pw-arr2">↓</div>

      <!-- Row 3: PGH2 -->
      <div class="pw-row">
        <div class="pw-box box-pgh2" id="pw-pgh2">
          βš—οΈ Prostaglandin Hβ‚‚ (PGHβ‚‚)
          <div style="font-size:11px;opacity:0.7;font-weight:400;margin-top:3px;">common intermediate</div>
        </div>
      </div>
      <div class="pw-arrow-down" id="pw-arr3">↓</div>

      <!-- Row 4: final products -->
      <div class="pw-row" style="gap:12px;flex-wrap:wrap;">
        <div class="pw-box box-txa2" id="pw-txa2" style="min-width:110px;">
          TXAβ‚‚
          <div style="font-size:10px;font-weight:400;margin-top:3px;opacity:0.8;">platelets, vasoconstriction</div>
        </div>
        <div class="pw-arrow" id="pw-a2">←</div>
        <div class="pw-box box-pgi2" id="pw-pgi2" style="min-width:110px;">
          PGIβ‚‚
          <div style="font-size:10px;font-weight:400;margin-top:3px;opacity:0.8;">vasodilation, antiplatelet</div>
        </div>
        <div class="pw-arrow" id="pw-a3">β†’</div>
        <div class="pw-box box-pge2" id="pw-pge2" style="min-width:110px;">
          PGEβ‚‚
          <div style="font-size:10px;font-weight:400;margin-top:3px;opacity:0.8;">pain, fever, inflammation</div>
        </div>
        <div class="pw-arrow" id="pw-a4">β†’</div>
        <div class="pw-box box-pgd2" id="pw-pgd2" style="min-width:110px;">
          PGDβ‚‚
          <div style="font-size:10px;font-weight:400;margin-top:3px;opacity:0.8;">sleep, allergy, bronchoconstriction</div>
        </div>
      </div>

      <!-- Bottom effects summary -->
      <div class="effect-row" style="margin-top:16px;">
        <div class="effect-badge badge-pain" id="eff-pain">πŸ”΄ ↓ Pain</div>
        <div class="effect-badge badge-fever" id="eff-fever">🌑 ↓ Fever</div>
        <div class="effect-badge badge-inflam" id="eff-inflam">πŸ”₯ ↓ Inflammation</div>
        <div class="effect-badge badge-platelet" id="eff-platelet">🩸 ↓ Platelet aggregation</div>
      </div>
    </div>
  </div>

  <!-- ══════════════════════════════════════════════════════
       SCENE 4 β€” DRUG CLASSES
  ══════════════════════════════════════════════════════════ -->
  <div class="scene" id="s4">
    <h2 class="scene-title"><span>NSAID Drug Classes</span> & Examples</h2>
    <div class="drug-grid">
      <div class="drug-card">
        <div class="dc-header"><div class="dc-dot" style="background:#4CAF50"></div><h3>Propionic Acids</h3></div>
        <p>Non-selective COX inhibitors. Well-absorbed orally. Widely used for pain and inflammation.</p>
        <div class="examples">Ibuprofen Β· Naproxen Β· Ketoprofen</div>
      </div>
      <div class="drug-card delayed-1">
        <div class="dc-header"><div class="dc-dot" style="background:#E86A1A"></div><h3>Salicylates</h3></div>
        <p>Aspirin irreversibly acetylates COX β€” blocks TXAβ‚‚ in platelets permanently. Low-dose = antiplatelet; high-dose = analgesic/anti-inflammatory.</p>
        <div class="examples">Aspirin Β· Diflunisal Β· Salsalate</div>
      </div>
      <div class="drug-card delayed-2">
        <div class="dc-header"><div class="dc-dot" style="background:#60a0ff"></div><h3>Acetic Acids</h3></div>
        <p>Potent COX inhibitors, often used perioperatively and for acute moderate–severe pain.</p>
        <div class="examples">Diclofenac Β· Ketorolac Β· Indomethacin Β· Sulindac</div>
      </div>
      <div class="drug-card delayed-3">
        <div class="dc-header"><div class="dc-dot" style="background:#c084fc"></div><h3>COX-2 Inhibitors (Coxibs)</h3></div>
        <p>Selective COX-2 inhibition. Reduced GI side effects but increased cardiovascular risk (reduced PGIβ‚‚). Used in arthritis when GI protection is needed.</p>
        <div class="examples">Celecoxib Β· Etoricoxib Β· Parecoxib</div>
      </div>
      <div class="drug-card delayed-4">
        <div class="dc-header"><div class="dc-dot" style="background:#F4C842"></div><h3>Oxicams</h3></div>
        <p>Long half-lives allowing once-daily dosing. Non-selective COX inhibition.</p>
        <div class="examples">Meloxicam Β· Piroxicam Β· Tenoxicam</div>
      </div>
      <div class="drug-card delayed-5">
        <div class="dc-header"><div class="dc-dot" style="background:#ff6060"></div><h3>Fenamic Acids</h3></div>
        <p>Compete with arachidonic acid at the COX active site. Also used for dysmenorrhoea.</p>
        <div class="examples">Mefenamic acid Β· Meclofenamate</div>
      </div>
    </div>
  </div>

  <!-- ══════════════════════════════════════════════════════
       SCENE 5 β€” THERAPEUTIC EFFECTS
  ══════════════════════════════════════════════════════════ -->
  <div class="scene" id="s5">
    <h2 class="scene-title"><span>Therapeutic Effects</span> of NSAIDs</h2>
    <div class="effects-layout">
      <!-- Simple animated pill figure -->
      <div class="effects-body">
        <svg viewBox="0 0 220 320" xmlns="http://www.w3.org/2000/svg">
          <!-- Body silhouette -->
          <ellipse cx="110" cy="60" rx="38" ry="42" fill="#1a3a5c" stroke="#4a9fd4" stroke-width="2"/>
          <rect x="72" y="98" width="76" height="110" rx="20" fill="#1a3a5c" stroke="#4a9fd4" stroke-width="2"/>
          <!-- Arms -->
          <rect x="30" y="100" width="44" height="18" rx="9" fill="#1a4a5c" stroke="#4a9fd4" stroke-width="1.5" transform="rotate(-15 52 109)"/>
          <rect x="146" y="100" width="44" height="18" rx="9" fill="#1a4a5c" stroke="#4a9fd4" stroke-width="1.5" transform="rotate(15 168 109)"/>
          <!-- Legs -->
          <rect x="76" y="204" width="26" height="70" rx="13" fill="#1a3a5c" stroke="#4a9fd4" stroke-width="1.5" transform="rotate(-5 89 239)"/>
          <rect x="118" y="204" width="26" height="70" rx="13" fill="#1a3a5c" stroke="#4a9fd4" stroke-width="1.5" transform="rotate(5 131 239)"/>

          <!-- Pulse glow: joint -->
          <circle cx="72" cy="204" r="10" fill="rgba(37,194,160,0.15)" stroke="rgba(37,194,160,0.6)" stroke-width="1.5">
            <animate attributeName="r" values="10;16;10" dur="2s" repeatCount="indefinite"/>
            <animate attributeName="opacity" values="0.6;0.2;0.6" dur="2s" repeatCount="indefinite"/>
          </circle>
          <!-- Pain signal suppressed -->
          <text x="110" y="57" text-anchor="middle" fill="rgba(200,230,255,0.6)" font-size="11">😊</text>

          <!-- Pill icons floating around -->
          <text x="15" y="80" fill="rgba(37,194,160,0.7)" font-size="18">
            <animateMotion dur="4s" repeatCount="indefinite" path="M0,0 C10,-15 20,-5 0,0"/>
            πŸ’Š
          </text>
          <text x="175" y="130" fill="rgba(37,194,160,0.7)" font-size="14">
            <animateMotion dur="3.5s" repeatCount="indefinite" path="M0,0 C-8,-10 -16,0 0,0"/>
            πŸ’Š
          </text>
        </svg>
      </div>

      <div class="effects-list">
        <div class="effect-item" style="border-left-color:#C0392B">
          <div class="ei-icon">πŸ”΄</div>
          <div>
            <h4>Analgesia (Pain Relief)</h4>
            <p>By blocking PGEβ‚‚ and PGIβ‚‚, NSAIDs reduce sensitisation of peripheral nociceptors and central pain signalling. Effective for mild-to-moderate pain: headache, musculoskeletal, post-operative, dental, and menstrual pain.</p>
          </div>
        </div>
        <div class="effect-item delayed-1" style="border-left-color:#E86A1A">
          <div class="ei-icon">🌑️</div>
          <div>
            <h4>Antipyresis (Fever Reduction)</h4>
            <p>Prostaglandin Eβ‚‚ (PGEβ‚‚) raises the hypothalamic set-point for temperature. NSAIDs block PGEβ‚‚ synthesis in the hypothalamus, restoring normal temperature. They do <em>not</em> lower normal body temperature.</p>
          </div>
        </div>
        <div class="effect-item delayed-2" style="border-left-color:#F4C842">
          <div class="ei-icon">πŸ”₯</div>
          <div>
            <h4>Anti-Inflammation</h4>
            <p>Prostaglandins amplify redness, swelling, and warmth at injury sites by increasing vascular permeability. COX-2 inhibition blocks these mediators, reducing tissue inflammation in arthritis, bursitis, tendinitis, etc.</p>
          </div>
        </div>
        <div class="effect-item delayed-3" style="border-left-color:#6060ff">
          <div class="ei-icon">🩸</div>
          <div>
            <h4>Antiplatelet Effect</h4>
            <p>Aspirin irreversibly acetylates platelet COX-1 β†’ ↓TXAβ‚‚ β†’ inhibits platelet aggregation for the platelet's lifetime (7–10 days). This is exploited in cardiovascular prevention (low-dose 75–100 mg daily).</p>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- ══════════════════════════════════════════════════════
       SCENE 6 β€” SIDE EFFECTS
  ══════════════════════════════════════════════════════════ -->
  <div class="scene" id="s6">
    <h2 class="scene-title">⚠️ <span>Side Effects</span> β€” The Dark Side of COX Inhibition</h2>
    <div class="side-grid">
      <div class="side-card sc-gi">
        <div class="sc-icon">πŸ«€</div>
        <div>
          <h4>GI Toxicity (COX-1 Loss)</h4>
          <p>COX-1 generates PGEβ‚‚ and PGIβ‚‚ that protect the gastric mucosa (↑mucus, ↑bicarbonate, ↓acid). Block COX-1 β†’ erosions, peptic ulcers, GI bleeding. Risk: 70% of chronic NSAID users show mucosal injury on capsule endoscopy. Use a PPI if long-term use is needed. COX-2 inhibitors spare COX-1 β†’ less GI toxicity.</p>
        </div>
      </div>
      <div class="side-card sc-cv delayed-1">
        <div class="sc-icon">❀️</div>
        <div>
          <h4>Cardiovascular Risk</h4>
          <p>COX-2 generates PGIβ‚‚ (prostacyclin) in endothelium, which is vasodilatory and antiplatelet. Selective COX-2 inhibitors block PGIβ‚‚ without blocking platelet TXAβ‚‚ β†’ pro-thrombotic imbalance β†’ ↑risk of MI and stroke. Particularly relevant with coxibs (e.g., celecoxib). Use with caution in CV disease.</p>
        </div>
      </div>
      <div class="side-card sc-renal delayed-2">
        <div class="sc-icon">🫁</div>
        <div>
          <h4>Renal Effects</h4>
          <p>Prostaglandins maintain renal perfusion, especially when cardiac output or volume is low. NSAIDs β†’ ↓renal prostaglandins β†’ ↓GFR, sodium retention, oedema, and in at-risk patients: acute kidney injury. Avoid in CKD, heart failure, and dehydrated patients. Transient creatinine rise is common post-operatively.</p>
        </div>
      </div>
      <div class="side-card sc-platelet delayed-3">
        <div class="sc-icon">πŸ’¨</div>
        <div>
          <h4>Respiratory & Other</h4>
          <p><strong>Aspirin-exacerbated respiratory disease (AERD):</strong> Blocking COX β†’ shunting of AA to lipoxygenase β†’ ↑leukotrienes β†’ bronchoconstriction. Affects ~10% of asthmatics.<br/><br/>Also: prolonged bleeding time, hepatotoxicity, hypersensitivity reactions, delayed bone healing (controversial).</p>
        </div>
      </div>
    </div>
    <p style="margin-top:14px;font-size:12px;color:rgba(255,255,255,0.45);text-align:center;">Source: Miller's Anesthesia 10e | Sleisenger & Fordtran's GI & Liver Disease</p>
  </div>

  <!-- ══════════════════════════════════════════════════════
       SCENE 7 β€” COX-1 vs COX-2 SELECTIVITY
  ══════════════════════════════════════════════════════════ -->
  <div class="scene" id="s7">
    <h2 class="scene-title"><span>COX-1 vs COX-2</span> β€” Selectivity Matters</h2>
    <div class="cox-compare">
      <div class="cox-col cox1-col" id="cox1-col">
        <h3>COX-1 (Constitutive)</h3>
        <ul>
          <li>Always expressed (housekeeping)</li>
          <li>Encoded on chromosome 9</li>
          <li>Found in: stomach, platelets, kidney, endothelium</li>
          <li>Produces protective prostaglandins (gastric mucosa)</li>
          <li>Maintains TXAβ‚‚ in platelets β†’ aggregation</li>
          <li>Maintains renal blood flow prostaglandins</li>
          <li style="margin-top:8px;color:#ffff80">⚠ Blocking COX-1 = GI ulcers, bleeding, renal issues</li>
        </ul>
      </div>
      <div class="cox-middle" id="cox-mid">
        <div class="cox-mid-box"><strong>Non-selective NSAIDs</strong>Block both equally<br/>(ibuprofen, naproxen,<br/>diclofenac, aspirin)</div>
        <div style="font-size:20px;color:rgba(255,255,255,0.3);">β‡…</div>
        <div class="cox-mid-box"><strong>COX-2 Selective</strong>Spare COX-1<br/>(celecoxib, etoricoxib)<br/><span style="color:#ff9090;font-size:11px;">↑CV risk</span></div>
      </div>
      <div class="cox-col cox2-col right" id="cox2-col">
        <h3>COX-2 (Inducible)</h3>
        <ul>
          <li>Upregulated by inflammation, cytokines</li>
          <li>Encoded on chromosome 1</li>
          <li>Induced by: TNF, IL-1Ξ², EGF, PDGF, NF-ΞΊB</li>
          <li>Drives prostaglandin production in inflamed tissue</li>
          <li>Produces PGIβ‚‚ in vascular endothelium</li>
          <li>Also expressed in kidney, CNS, reproductive tract</li>
          <li style="margin-top:8px;color:#d4b0ff">⚠ Blocking COX-2 = ↑thrombotic cardiovascular risk</li>
        </ul>
      </div>
    </div>
    <p style="margin-top:14px;font-size:12px;color:rgba(255,255,255,0.4);text-align:center;">Source: Brenner &amp; Rector's The Kidney β€” COX Gene Expression (p.521)</p>
  </div>

  <!-- ══════════════════════════════════════════════════════
       SCENE 8 β€” CLINICAL USES & CONTRAINDICATIONS
  ══════════════════════════════════════════════════════════ -->
  <div class="scene" id="s8">
    <h2 class="scene-title"><span>Clinical Uses</span> & Contraindications</h2>
    <div class="clin-grid">
      <div class="clin-col">
        <div class="clin-card cc-use">
          <h4>βœ… Acute Pain</h4>
          <ul>
            <li>Post-operative pain (multimodal analgesia)</li>
            <li>Dental pain</li>
            <li>Renal/biliary colic (diclofenac, ketorolac)</li>
            <li>Headache, migraine</li>
          </ul>
        </div>
        <div class="clin-card cc-use delayed-1">
          <h4>βœ… Chronic Inflammatory Conditions</h4>
          <ul>
            <li>Rheumatoid arthritis</li>
            <li>Osteoarthritis</li>
            <li>Ankylosing spondylitis</li>
            <li>Gout (indomethacin especially)</li>
          </ul>
        </div>
        <div class="clin-card cc-use delayed-2">
          <h4>βœ… Specific Indications</h4>
          <ul>
            <li>Aspirin 75–100 mg: secondary CVD prevention</li>
            <li>Indomethacin: patent ductus arteriosus closure</li>
            <li>Primary dysmenorrhoea (PGEβ‚‚ driven)</li>
            <li>Fever in adults (not Aspirin in children – Reye's)</li>
          </ul>
        </div>
      </div>
      <div class="clin-col">
        <div class="clin-card cc-contra">
          <h4>🚫 Contraindications</h4>
          <ul>
            <li>Active peptic ulcer / GI bleeding</li>
            <li>Severe renal impairment (eGFR &lt;30)</li>
            <li>Severe hepatic impairment</li>
            <li>Aspirin-exacerbated respiratory disease (AERD)</li>
            <li>Third trimester of pregnancy (premature DA closure)</li>
            <li>Post-CABG (COX-2 inhibitors)</li>
            <li>Children with viral illness (Reye's syndrome – aspirin)</li>
          </ul>
        </div>
        <div class="clin-card cc-contra delayed-1">
          <h4>⚠️ Use With Caution</h4>
          <ul>
            <li>Heart failure (fluid retention)</li>
            <li>Established cardiovascular disease</li>
            <li>Anticoagulant therapy (↑bleeding risk)</li>
            <li>Elderly patients (GI + renal risk)</li>
            <li>Hypertension (antagonise antihypertensives)</li>
          </ul>
        </div>
      </div>
    </div>
  </div>

  <!-- ══════════════════════════════════════════════════════
       SCENE 9 β€” KEY TAKEAWAYS
  ══════════════════════════════════════════════════════════ -->
  <div class="scene" id="s9">
    <h2 class="scene-title">🧠 <span>Key Takeaways</span></h2>
    <div class="takeaway-list">
      <div class="ta-item">
        <div class="ta-num">1</div>
        <p>NSAIDs work by <strong>inhibiting COX-1 and/or COX-2</strong> enzymes, blocking the conversion of arachidonic acid β†’ prostaglandins β€” mediators of pain, fever, and inflammation.</p>
      </div>
      <div class="ta-item delayed-1">
        <div class="ta-num">2</div>
        <p><strong>Aspirin is unique</strong>: it irreversibly acetylates COX, permanently blocking platelet TXAβ‚‚ synthesis β€” exploited in cardiovascular prevention at low doses.</p>
      </div>
      <div class="ta-item delayed-2">
        <div class="ta-num">3</div>
        <p><strong>COX-1 loss = GI toxicity</strong>. COX-1 maintains the gastric mucosal barrier. Chronic non-selective NSAID use risks ulcers and bleeding β€” combine with a PPI if needed.</p>
      </div>
      <div class="ta-item delayed-3">
        <div class="ta-num">4</div>
        <p><strong>COX-2 selectivity β‰  safety</strong>. Coxibs spare the gut but block endothelial PGIβ‚‚ β†’ pro-thrombotic β†’ ↑cardiovascular events. Avoid in high CV-risk patients.</p>
      </div>
      <div class="ta-item delayed-4">
        <div class="ta-num">5</div>
        <p>NSAIDs <strong>reduce renal prostaglandins</strong>. In volume-depleted or CKD patients this can precipitate acute kidney injury, sodium retention, and oedema.</p>
      </div>
      <div class="ta-item delayed-5">
        <div class="ta-num">6</div>
        <p>The <strong>aspirin-leukotrieneshift</strong>: blocking COX shunts arachidonic acid to the lipoxygenase (LOX) pathway β†’ leukotrienes β†’ bronchoconstriction in susceptible asthmatic patients (AERD).</p>
      </div>
    </div>
    <p class="source-note" id="source-note">
      Sources: Harrison's 22e Β· Brenner & Rector's The Kidney Β· Miller's Anesthesia 10e Β· Sleisenger & Fordtran's GI & Liver Disease Β· Creasy & Resnik's Maternal-Fetal Medicine
    </p>
  </div>

</div><!-- /stage -->

<!-- Nav -->
<div id="nav">
  <button class="nav-btn" id="prevBtn" onclick="changeSlide(-1)" disabled>β—€ Prev</button>
  <span id="slide-counter">1 / 10</span>
  <button class="nav-btn" id="nextBtn" onclick="changeSlide(1)">Next β–Ά</button>
</div>

<script>
// ── State ───────────────────────────────────────────────────────────────────
const TOTAL = 10;
let current = 0;
let autoplay = false;
let autoTimer = null;
const AUTOPLAY_DELAY = 7000; // ms per slide

// ── Dot nav ─────────────────────────────────────────────────────────────────
const dotsEl = document.getElementById('dots');
for (let i = 0; i < TOTAL; i++) {
  const d = document.createElement('div');
  d.className = 'dot' + (i===0?' active':'');
  d.onclick = () => goTo(i);
  dotsEl.appendChild(d);
}

// ── Scene activations ────────────────────────────────────────────────────────
function activateScene(idx) {
  // Show scene 2 SVG animations
  if (idx === 2) animateCascade();
  // Show scene 3 pathway
  if (idx === 3) animatePathway();
  // Show scene 1 cards
  if (idx === 1) {
    document.querySelectorAll('#s1 .info-card').forEach((c,i)=>{
      setTimeout(()=>c.classList.add('show'), 200+i*150);
    });
  }
  // Scene 4 drug cards
  if (idx === 4) {
    document.querySelectorAll('#s4 .drug-card').forEach((c,i)=>{
      setTimeout(()=>c.classList.add('show'), 100+i*120);
    });
  }
  // Scene 5 effects
  if (idx === 5) {
    document.querySelectorAll('#s5 .effect-item').forEach((c,i)=>{
      setTimeout(()=>c.classList.add('show'), 200+i*180);
    });
  }
  // Scene 6 side effects
  if (idx === 6) {
    document.querySelectorAll('#s6 .side-card').forEach((c,i)=>{
      setTimeout(()=>c.classList.add('show'), 100+i*160);
    });
  }
  // Scene 7 COX compare
  if (idx === 7) {
    setTimeout(()=>document.getElementById('cox1-col').classList.add('show'), 200);
    setTimeout(()=>document.getElementById('cox-mid').classList.add('show'), 500);
    setTimeout(()=>document.getElementById('cox2-col').classList.add('show'), 200);
  }
  // Scene 8 clinical
  if (idx === 8) {
    document.querySelectorAll('#s8 .clin-card').forEach((c,i)=>{
      setTimeout(()=>c.classList.add('show'), 100+i*130);
    });
  }
  // Scene 9 takeaways
  if (idx === 9) {
    document.querySelectorAll('#s9 .ta-item').forEach((c,i)=>{
      setTimeout(()=>c.classList.add('show'), 150+i*150);
    });
    setTimeout(()=>document.getElementById('source-note').classList.add('show'), 1200);
  }
}

// ── Scene 2 cascade animation ─────────────────────────────────────────────
function animateCascade() {
  const svg = document.getElementById('cascade-svg');
  const injuryGrp = document.getElementById('injury-grp');
  const pla2Grp   = document.getElementById('pla2-grp');
  const aaGrp     = document.getElementById('aa-grp');
  const nextLbl   = document.getElementById('next-label');
  injuryGrp.style.opacity = '0';
  pla2Grp.style.opacity   = '0';
  aaGrp.style.opacity     = '0';
  nextLbl.style.opacity   = '0';

  function fade(el, delay) {
    setTimeout(()=>{
      el.style.transition = 'opacity 0.7s';
      el.style.opacity = '1';
    }, delay);
  }
  fade(injuryGrp, 400);
  fade(pla2Grp,   1400);
  fade(aaGrp,     2600);
  fade(nextLbl,   3600);
}

// ── Scene 3 pathway animation ─────────────────────────────────────────────
function animatePathway() {
  const steps = [
    {ids:['pw-aa'],            delay:200},
    {ids:['pw-arr1'],          delay:500},
    {ids:['pw-cox1','pw-cox2','pw-nsaid','pw-coxib'], delay:800},
    {ids:['bl1','bl2'],        delay:1200},
    {ids:['pw-arr2'],          delay:1600},
    {ids:['pw-pgh2'],          delay:1900},
    {ids:['pw-arr3'],          delay:2200},
    {ids:['pw-txa2','pw-a2','pw-pgi2','pw-a3','pw-pge2','pw-a4','pw-pgd2'], delay:2500},
    {ids:['eff-pain','eff-fever','eff-inflam','eff-platelet'], delay:3000},
  ];
  steps.forEach(step => {
    setTimeout(()=>{
      step.ids.forEach(id=>{
        const el = document.getElementById(id);
        if (el) el.classList.add('show');
      });
    }, step.delay);
  });
}

// ── Navigation ───────────────────────────────────────────────────────────────
function goTo(idx) {
  const scenes = document.querySelectorAll('.scene');
  scenes[current].classList.remove('active');
  current = Math.max(0, Math.min(TOTAL-1, idx));
  scenes[current].classList.add('active');

  // Update UI
  document.getElementById('prevBtn').disabled = current === 0;
  document.getElementById('nextBtn').disabled = current === TOTAL-1;
  document.getElementById('slide-counter').textContent = `${current+1} / ${TOTAL}`;
  document.getElementById('progress-bar').style.width = `${(current/(TOTAL-1))*100}%`;
  document.querySelectorAll('.dot').forEach((d,i)=>d.classList.toggle('active', i===current));

  activateScene(current);

  // Reset autoplay timer
  if (autoplay) resetAutoTimer();
}

function changeSlide(dir) { goTo(current + dir); }

// ── Keyboard ──────────────────────────────────────────────────────────────────
document.addEventListener('keydown', e => {
  if (e.key === 'ArrowRight' || e.key === 'ArrowDown') changeSlide(1);
  if (e.key === 'ArrowLeft'  || e.key === 'ArrowUp')   changeSlide(-1);
});

// ── Autoplay ──────────────────────────────────────────────────────────────────
function toggleAutoplay() {
  autoplay = !autoplay;
  document.getElementById('autoplay-btn').textContent = autoplay ? '⏸ Pause' : 'β–Ά Auto-Play';
  if (autoplay) resetAutoTimer();
  else { clearInterval(autoTimer); autoTimer = null; }
}
function resetAutoTimer() {
  clearInterval(autoTimer);
  autoTimer = setInterval(()=>{
    if (current < TOTAL-1) changeSlide(1);
    else { autoplay = false; clearInterval(autoTimer); document.getElementById('autoplay-btn').textContent='β–Ά Auto-Play'; }
  }, AUTOPLAY_DELAY);
}

// ── Touch swipe ───────────────────────────────────────────────────────────────
let touchX = null;
document.addEventListener('touchstart', e => { touchX = e.touches[0].clientX; });
document.addEventListener('touchend', e => {
  if (touchX === null) return;
  const dx = e.changedTouches[0].clientX - touchX;
  if (Math.abs(dx) > 50) changeSlide(dx < 0 ? 1 : -1);
  touchX = null;
});

// ── Init progress bar ─────────────────────────────────────────────────────────
document.getElementById('progress-bar').style.width = '0%';
</script>
</body>
</html>
Your credits are exhausted. Your daily credits reset tomorrow, or you can purchase a top-up for more.

Explore the interactive NSAID explainer with keyboard arrow keys or swipe gestures

Your credits are exhausted. Your daily credits reset tomorrow, or you can purchase a top-up for more.
This is a shared conversation. Sign in to Orris to start your own chat.