celular.html

from IPython.display import HTML, display
import uuid

uid = "expo_mobile_" + uuid.uuid4().hex

html = r"""
<div id="__UID___app" class="app">

<style>
  #__UID___app {
    width: 100%;
    max-width: 760px;
    margin: 0 auto;
    min-height: 100vh;
    background: #f8fafc;
    font-family: Inter, Arial, sans-serif;
    color: #0f172a;
    border-radius: 28px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.28);
  }

  #__UID___app * {
    box-sizing: border-box;
  }

  #__UID___app .hero {
    padding: 22px 18px 24px;
    color: white;
    background:
      radial-gradient(circle at 10% 20%, rgba(56,189,248,0.35), transparent 28%),
      radial-gradient(circle at 90% 8%, rgba(168,85,247,0.35), transparent 30%),
      radial-gradient(circle at 70% 90%, rgba(34,197,94,0.25), transparent 28%),
      linear-gradient(135deg, #020617 0%, #0f172a 70%, #111827 100%);
    border-bottom-left-radius: 28px;
    border-bottom-right-radius: 28px;
  }

  #__UID___app .badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(255,255,255,0.09);
    border: 1px solid rgba(255,255,255,0.18);
    color: #bfdbfe;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .4px;
    margin-bottom: 14px;
  }

  #__UID___app .badge-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #38bdf8;
    box-shadow: 0 0 18px rgba(56,189,248,.95);
  }

  #__UID___app h1 {
    margin: 0;
    font-size: 29px;
    line-height: 1.05;
    letter-spacing: -0.8px;
  }

  #__UID___app .hero p {
    margin: 12px 0 0;
    color: #cbd5e1;
    font-size: 15px;
    line-height: 1.5;
  }

  #__UID___app .formula-pill {
    margin-top: 18px;
    padding: 15px 16px;
    border-radius: 22px;
    background: rgba(255,255,255,0.085);
    border: 1px solid rgba(255,255,255,0.15);
    text-align: center;
  }

  #__UID___app .formula-pill .small {
    color: #93c5fd;
    font-size: 12px;
    font-weight: 900;
    margin-bottom: 6px;
    letter-spacing: .4px;
  }

  #__UID___app .formula-pill .big {
    font-size: 22px;
    font-weight: 950;
    color: white;
  }

  #__UID___app .content {
    padding: 16px;
  }

  #__UID___app .section-title {
    margin: 10px 0 10px;
    font-size: 17px;
    color: #1e293b;
    font-weight: 950;
  }

  #__UID___app .mode-strip {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding: 4px 2px 14px;
    scrollbar-width: none;
  }

  #__UID___app .mode-strip::-webkit-scrollbar {
    display: none;
  }

  #__UID___app .mode-btn {
    flex: 0 0 auto;
    border: none;
    border-radius: 18px;
    padding: 13px 15px;
    background: #e2e8f0;
    color: #334155;
    font-size: 14px;
    font-weight: 950;
    cursor: pointer;
    border: 1px solid #cbd5e1;
    transition: .15s ease;
    white-space: nowrap;
  }

  #__UID___app .mode-btn.active {
    color: white;
    background: linear-gradient(135deg, #2563eb, #7c3aed);
    box-shadow: 0 10px 22px rgba(37,99,235,.24);
    border-color: transparent;
  }

  #__UID___app .card {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 24px;
    padding: 15px;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.08);
    margin-bottom: 14px;
  }

  #__UID___app .control {
    padding: 13px;
    border-radius: 20px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    margin-bottom: 12px;
  }

  #__UID___app .control.hidden {
    display: none;
  }

  #__UID___app .control-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 9px;
  }

  #__UID___app .control label {
    font-size: 12px;
    font-weight: 950;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: .45px;
  }

  #__UID___app .value-chip {
    min-width: 58px;
    text-align: center;
    padding: 7px 10px;
    border-radius: 999px;
    background: #dbeafe;
    color: #1d4ed8;
    font-size: 13px;
    font-weight: 950;
  }

  #__UID___app input[type=range] {
    width: 100%;
    accent-color: #2563eb;
    cursor: pointer;
  }

  #__UID___app .status-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    margin-bottom: 12px;
  }

  #__UID___app .status {
    padding: 11px 13px;
    border-radius: 999px;
    background: #eff6ff;
    color: #1d4ed8;
    border: 1px solid #bfdbfe;
    font-size: 13px;
    font-weight: 950;
    text-align: center;
  }

  #__UID___app .formula-live {
    padding: 13px 14px;
    border-radius: 18px;
    background: #0f172a;
    color: white;
    font-size: 16px;
    font-weight: 950;
    text-align: center;
    box-shadow: 0 8px 18px rgba(15,23,42,.22);
    overflow-x: auto;
    white-space: nowrap;
  }

  #__UID___app canvas {
    width: 100%;
    height: 430px;
    display: block;
    border-radius: 24px;
    background:
      radial-gradient(circle at 10% 16%, rgba(219,234,254,.75), transparent 25%),
      radial-gradient(circle at 88% 12%, rgba(243,232,255,.78), transparent 26%),
      linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    border: 1px solid #cbd5e1;
  }

  #__UID___app .info-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    margin-top: 14px;
  }

  #__UID___app .info-box {
    border-radius: 22px;
    padding: 15px;
    line-height: 1.5;
    font-size: 14px;
  }

  #__UID___app .info-box h3 {
    margin: 0 0 7px;
    font-size: 15px;
  }

  #__UID___app .info-box p {
    margin: 0;
  }

  #__UID___app .idea {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
  }

  #__UID___app .idea h3 {
    color: #1d4ed8;
  }

  #__UID___app .warning {
    background: #fff7ed;
    border: 1px solid #fed7aa;
  }

  #__UID___app .warning h3 {
    color: #c2410c;
  }

  #__UID___app .challenge {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
  }

  #__UID___app .challenge h3 {
    color: #15803d;
  }

  #__UID___app .explain {
    background: #0f172a;
    color: #cbd5e1;
    border: 1px solid #1e293b;
  }

  #__UID___app .explain b {
    color: white;
  }

  #__UID___app .asymptote {
    background: linear-gradient(135deg, #2563eb, #7c3aed);
    color: white;
    text-align: center;
  }

  #__UID___app .asymptote .small {
    font-size: 12px;
    color: #dbeafe;
    font-weight: 950;
    margin-bottom: 6px;
  }

  #__UID___app .asymptote .big {
    font-size: 28px;
    font-weight: 950;
  }
</style>

<section class="hero">
  <div class="badge">
    <span class="badge-dot"></span>
    VERSIÓN CELULAR EN COLAB
  </div>

  <h1>Laboratorio de la función exponencial</h1>

  <p>
    Explorá corrimientos, reflexiones y cambios de escala.
    Mové los controles y mirá cómo responde la gráfica.
  </p>

  <div class="formula-pill">
    <div class="small">MODELO GENERAL</div>
    <div class="big">f(x)=A·a<sup>B(x−h)</sup>+k</div>
  </div>
</section>

<main class="content">

  <h2 class="section-title">Elegí una transformación</h2>

  <div class="mode-strip">
    <button class="mode-btn active" data-mode="madre">🌱 Madre</button>
    <button class="mode-btn" data-mode="vertical">⬆️ Vertical</button>
    <button class="mode-btn" data-mode="horizontal">↔️ Horizontal</button>
    <button class="mode-btn" data-mode="reflexX">🪞 Eje x</button>
    <button class="mode-btn" data-mode="reflexY">🪞 Eje y</button>
    <button class="mode-btn" data-mode="escalaV">📏 Escala V</button>
    <button class="mode-btn" data-mode="escalaH">📐 Escala H</button>
    <button class="mode-btn" data-mode="general">🧩 General</button>
  </div>

  <section class="card">
    <div class="control" id="__UID___ctrl_a">
      <div class="control-top">
        <label>Base a</label>
        <span class="value-chip" id="__UID___val_a">2.0</span>
      </div>
      <input id="__UID___a" type="range" min="1.2" max="3" step="0.1" value="2">
    </div>

    <div class="control hidden" id="__UID___ctrl_A">
      <div class="control-top">
        <label>Factor vertical A</label>
        <span class="value-chip" id="__UID___val_A">1.0</span>
      </div>
      <input id="__UID___A" type="range" min="-4" max="4" step="0.25" value="1">
    </div>

    <div class="control hidden" id="__UID___ctrl_B">
      <div class="control-top">
        <label>Factor horizontal B</label>
        <span class="value-chip" id="__UID___val_B">1.0</span>
      </div>
      <input id="__UID___B" type="range" min="-4" max="4" step="0.25" value="1">
    </div>

    <div class="control hidden" id="__UID___ctrl_h">
      <div class="control-top">
        <label>Corrimiento h</label>
        <span class="value-chip" id="__UID___val_h">0</span>
      </div>
      <input id="__UID___h" type="range" min="-5" max="5" step="1" value="0">
    </div>

    <div class="control hidden" id="__UID___ctrl_k">
      <div class="control-top">
        <label>Corrimiento k</label>
        <span class="value-chip" id="__UID___val_k">0</span>
      </div>
      <input id="__UID___k" type="range" min="-6" max="6" step="1" value="0">
    </div>
  </section>

  <section class="card">
    <div class="status-row">
      <div class="status" id="__UID___status">Pantalla: función madre</div>
      <div class="formula-live" id="__UID___formula">f(x)=2.0ˣ</div>
    </div>

    <canvas id="__UID___canvas"></canvas>

    <div class="info-grid">
      <div class="info-box explain" id="__UID___explain">
        La curva gris punteada es la función madre. La curva azul es la función transformada.
      </div>

      <div class="info-box asymptote">
        <div class="small">ASÍNTOTA HORIZONTAL</div>
        <div class="big" id="__UID___asymptote">y = 0</div>
      </div>
    </div>
  </section>

  <section class="info-grid">
    <div class="info-box idea">
      <h3 id="__UID___ideaTitle">🌱 ¿Qué estamos mirando?</h3>
      <p id="__UID___ideaText">
        La función madre es la curva inicial. Desde ella vamos a construir todas las transformaciones.
      </p>
    </div>

    <div class="info-box warning">
      <h3>⚠️ Ojo con esto</h3>
      <p id="__UID___warningText">
        La exponencial positiva se acerca al eje x, pero no lo toca.
      </p>
    </div>

    <div class="info-box challenge">
      <h3>🎯 Mini desafío</h3>
      <p id="__UID___challengeText">
        Mové la base y observá qué cambia en la rapidez del crecimiento.
      </p>
    </div>
  </section>

</main>

<script>
(function(){

  const UID = "__UID__";

  const root = document.getElementById(UID + "_app");
  const canvas = document.getElementById(UID + "_canvas");
  const ctx = canvas.getContext("2d");

  const inputs = {
    a: document.getElementById(UID + "_a"),
    A: document.getElementById(UID + "_A"),
    B: document.getElementById(UID + "_B"),
    h: document.getElementById(UID + "_h"),
    k: document.getElementById(UID + "_k")
  };

  const values = {
    a: document.getElementById(UID + "_val_a"),
    A: document.getElementById(UID + "_val_A"),
    B: document.getElementById(UID + "_val_B"),
    h: document.getElementById(UID + "_val_h"),
    k: document.getElementById(UID + "_val_k")
  };

  const controls = {
    A: document.getElementById(UID + "_ctrl_A"),
    B: document.getElementById(UID + "_ctrl_B"),
    h: document.getElementById(UID + "_ctrl_h"),
    k: document.getElementById(UID + "_ctrl_k")
  };

  const statusBox = document.getElementById(UID + "_status");
  const formulaBox = document.getElementById(UID + "_formula");
  const explainBox = document.getElementById(UID + "_explain");
  const asymptoteBox = document.getElementById(UID + "_asymptote");

  const ideaTitle = document.getElementById(UID + "_ideaTitle");
  const ideaText = document.getElementById(UID + "_ideaText");
  const warningText = document.getElementById(UID + "_warningText");
  const challengeText = document.getElementById(UID + "_challengeText");

  const modeButtons = Array.from(root.querySelectorAll(".mode-btn"));

  let mode = "madre";

  let target = {
    a: 2,
    A: 1,
    B: 1,
    h: 0,
    k: 0
  };

  let current = {
    a: 2,
    A: 1,
    B: 1,
    h: 0,
    k: 0
  };

  const xMin = -5;
  const xMax = 5;
  const yMin = -6;
  const yMax = 14;

  function readNumber(id) {
    return parseFloat(inputs[id].value);
  }

  function round1(n) {
    return Math.round(n * 10) / 10;
  }

  function round2(n) {
    return Math.round(n * 100) / 100;
  }

  function pow(a, x) {
    let v = Math.pow(a, x);
    if (!Number.isFinite(v)) return NaN;
    if (Math.abs(v) > 1e6) return NaN;
    return v;
  }

  function motherValue(x, p) {
    return pow(p.a, x);
  }

  function expoValue(x, p) {
    const exponent = p.B * (x - p.h);
    const base = pow(p.a, exponent);
    if (!Number.isFinite(base)) return NaN;
    return p.A * base + p.k;
  }

  function updateLabels() {
    values.a.textContent = Number(inputs.a.value).toFixed(1);
    values.A.textContent = Number(inputs.A.value).toFixed(2);
    values.B.textContent = Number(inputs.B.value).toFixed(2);
    values.h.textContent = inputs.h.value;
    values.k.textContent = inputs.k.value;
  }

  function showControls() {
    Object.values(controls).forEach(c => c.classList.add("hidden"));

    if (mode === "vertical") controls.k.classList.remove("hidden");
    if (mode === "horizontal") controls.h.classList.remove("hidden");
    if (mode === "escalaV") controls.A.classList.remove("hidden");
    if (mode === "escalaH") controls.B.classList.remove("hidden");

    if (mode === "general") {
      controls.A.classList.remove("hidden");
      controls.B.classList.remove("hidden");
      controls.h.classList.remove("hidden");
      controls.k.classList.remove("hidden");
    }
  }

  function applyModeDefaults() {
    const a = readNumber("a");

    if (mode === "madre") {
      target = { a:a, A:1, B:1, h:0, k:0 };
    }

    if (mode === "vertical") {
      target = { a:a, A:1, B:1, h:0, k:readNumber("k") };
    }

    if (mode === "horizontal") {
      target = { a:a, A:1, B:1, h:readNumber("h"), k:0 };
    }

    if (mode === "reflexX") {
      target = { a:a, A:-1, B:1, h:0, k:0 };
    }

    if (mode === "reflexY") {
      target = { a:a, A:1, B:-1, h:0, k:0 };
    }

    if (mode === "escalaV") {
      target = { a:a, A:readNumber("A"), B:1, h:0, k:0 };
    }

    if (mode === "escalaH") {
      target = { a:a, A:1, B:readNumber("B"), h:0, k:0 };
    }

    if (mode === "general") {
      target = {
        a:a,
        A:readNumber("A"),
        B:readNumber("B"),
        h:readNumber("h"),
        k:readNumber("k")
      };
    }

    updateLabels();
    updateText();
  }

  function prettyFormula(p) {
    const a = round1(p.a).toFixed(1);
    const A = round2(p.A).toFixed(2);
    const B = round2(p.B).toFixed(2);
    const h = round2(p.h);
    const k = round2(p.k);

    if (mode === "madre") return `f(x)=${a}ˣ`;

    if (mode === "vertical") {
      return `f(x)=${a}ˣ ${k >= 0 ? "+ " + k : "- " + Math.abs(k)}`;
    }

    if (mode === "horizontal") {
      return `f(x)=${a}^(x ${h >= 0 ? "- " + h : "+ " + Math.abs(h)})`;
    }

    if (mode === "reflexX") return `f(x)=-${a}ˣ`;

    if (mode === "reflexY") return `f(x)=${a}^(-x)`;

    if (mode === "escalaV") return `f(x)=${A}·${a}ˣ`;

    if (mode === "escalaH") return `f(x)=${a}^(${B}x)`;

    return `f(x)=${A}·${a}^(${B}(x ${h >= 0 ? "- " + h : "+ " + Math.abs(h)})) ${k >= 0 ? "+ " + k : "- " + Math.abs(k)}`;
  }

  function updateText() {
    const p = target;

    formulaBox.innerHTML = prettyFormula(p);
    asymptoteBox.textContent = `y = ${round2(p.k)}`;

    modeButtons.forEach(btn => {
      btn.classList.toggle("active", btn.dataset.mode === mode);
    });

    if (mode === "madre") {
      statusBox.textContent = "Pantalla: función madre";
      ideaTitle.textContent = "🌱 ¿Qué estamos mirando?";
      ideaText.innerHTML = "La función madre es la curva inicial. Desde ella vamos a construir todas las transformaciones.";
      warningText.innerHTML = "La exponencial positiva se acerca al eje x, pero no lo toca.";
      challengeText.innerHTML = "Mové la base y observá qué cambia en la rapidez del crecimiento.";
      explainBox.innerHTML = "La curva gris punteada y la azul coinciden porque todavía no aplicamos ninguna transformación.";
    }

    if (mode === "vertical") {
      statusBox.textContent = "Pantalla: corrimiento vertical";
      ideaTitle.textContent = "⬆️⬇️ ¿Qué cambia?";
      ideaText.innerHTML = "El valor <b>k</b> mueve toda la curva hacia arriba o hacia abajo.";
      warningText.innerHTML = "La forma de la curva no cambia: solo se traslada verticalmente.";
      challengeText.innerHTML = "Probá k = 3 y k = -3. ¿Qué pasa con la asíntota?";
      explainBox.innerHTML = "Como <b>k</b> está fuera de la potencia, modifica los valores de <b>y</b>. La asíntota pasa a ser <b>y = k</b>.";
    }

    if (mode === "horizontal") {
      statusBox.textContent = "Pantalla: corrimiento horizontal";
      ideaTitle.textContent = "↔️ ¿Qué cambia?";
      ideaText.innerHTML = "El valor <b>h</b> mueve la curva hacia la derecha o hacia la izquierda.";
      warningText.innerHTML = "<b>x - 3</b> mueve hacia la derecha. <b>x + 3</b> mueve hacia la izquierda.";
      challengeText.innerHTML = "Poné h = 2. ¿Los puntos se movieron vertical u horizontalmente?";
      explainBox.innerHTML = "Como <b>h</b> aparece junto a la x, el cambio es horizontal. La asíntota sigue siendo <b>y = 0</b>.";
    }

    if (mode === "reflexX") {
      statusBox.textContent = "Pantalla: reflexión respecto del eje x";
      ideaTitle.textContent = "🪞 Espejo vertical";
      ideaText.innerHTML = "Multiplicar toda la función por -1 cambia el signo de los valores de y.";
      warningText.innerHTML = "No es lo mismo <b>-aˣ</b> que <b>a⁻ˣ</b>.";
      challengeText.innerHTML = "Mirá el punto cuando x = 0. ¿De qué valor a qué valor pasó?";
      explainBox.innerHTML = "La función se refleja respecto del eje <b>x</b>. Lo que estaba arriba pasa abajo.";
    }

    if (mode === "reflexY") {
      statusBox.textContent = "Pantalla: reflexión respecto del eje y";
      ideaTitle.textContent = "🪞 Espejo horizontal";
      ideaText.innerHTML = "Cambiar x por -x invierte la gráfica horizontalmente.";
      warningText.innerHTML = "Si la función era creciente, ahora se vuelve decreciente.";
      challengeText.innerHTML = "Buscá qué le ocurre al punto que antes estaba en x = 2.";
      explainBox.innerHTML = "La función se refleja respecto del eje <b>y</b>. Los puntos cambian de lado horizontalmente.";
    }

    if (mode === "escalaV") {
      statusBox.textContent = "Pantalla: escala vertical";
      ideaTitle.textContent = "📏 Estirar o comprimir";
      ideaText.innerHTML = "El factor <b>A</b> agranda, achica o refleja los valores de y.";
      warningText.innerHTML = "Si A es negativo, aparece una reflexión respecto del eje x.";
      challengeText.innerHTML = "Compará A = 0.5 y A = 3. ¿Cuál queda más pegada al eje x?";
      explainBox.innerHTML = "Como <b>A</b> está fuera de la potencia, modifica verticalmente la gráfica.";
    }

    if (mode === "escalaH") {
      statusBox.textContent = "Pantalla: escala horizontal";
      ideaTitle.textContent = "📐 Abrir o apretar";
      ideaText.innerHTML = "El factor <b>B</b> modifica la gráfica horizontalmente.";
      warningText.innerHTML = "Si B es grande, la gráfica se aprieta. Si está entre 0 y 1, se abre.";
      challengeText.innerHTML = "Probá B = 2 y B = 0.5. ¿Cuál se ve más abierta?";
      explainBox.innerHTML = "Como <b>B</b> multiplica a la x, el cambio es horizontal.";
    }

    if (mode === "general") {
      statusBox.textContent = "Pantalla: transformación general";
      ideaTitle.textContent = "🧩 Todo junto";
      ideaText.innerHTML = "Acá podés combinar corrimientos, reflexiones y escalas.";
      warningText.innerHTML = "Conviene usar esta pantalla recién después de explorar cada transformación por separado.";
      challengeText.innerHTML = "Intentá construir una función reflejada, corrida 2 a la derecha y 3 hacia arriba.";
      explainBox.innerHTML = "Leé la fórmula por partes: lo que está <b>adentro</b> modifica horizontalmente; lo que está <b>afuera</b> modifica verticalmente.";
    }
  }

  function resizeCanvas() {
    const rect = canvas.getBoundingClientRect();
    const dpr = window.devicePixelRatio || 1;

    canvas.width = rect.width * dpr;
    canvas.height = rect.height * dpr;

    ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
  }

  function X(x) {
    const W = canvas.clientWidth;
    const margin = 38;
    return margin + ((x - xMin) / (xMax - xMin)) * (W - 2 * margin);
  }

  function Y(y) {
    const H = canvas.clientHeight;
    const marginTop = 44;
    const marginBottom = 42;
    return marginTop + ((yMax - y) / (yMax - yMin)) * (H - marginTop - marginBottom);
  }

  function line(x1, y1, x2, y2, color="#0f172a", width=1, dashed=false) {
    ctx.save();
    ctx.beginPath();
    ctx.strokeStyle = color;
    ctx.lineWidth = width;
    ctx.lineCap = "round";

    if (dashed) ctx.setLineDash([8, 7]);

    ctx.moveTo(x1, y1);
    ctx.lineTo(x2, y2);
    ctx.stroke();
    ctx.restore();
  }

  function text(t, x, y, size=14, color="#0f172a", align="center", bold=false) {
    ctx.save();
    ctx.fillStyle = color;
    ctx.font = `${bold ? "900 " : "500 "}${size}px Arial`;
    ctx.textAlign = align;
    ctx.fillText(t, x, y);
    ctx.restore();
  }

  function roundedRect(x, y, w, h, r, fill, stroke=null) {
    ctx.save();
    ctx.beginPath();

    ctx.moveTo(x+r, y);
    ctx.lineTo(x+w-r, y);
    ctx.quadraticCurveTo(x+w, y, x+w, y+r);
    ctx.lineTo(x+w, y+h-r);
    ctx.quadraticCurveTo(x+w, y+h, x+w-r, y+h);
    ctx.lineTo(x+r, y+h);
    ctx.quadraticCurveTo(x, y+h, x, y+h-r);
    ctx.lineTo(x, y+r);
    ctx.quadraticCurveTo(x, y, x+r, y);

    ctx.closePath();
    ctx.fillStyle = fill;
    ctx.fill();

    if (stroke) {
      ctx.strokeStyle = stroke;
      ctx.lineWidth = 1.5;
      ctx.stroke();
    }

    ctx.restore();
  }

  function dot(x, y, r, fill, stroke="#ffffff") {
    ctx.save();
    ctx.beginPath();
    ctx.arc(x, y, r, 0, Math.PI * 2);
    ctx.fillStyle = fill;
    ctx.fill();
    ctx.strokeStyle = stroke;
    ctx.lineWidth = 3;
    ctx.stroke();
    ctx.restore();
  }

  function glowDot(x, y, r, fill) {
    ctx.save();
    ctx.shadowColor = fill;
    ctx.shadowBlur = 16;
    dot(x, y, r, fill);
    ctx.restore();
  }

  function drawGrid() {
    const W = canvas.clientWidth;
    const H = canvas.clientHeight;

    ctx.clearRect(0, 0, W, H);

    roundedRect(12, 12, W - 24, H - 24, 22, "rgba(255,255,255,.82)", "#dbeafe");

    for (let gx = Math.ceil(xMin); gx <= Math.floor(xMax); gx++) {
      const px = X(gx);

      line(
        px,
        Y(yMin),
        px,
        Y(yMax),
        gx === 0 ? "#0f172a" : "#dbeafe",
        gx === 0 ? 2 : 1
      );

      if (gx !== 0 && gx % 2 === 0) {
        text(String(gx), px, Y(0) + 18, 11, "#64748b");
      }
    }

    for (let gy = Math.ceil(yMin); gy <= Math.floor(yMax); gy += 2) {
      const py = Y(gy);

      line(
        X(xMin),
        py,
        X(xMax),
        py,
        gy === 0 ? "#0f172a" : "#e2e8f0",
        gy === 0 ? 2 : 1
      );

      if (gy !== 0) {
        text(String(gy), X(0) - 18, py + 4, 11, "#64748b");
      }
    }

    text("x", X(xMax) + 12, Y(0) + 5, 13, "#0f172a", "left", true);
    text("y", X(0) - 5, Y(yMax) - 10, 13, "#0f172a", "right", true);
  }

  function drawCurve(fn, color, width=3, dashed=false) {
    ctx.save();
    ctx.beginPath();
    ctx.strokeStyle = color;
    ctx.lineWidth = width;
    ctx.lineCap = "round";

    if (dashed) ctx.setLineDash([10, 8]);

    let started = false;
    const W = canvas.clientWidth;
    const samples = Math.floor(W * 1.4);

    for (let i = 0; i <= samples; i++) {
      const mx = xMin + (i / samples) * (xMax - xMin);
      const my = fn(mx);

      if (!Number.isFinite(my) || my < yMin - 20 || my > yMax + 20) {
        started = false;
        continue;
      }

      const px = X(mx);
      const py = Y(my);

      if (!started) {
        ctx.moveTo(px, py);
        started = true;
      } else {
        ctx.lineTo(px, py);
      }
    }

    ctx.stroke();
    ctx.restore();
  }

  function drawPoints(p) {
    const xs = [-2, -1, 0, 1, 2];

    xs.forEach(x0 => {
      const y0 = motherValue(x0, p);

      if (!Number.isFinite(y0)) return;

      let xt = x0;
      let yt = y0;

      if (Math.abs(p.B) > 0.001) {
        xt = x0 / p.B + p.h;
        yt = p.A * y0 + p.k;
      } else {
        xt = p.h;
        yt = p.A + p.k;
      }

      if (
        y0 < yMin || y0 > yMax ||
        yt < yMin || yt > yMax ||
        xt < xMin || xt > xMax
      ) {
        return;
      }

      line(X(x0), Y(y0), X(xt), Y(yt), "#f59e0b", 1.7, true);
      dot(X(x0), Y(y0), 5, "#94a3b8");
      glowDot(X(xt), Y(yt), 7, "#ef4444");
    });
  }

  function drawLegend() {
    const W = canvas.clientWidth;

    roundedRect(W - 160, 22, 136, 68, 16, "rgba(15,23,42,.92)", "#1e293b");

    line(W - 145, 45, W - 112, 45, "#94a3b8", 3, true);
    text("madre", W - 102, 49, 11, "#e2e8f0", "left", true);

    line(W - 145, 70, W - 112, 70, "#2563eb", 4, false);
    text("nueva", W - 102, 74, 11, "#e2e8f0", "left", true);
  }

  function drawTitle() {
    roundedRect(24, 22, 165, 46, 15, "rgba(255,255,255,.92)", "#dbeafe");
    text("Gráfico", 40, 48, 15, "#0f172a", "left", true);
    text("exponencial", 40, 62, 11, "#2563eb", "left", true);
  }

  function draw() {
    for (const key of ["a", "A", "B", "h", "k"]) {
      current[key] += (target[key] - current[key]) * 0.08;
    }

    drawGrid();

    const asymY = current.k;

    if (asymY >= yMin && asymY <= yMax) {
      line(X(xMin), Y(asymY), X(xMax), Y(asymY), "#64748b", 2.3, true);
    }

    drawCurve(mx => motherValue(mx, current), "#94a3b8", 3, true);
    drawCurve(mx => expoValue(mx, current), "#2563eb", 4, false);

    drawPoints(current);
    drawLegend();
    drawTitle();

    requestAnimationFrame(draw);
  }

  function setMode(newMode) {
    mode = newMode;
    showControls();
    applyModeDefaults();
  }

  modeButtons.forEach(btn => {
    btn.addEventListener("click", () => setMode(btn.dataset.mode));
  });

  Object.values(inputs).forEach(inp => {
    inp.addEventListener("input", applyModeDefaults);
  });

  window.addEventListener("resize", resizeCanvas);

  resizeCanvas();
  showControls();
  applyModeDefaults();
  requestAnimationFrame(draw);

})();
</script>
</div>
""".replace("__UID__", uid)

display(HTML(html))