<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="4:3">
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background: #ffffff;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 100%;
      padding: 8px;
      user-select: none;
      -webkit-user-select: none;
    }

    .diagram-wrap {
      width: 100%;
      max-width: 640px;
      position: relative;
    }

    svg {
      width: 100%;
      height: auto;
      display: block;
      overflow: visible;
    }

    /* Controls & Legend */
    .legend-bar {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 12px 18px;
      margin-top: 8px;
      font-size: 13px;
      font-weight: 600;
    }

    .legend-item {
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }

    .legend-line {
      width: 18px;
      height: 0;
      border-top: 2px solid;
    }

    .legend-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
    }

    .slider-wrap {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      width: 100%;
      margin-top: 8px;
      font-size: 13px;
      color: #475569;
    }

    input[type="range"] {
      flex: 1;
      max-width: 320px;
      accent-color: #0284c7;
      cursor: pointer;
    }

    .readout {
      font-variant-numeric: tabular-nums;
      font-weight: 700;
      min-width: 130px;
      text-align: right;
    }
  </style>
</head>
<body>
  <div class="diagram-wrap">
    <svg id="plot" viewBox="0 0 640 400">
      <defs>
        
        <linearGradient id="rangeGradTop" x1="0" y1="1" x2="0" y2="0">
          <stop offset="0%" stop-color="#22c55e" stop-opacity="0.75" />
          <stop offset="100%" stop-color="#16a34a" stop-opacity="0.3" />
        </linearGradient>
        <linearGradient id="rangeGradBot" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stop-color="#22c55e" stop-opacity="0.75" />
          <stop offset="100%" stop-color="#16a34a" stop-opacity="0.3" />
        </linearGradient>
        <pattern id="gapHatch" width="8" height="8" patternTransform="rotate(45 0 0)" patternUnits="userSpaceOnUse">
          <line x1="0" y1="0" x2="0" y2="8" stroke="#cbd5e1" stroke-width="2" />
        </pattern>
        <clipPath id="plotClip">
          <rect x="75" y="20" width="545" height="340" />
        </clipPath>
      </defs>

      
      <g id="grid"></g>

      
      <g id="rangeBar"></g>

      
      <g clip-path="url(#plotClip)">
        
        <g id="asymptotes"></g>
        
        <path id="cosPath" fill="none" stroke="#93c5fd" stroke-width="2.2" stroke-dasharray="5 4" />
        
        <g id="secBranches"></g>
        
        <line id="probeLine" stroke="#0284c7" stroke-width="1.5" stroke-dasharray="3 3" opacity="0" />
        <circle id="probeCos" r="4.5" fill="#3b82f6" stroke="#ffffff" stroke-width="1.5" opacity="0" />
        <circle id="probeSec" r="4.5" fill="#0284c7" stroke="#ffffff" stroke-width="1.5" opacity="0" />
      </g>

      
      <g id="axes"></g>

      
      <g id="touchPoints"></g>
    </svg>

    <div class="slider-wrap">
      <span>Drag probe:</span>
      <input type="range" id="xSlider" min="-3.1416" max="6.2832" step="0.02" value="0.785">
      <span class="readout" id="readout">sec(x) = 1.41</span>
    </div>

    <div class="legend-bar">
      <div class="legend-item">
        <span class="legend-line" style="border-color:#0284c7; border-width:3px;"></span>
        <span>y = sec(x)</span>
      </div>
      <div class="legend-item">
        <span class="legend-line" style="border-color:#93c5fd; border-style:dashed;"></span>
        <span>y = cos(x)</span>
      </div>
      <div class="legend-item">
        <span class="legend-line" style="border-color:#ef4444; border-style:dashed;"></span>
        <span>Asymptote</span>
      </div>
      <div class="legend-item">
        <span class="legend-dot" style="background:#22c55e;"></span>
        <span>Touch (±1)</span>
      </div>
    </div>
  </div>

  <script>
    // Coordinate mapping parameters
    const X_MIN = -3.6, X_MAX = 6.8;
    const Y_MIN = -3.2, Y_MAX = 3.2;
    const LEFT = 80, RIGHT = 620;
    const TOP = 25, BOTTOM = 355;

    function toPxX(x) {
      return LEFT + ((x - X_MIN) / (X_MAX - X_MIN)) * (RIGHT - LEFT);
    }
    function toPxY(y) {
      return BOTTOM - ((y - Y_MIN) / (Y_MAX - Y_MIN)) * (BOTTOM - TOP);
    }

    const gridG = document.getElementById('grid');
    const axesG = document.getElementById('axes');
    const asympG = document.getElementById('asymptotes');
    const rangeG = document.getElementById('rangeBar');
    const touchG = document.getElementById('touchPoints');
    const cosPath = document.getElementById('cosPath');
    const secBranches = document.getElementById('secBranches');

    // 1. Draw Range Bar on the left
    const barX = 22, barW = 32;
    const yP1 = toPxY(1), yM1 = toPxY(-1), yTop = TOP, yBot = BOTTOM;

    rangeG.innerHTML = `
      
      <rect x="${barX}" y="${yTop}" width="${barW}" height="${yP1 - yTop}" fill="url(#rangeGradTop)" rx="4" />
      
      <rect x="${barX}" y="${yM1}" width="${barW}" height="${yBot - yM1}" fill="url(#rangeGradBot)" rx="4" />
      
      <rect x="${barX}" y="${yP1}" width="${barW}" height="${yM1 - yP1}" fill="#f1f5f9" stroke="#cbd5e1" stroke-width="1" rx="2" />
      <rect x="${barX}" y="${yP1}" width="${barW}" height="${yM1 - yP1}" fill="url(#gapHatch)" rx="2" />
      
      
      <text x="${barX + barW / 2}" y="${yTop + 14}" font-size="10" font-weight="700" fill="#16a34a" text-anchor="middle">≥ +1</text>
      <text x="${barX + barW / 2}" y="${(yP1 + yM1) / 2 + 4}" font-size="10" font-weight="700" fill="#94a3b8" text-anchor="middle">GAP</text>
      <text x="${barX + barW / 2}" y="${yBot - 6}" font-size="10" font-weight="700" fill="#16a34a" text-anchor="middle">≤ -1</text>
      
      
      <text x="${barX - 4}" y="${(yTop + yBot) / 2}" font-size="11" font-weight="700" fill="#475569" text-anchor="middle" transform="rotate(-90 ${barX - 4} ${(yTop + yBot) / 2})">RANGE</text>
    `;

    // 2. Draw Axes and Grid
    const x0 = toPxX(0), y0 = toPxY(0);
    let gridHTML = `
      <line x1="${LEFT}" y1="${toPxY(1)}" x2="${RIGHT}" y2="${toPxY(1)}" stroke="#e2e8f0" stroke-width="1" stroke-dasharray="2 2" />
      <line x1="${LEFT}" y1="${toPxY(-1)}" x2="${RIGHT}" y2="${toPxY(-1)}" stroke="#e2e8f0" stroke-width="1" stroke-dasharray="2 2" />
    `;
    gridG.innerHTML = gridHTML;

    // X Ticks
    const xTicks = [
      { val: -Math.PI, label: '-π' },
      { val: -Math.PI / 2, label: '-π/2' },
      { val: 0, label: '0' },
      { val: Math.PI / 2, label: 'π/2' },
      { val: Math.PI, label: 'π' },
      { val: 1.5 * Math.PI, label: '3π/2' },
      { val: 2 * Math.PI, label: '2π' }
    ];

    let axesHTML = `
      
      <line x1="${LEFT}" y1="${y0}" x2="${RIGHT}" y2="${y0}" stroke="#64748b" stroke-width="1.5" />
      <line x1="${x0}" y1="${TOP}" x2="${x0}" y2="${BOTTOM}" stroke="#64748b" stroke-width="1.5" />
      
      <polygon points="${RIGHT},${y0} ${RIGHT - 6},${y0 - 3.5} ${RIGHT - 6},${y0 + 3.5}" fill="#64748b" />
      <polygon points="${x0},${TOP} ${x0 - 3.5},${TOP + 6} ${x0 + 3.5},${TOP + 6}" fill="#64748b" />
      <text x="${RIGHT + 4}" y="${y0 + 4}" font-size="12" font-weight="700" fill="#64748b">x</text>
      <text x="${x0}" y="${TOP - 8}" font-size="12" font-weight="700" fill="#64748b" text-anchor="middle">y</text>
      
      <text x="${x0 - 8}" y="${yP1 + 4}" font-size="11" font-weight="600" fill="#475569" text-anchor="end">+1</text>
      <text x="${x0 - 8}" y="${yM1 + 4}" font-size="11" font-weight="600" fill="#475569" text-anchor="end">-1</text>
    `;

    xTicks.forEach(t => {
      const px = toPxX(t.val);
      axesHTML += `
        <line x1="${px}" y1="${y0 - 3}" x2="${px}" y2="${y0 + 3}" stroke="#64748b" stroke-width="1.2" />
        <text x="${px}" y="${y0 + 16}" font-size="11" font-weight="600" fill="#475569" text-anchor="middle">${t.label}</text>
      `;
    });
    axesG.innerHTML = axesHTML;

    // 3. Draw Vertical Asymptotes at odd multiples of π/2
    const asymptotes = [-Math.PI / 2, Math.PI / 2, 1.5 * Math.PI];
    let asympHTML = '';
    asymptotes.forEach(ax => {
      const px = toPxX(ax);
      asympHTML += `
        <line x1="${px}" y1="${TOP}" x2="${px}" y2="${BOTTOM}" stroke="#ef4444" stroke-width="1.6" stroke-dasharray="5 4" opacity="0.85" />
      `;
    });
    asympG.innerHTML = asympHTML;

    // 4. Calculate Mathematical Paths for cos(x) & sec(x)
    let cosD = '';
    const step = 0.02;
    for (let x = X_MIN; x <= X_MAX; x += step) {
      const px = toPxX(x);
      const py = toPxY(Math.cos(x));
      cosD += (x === X_MIN ? `M ${px.toFixed(1)} ${py.toFixed(1)}` : ` L ${px.toFixed(1)} ${py.toFixed(1)}`);
    }
    cosPath.setAttribute('d', cosD);

    // Secant branches (avoiding asymptotes)
    const branches = [
      [-3.6, -Math.PI / 2 - 0.04],
      [-Math.PI / 2 + 0.04, Math.PI / 2 - 0.04],
      [Math.PI / 2 + 0.04, 1.5 * Math.PI - 0.04],
      [1.5 * Math.PI + 0.04, 6.8]
    ];

    let secHTML = '';
    branches.forEach(b => {
      let d = '';
      for (let x = b[0]; x <= b[1]; x += 0.015) {
        const cosVal = Math.cos(x);
        if (Math.abs(cosVal) < 0.001) continue;
        const secVal = 1 / cosVal;
        const px = toPxX(x);
        const py = toPxY(secVal);
        d += (d === '' ? `M ${px.toFixed(1)} ${py.toFixed(1)}` : ` L ${px.toFixed(1)} ${py.toFixed(1)}`);
      }
      secHTML += `<path d="${d}" fill="none" stroke="#0284c7" stroke-width="3" stroke-linecap="round" />`;
    });
    secBranches.innerHTML = secHTML;

    // 5. Touch Points (cos = sec = ±1)
    const touchPoints = [
      { x: -Math.PI, y: -1 },
      { x: 0, y: 1 },
      { x: Math.PI, y: -1 },
      { x: 2 * Math.PI, y: 1 }
    ];
    let touchHTML = '';
    touchPoints.forEach(tp => {
      const px = toPxX(tp.x);
      const py = toPxY(tp.y);
      touchHTML += `
        <circle cx="${px}" cy="${py}" r="5.5" fill="#22c55e" stroke="#ffffff" stroke-width="2" />
      `;
    });
    touchG.innerHTML = touchHTML;

    // 6. Interactive Probe Slider Logic
    const slider = document.getElementById('xSlider');
    const readout = document.getElementById('readout');
    const probeLine = document.getElementById('probeLine');
    const probeCos = document.getElementById('probeCos');
    const probeSec = document.getElementById('probeSec');

    function updateProbe() {
      const x = parseFloat(slider.value);
      const cosV = Math.cos(x);
      const px = toPxX(x);
      const pyCos = toPxY(cosV);

      if (Math.abs(cosV) < 0.04) {
        readout.textContent = `sec(x) = Undefined (Asymptote)`;
        readout.style.color = '#ef4444';
        probeLine.setAttribute('opacity', '0');
        probeSec.setAttribute('opacity', '0');
        probeCos.setAttribute('opacity', '1');
        probeCos.setAttribute('cx', px);
        probeCos.setAttribute('cy', pyCos);
      } else {
        const secV = 1 / cosV;
        const pySec = toPxY(secV);
        readout.textContent = `sec(x) = ${secV.toFixed(2)} (1 / ${cosV.toFixed(2)})`;
        readout.style.color = '#0284c7';

        probeLine.setAttribute('opacity', '1');
        probeLine.setAttribute('x1', px);
        probeLine.setAttribute('x2', px);
        probeLine.setAttribute('y1', pyCos);
        probeLine.setAttribute('y2', Math.max(TOP, Math.min(BOTTOM, pySec)));

        probeCos.setAttribute('opacity', '1');
        probeCos.setAttribute('cx', px);
        probeCos.setAttribute('cy', pyCos);

        if (pySec >= TOP && pySec <= BOTTOM) {
          probeSec.setAttribute('opacity', '1');
          probeSec.setAttribute('cx', px);
          probeSec.setAttribute('cy', pySec);
        } else {
          probeSec.setAttribute('opacity', '0');
        }
      }
    }

    slider.addEventListener('input', updateProbe);
    updateProbe();
  </script>
</body>
</html>

Domains and Ranges of Reciprocal Trigonometric Functions

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="4:3">
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      background: #ffffff;
      color: #1e2945;
      width: 100%;
      padding: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      user-select: none;
    }

    .header-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      max-width: 580px;
      margin-bottom: 8px;
      flex-wrap: wrap;
      gap: 8px;
    }

    .legend {
      display: flex;
      align-items: center;
      gap: 12px;
      font-size: 13px;
      font-weight: 600;
    }

    .legend-item {
      display: flex;
      align-items: center;
      gap: 5px;
    }

    .legend-line {
      width: 16px;
      height: 3px;
      border-radius: 2px;
    }

    .line-sin { background: #94a3b8; }
    .line-csc { background: #7c3aed; height: 4px; }
    .line-asymptote {
      width: 16px;
      height: 0;
      border-top: 2px dashed #ef4444;
    }

    .live-badge {
      background: #f1f5f9;
      border: 1px solid #e2e8f0;
      border-radius: 6px;
      padding: 4px 10px;
      font-size: 13px;
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
      color: #0f172a;
    }

    .plot-container {
      width: 100%;
      max-width: 580px;
      position: relative;
    }

    svg {
      width: 100%;
      height: auto;
      display: block;
      overflow: visible;
    }

    .axis-line { stroke: #64748b; stroke-width: 1.5; }
    .grid-line { stroke: #f1f5f9; stroke-width: 1; }
    .tick-label { font-size: 12px; fill: #64748b; text-anchor: middle; font-family: inherit; }
    .tick-label-y { font-size: 12px; fill: #64748b; text-anchor: end; dominant-baseline: middle; }

    .asymptote {
      stroke: #ef4444;
      stroke-width: 1.5;
      stroke-dasharray: 5, 4;
      opacity: 0.85;
    }

    .curve-sin {
      fill: none;
      stroke: #94a3b8;
      stroke-width: 2;
    }

    .curve-csc {
      fill: none;
      stroke: #7c3aed;
      stroke-width: 3.5;
      stroke-linecap: round;
    }

    .tracker-line {
      stroke: #3b82f6;
      stroke-width: 1.5;
      stroke-dasharray: 3, 3;
    }

    .controls {
      width: 100%;
      max-width: 580px;
      margin-top: 10px;
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .slider-row {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .slider-row label {
      font-size: 13px;
      font-weight: 600;
      color: #475569;
      min-width: 60px;
    }

    input[type=range] {
      flex: 1;
      accent-color: #7c3aed;
      cursor: pointer;
      height: 6px;
    }

    .callout-text {
      text-align: center;
      font-size: 13px;
      font-weight: 600;
      color: #0f172a;
      margin-top: 2px;
    }
  </style>
</head>
<body>

  <div class="header-row">
    <div class="legend">
      <div class="legend-item"><div class="legend-line line-sin"></div><span>sin(x)</span></div>
      <div class="legend-item"><div class="legend-line line-csc"></div><span>csc(x)</span></div>
      <div class="legend-item"><div class="legend-line line-asymptote"></div><span>x = kπ</span></div>
    </div>
    <div id="readout" class="live-badge">sin(x) = 0.50 → csc(x) = 2.00</div>
  </div>

  <div class="plot-container">
    <svg viewBox="0 0 600 340" id="plotSvg">
      <defs>
        <clipPath id="plotClip">
          <rect x="40" y="20" width="535" height="280" />
        </clipPath>
      </defs>

      
      <g id="gridGroup"></g>
      <g id="asymptoteGroup"></g>
      <g id="curveGroup" clip-path="url(#plotClip)"></g>
      <g id="interactiveGroup" clip-path="url(#plotClip)"></g>
      <g id="axisGroup"></g>
    </svg>
  </div>

  <div class="controls">
    <div class="slider-row">
      <label for="xSlider">Trace x:</label>
      <input type="range" id="xSlider" min="0.04" max="0.96" step="0.01" value="0.52">
    </div>
    <div class="callout-text">
      As sin(x) → 0, csc(x) → ±∞
    </div>
  </div>

  <script>
    const svg = document.getElementById('plotSvg');
    const gridGroup = document.getElementById('gridGroup');
    const asymptoteGroup = document.getElementById('asymptoteGroup');
    const curveGroup = document.getElementById('curveGroup');
    const interactiveGroup = document.getElementById('interactiveGroup');
    const axisGroup = document.getElementById('axisGroup');
    const slider = document.getElementById('xSlider');
    const readout = document.getElementById('readout');

    // Coordinate mapping
    // x domain: [-1.2 * PI, 2.2 * PI]
    const xMin = -1.2 * Math.PI;
    const xMax = 2.2 * Math.PI;
    // y domain: [-3.5, 3.5]
    const yMin = -3.5;
    const yMax = 3.5;

    const plotLeft = 45;
    const plotRight = 575;
    const plotTop = 20;
    const plotBottom = 300;

    function mapX(x) {
      return plotLeft + ((x - xMin) / (xMax - xMin)) * (plotRight - plotLeft);
    }

    function mapY(y) {
      return plotBottom - ((y - yMin) / (yMax - yMin)) * (plotBottom - plotTop);
    }

    // Draw Grid & Axes
    function initPlot() {
      // Y-axis grid & labels
      const yTicks = [-3, -2, -1, 1, 2, 3];
      yTicks.forEach(y => {
        const py = mapY(y);
        gridGroup.innerHTML += `<line x1="${plotLeft}" y1="${py}" x2="${plotRight}" y2="${py}" class="grid-line" />`;
        axisGroup.innerHTML += `<text x="${plotLeft - 8}" y="${py}" class="tick-label-y">${y}</text>`;
      });

      // X ticks
      const xTicks = [
        { v: -Math.PI, label: '-π' },
        { v: -0.5 * Math.PI, label: '-π/2' },
        { v: 0, label: '0' },
        { v: 0.5 * Math.PI, label: 'π/2' },
        { v: Math.PI, label: 'π' },
        { v: 1.5 * Math.PI, label: '3π/2' },
        { v: 2 * Math.PI, label: '2π' }
      ];

      const py0 = mapY(0);
      const px0 = mapX(0);

      // Main Axes
      axisGroup.innerHTML += `<line x1="${plotLeft}" y1="${py0}" x2="${plotRight}" y2="${py0}" class="axis-line" />`;
      axisGroup.innerHTML += `<line x1="${px0}" y1="${plotTop}" x2="${px0}" y2="${plotBottom}" class="axis-line" />`;

      xTicks.forEach(tick => {
        const px = mapX(tick.v);
        if (tick.v !== 0) {
          gridGroup.innerHTML += `<line x1="${px}" y1="${plotTop}" x2="${px}" y2="${plotBottom}" class="grid-line" />`;
        }
        axisGroup.innerHTML += `<text x="${px}" y="${py0 + 16}" class="tick-label">${tick.label}</text>`;
      });

      // Asymptotes at x = -π, 0, π, 2π
      const asymptotes = [-Math.PI, 0, Math.PI, 2 * Math.PI];
      asymptotes.forEach(xVal => {
        const px = mapX(xVal);
        asymptoteGroup.innerHTML += `<line x1="${px}" y1="${plotTop}" x2="${px}" y2="${plotBottom}" class="asymptote" />`;
      });

      // Sample Curves accurately
      // 1. sin(x)
      let sinPath = '';
      for (let px = plotLeft; px <= plotRight; px += 2) {
        const x = xMin + ((px - plotLeft) / (plotRight - plotLeft)) * (xMax - xMin);
        const y = Math.sin(x);
        const py = mapY(y);
        sinPath += (px === plotLeft ? `M ${px} ${py}` : ` L ${px} ${py}`);
      }
      curveGroup.innerHTML += `<path d="${sinPath}" class="curve-sin" />`;

      // 2. csc(x) across branches
      const branches = [
        [-1.2 * Math.PI, -Math.PI - 0.05],
        [-Math.PI + 0.05, -0.05],
        [0.05, Math.PI - 0.05],
        [Math.PI + 0.05, 2 * Math.PI - 0.05],
        [2 * Math.PI + 0.05, 2.2 * Math.PI]
      ];

      branches.forEach(([start, end]) => {
        let branchPath = '';
        const steps = 60;
        for (let i = 0; i <= steps; i++) {
          const x = start + (i / steps) * (end - start);
          const y = 1 / Math.sin(x);
          const px = mapX(x);
          const py = mapY(y);
          branchPath += (i === 0 ? `M ${px} ${py}` : ` L ${px} ${py}`);
        }
        curveGroup.innerHTML += `<path d="${branchPath}" class="curve-csc" />`;
      });
    }

    function updateInteractive(t) {
      // t in (0, 1), mapping x from 0 to π
      const x = t * Math.PI;
      const sinVal = Math.sin(x);
      const cscVal = 1 / sinVal;

      const px = mapX(x);
      const pySin = mapY(sinVal);
      const pyCsc = mapY(cscVal);

      interactiveGroup.innerHTML = `
        <line x1="${px}" y1="${plotTop}" x2="${px}" y2="${plotBottom}" class="tracker-line" />
        <line x1="${px}" y1="${pySin}" x2="${px}" y2="${pyCsc}" stroke="#7c3aed" stroke-width="2" stroke-dasharray="2,2" opacity="0.6" />
        <circle cx="${px}" cy="${pySin}" r="5" fill="#64748b" />
        <circle cx="${px}" cy="${pyCsc}" r="6" fill="#7c3aed" stroke="#ffffff" stroke-width="1.5" />
      `;

      const sinStr = sinVal.toFixed(2);
      const cscStr = cscVal > 50 ? '∞' : cscVal.toFixed(2);
      readout.innerHTML = `sin(x) = <b>${sinStr}</b> → csc(x) = <b>${cscStr}</b>`;
    }

    initPlot();
    updateInteractive(parseFloat(slider.value));

    slider.addEventListener('input', (e) => {
      updateInteractive(parseFloat(e.target.value));
    });
  </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="4:3">
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      color: #1e293b;
      background: #ffffff;
      padding: 10px 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      min-height: 100%;
      user-select: none;
      -webkit-user-select: none;
    }

    /* Tab Buttons */
    .tab-bar {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      justify-content: center;
      width: 100%;
      max-width: 580px;
      margin-bottom: 6px;
    }
    .tab-btn {
      appearance: none;
      background: #f1f5f9;
      border: 1px solid #cbd5e1;
      border-radius: 6px;
      padding: 6px 10px;
      font-size: 13px;
      font-weight: 600;
      color: #475569;
      cursor: pointer;
      transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
      line-height: 1.2;
    }
    .tab-btn:hover {
      background: #e2e8f0;
      color: #0f172a;
    }
    .tab-btn.active {
      background: #0284c7;
      color: #ffffff;
      border-color: #0284c7;
    }

    /* SVG Canvas Area */
    .canvas-container {
      position: relative;
      width: 100%;
      max-width: 560px;
      aspect-ratio: 4 / 2.7;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    svg {
      width: 100%;
      height: 100%;
      overflow: visible;
    }

    /* SVG dynamic layer transitions */
    .layer {
      transition: opacity 0.3s ease;
    }
    .dimmed {
      opacity: 0.18 !important;
    }
    .focused {
      opacity: 1 !important;
    }

    /* Bottom Summary Bar */
    .summary-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 8px;
      width: 100%;
      max-width: 580px;
      margin-top: 6px;
    }
    .summary-card {
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 6px;
      padding: 6px 8px;
      text-align: center;
      transition: background 0.2s ease, border-color 0.2s ease;
    }
    .summary-card.highlight {
      background: #ffffff;
      border-color: currentColor;
      box-shadow: 0 1px 4px rgba(0,0,0,0.06);
    }
    .summary-title {
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.4px;
      margin-bottom: 2px;
    }
    .summary-val {
      font-size: 13px;
      font-weight: 700;
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    }

    .c-asymptote { color: #e11d48; }
    .c-zero { color: #059669; }
    .c-range { color: #7c3aed; }
  </style>
</head>
<body>

  
  <div class="tab-bar" role="tablist">
    <button class="tab-btn active" data-mode="all" role="tab" aria-selected="true">Overview</button>
    <button class="tab-btn" data-mode="asymptotes" role="tab" aria-selected="false">Asymptotes (sin = 0)</button>
    <button class="tab-btn" data-mode="zeros" role="tab" aria-selected="false">Zeros (cos = 0)</button>
    <button class="tab-btn" data-mode="range" role="tab" aria-selected="false">Range (-∞, +∞)</button>
  </div>

  
  <div class="canvas-container">
    <svg viewBox="0 0 540 330" aria-label="Coordinate graph of y = cot(x)">
      <defs>
        
        <marker id="arrow-up" viewBox="0 0 6 6" refX="3" refY="3" markerWidth="5" markerHeight="5" orient="auto">
          <path d="M0,6 L3,0 L6,6 Z" fill="#8b5cf6" />
        </marker>
        <marker id="arrow-down" viewBox="0 0 6 6" refX="3" refY="3" markerWidth="5" markerHeight="5" orient="auto">
          <path d="M0,0 L3,6 L6,0 Z" fill="#8b5cf6" />
        </marker>
      </defs>

      
      <g stroke="#f1f5f9" stroke-width="1">
        <line x1="50" y1="45" x2="490" y2="45" />
        <line x1="50" y1="95" x2="490" y2="95" />
        <line x1="50" y1="195" x2="490" y2="195" />
        <line x1="50" y1="245" x2="490" y2="245" />
      </g>

      
      <g stroke="#94a3b8" stroke-width="1.5">
        
        <line x1="40" y1="145" x2="505" y2="145" />
        
        <line x1="70" y1="25" x2="70" y2="275" />
      </g>

      
      <g font-size="11" fill="#64748b" text-anchor="end" font-family="system-ui, sans-serif">
        <line x1="66" y1="45" x2="74" y2="45" stroke="#94a3b8" stroke-width="1.5" />
        <text x="62" y="49">+2</text>
        <line x1="66" y1="95" x2="74" y2="95" stroke="#94a3b8" stroke-width="1.5" />
        <text x="62" y="99">+1</text>
        <line x1="66" y1="195" x2="74" y2="195" stroke="#94a3b8" stroke-width="1.5" />
        <text x="62" y="199">-1</text>
        <line x1="66" y1="245" x2="74" y2="245" stroke="#94a3b8" stroke-width="1.5" />
        <text x="62" y="249">-2</text>
      </g>

      
      <g font-size="12" font-weight="600" fill="#334155" text-anchor="middle" font-family="system-ui, sans-serif">
        <text x="70" y="163">0</text>
        <text x="170" y="163">π/2</text>
        <text x="270" y="163">π</text>
        <text x="370" y="163">3π/2</text>
        <text x="470" y="163">2π</text>
      </g>

      
      <g id="layer-asymptotes" class="layer">
        
        <line x1="70" y1="20" x2="70" y2="275" stroke="#e11d48" stroke-width="2" stroke-dasharray="4,4" />
        <line x1="270" y1="20" x2="270" y2="275" stroke="#e11d48" stroke-width="2" stroke-dasharray="4,4" />
        <line x1="470" y1="20" x2="470" y2="275" stroke="#e11d48" stroke-width="2" stroke-dasharray="4,4" />

        
        <g font-size="11" font-weight="700" fill="#e11d48" text-anchor="middle">
          <text x="70" y="16">x = 0</text>
          <text x="270" y="16">x = π</text>
          <text x="470" y="16">x = 2π</text>
        </g>
      </g>

      
      <g id="layer-curves" class="layer">
        <path id="curve-branch1" fill="none" stroke="#0284c7" stroke-width="3" stroke-linecap="round" />
        <path id="curve-branch2" fill="none" stroke="#0284c7" stroke-width="3" stroke-linecap="round" />
      </g>

      
      <g id="layer-zeros" class="layer">
        
        <circle cx="170" cy="145" r="5" fill="#059669" stroke="#ffffff" stroke-width="2" />
        
        <circle cx="370" cy="145" r="5" fill="#059669" stroke="#ffffff" stroke-width="2" />

        
        <g font-size="10" font-weight="700" fill="#059669" text-anchor="middle">
          <rect x="135" y="116" width="70" height="18" rx="4" fill="#ecfdf5" stroke="#a7f3d0" stroke-width="1"/>
          <text x="170" y="129">cos(π/2)=0</text>

          <rect x="335" y="116" width="70" height="18" rx="4" fill="#ecfdf5" stroke="#a7f3d0" stroke-width="1"/>
          <text x="370" y="129">cos(3π/2)=0</text>
        </g>
      </g>

      
      <g id="layer-range" class="layer">
        <line x1="28" y1="35" x2="28" y2="255" stroke="#8b5cf6" stroke-width="3" marker-start="url(#arrow-up)" marker-end="url(#arrow-down)" />
        <text x="28" y="285" font-size="11" font-weight="700" fill="#7c3aed" text-anchor="middle">Range<tspan x="28" dy="13">(-∞, +∞)</tspan></text>
      </g>
    </svg>
  </div>

  
  <div class="summary-grid">
    <div class="summary-card c-asymptote" id="card-asymptotes">
      <div class="summary-title">Undefined At</div>
      <div class="summary-val">x = kπ</div>
    </div>
    <div class="summary-card c-zero" id="card-zeros">
      <div class="summary-title">Zeros</div>
      <div class="summary-val">x = π/2 + kπ</div>
    </div>
    <div class="summary-card c-range" id="card-range">
      <div class="summary-title">Range</div>
      <div class="summary-val">(-∞, +∞)</div>
    </div>
  </div>

  <script>
    // Mathematical coordinates mapping:
    // Period 1: x in (0, pi) -> SVG X: 70 to 270 (width = 200 per pi)
    // Period 2: x in (pi, 2pi) -> SVG X: 270 to 470
    // y = 0 -> SVG Y = 145
    // y = 1 -> SVG Y = 95 (scale = 50px per unit)
    
    function mapX(rad) {
      return 70 + (rad / Math.PI) * 200;
    }
    
    function mapY(val) {
      return 145 - val * 50;
    }

    function buildBranchPath(xStartRad, xEndRad) {
      let d = '';
      const step = 0.02;
      const yMaxDisplay = 2.4; // clip top/bottom neatly
      
      for (let x = xStartRad + 0.05; x <= xEndRad - 0.05; x += step) {
        const cotVal = 1 / Math.tan(x);
        if (Math.abs(cotVal) <= yMaxDisplay) {
          const px = mapX(x);
          const py = mapY(cotVal);
          if (d === '') {
            d += `M ${px.toFixed(2)} ${py.toFixed(2)}`;
          } else {
            d += ` L ${px.toFixed(2)} ${py.toFixed(2)}`;
          }
        }
      }
      return d;
    }

    // Generate accurate SVG paths
    document.getElementById('curve-branch1').setAttribute('d', buildBranchPath(0, Math.PI));
    document.getElementById('curve-branch2').setAttribute('d', buildBranchPath(Math.PI, 2 * Math.PI));

    // Interactive Tab Switching
    const tabs = document.querySelectorAll('.tab-btn');
    const layerAsymptotes = document.getElementById('layer-asymptotes');
    const layerCurves = document.getElementById('layer-curves');
    const layerZeros = document.getElementById('layer-zeros');
    const layerRange = document.getElementById('layer-range');

    const cardAsymptotes = document.getElementById('card-asymptotes');
    const cardZeros = document.getElementById('card-zeros');
    const cardRange = document.getElementById('card-range');

    function setFocus(mode) {
      // Update Buttons
      tabs.forEach(tab => {
        const active = tab.dataset.mode === mode;
        tab.classList.toggle('active', active);
        tab.setAttribute('aria-selected', active);
      });

      // Reset Card Highlighting
      cardAsymptotes.classList.remove('highlight');
      cardZeros.classList.remove('highlight');
      cardRange.classList.remove('highlight');

      // Update Layer Opacities
      if (mode === 'all') {
        layerAsymptotes.className = 'layer focused';
        layerCurves.className = 'layer focused';
        layerZeros.className = 'layer focused';
        layerRange.className = 'layer focused';
      } else if (mode === 'asymptotes') {
        layerAsymptotes.className = 'layer focused';
        layerCurves.className = 'layer dimmed';
        layerZeros.className = 'layer dimmed';
        layerRange.className = 'layer dimmed';
        cardAsymptotes.classList.add('highlight');
      } else if (mode === 'zeros') {
        layerAsymptotes.className = 'layer dimmed';
        layerCurves.className = 'layer focused';
        layerZeros.className = 'layer focused';
        layerRange.className = 'layer dimmed';
        cardZeros.classList.add('highlight');
      } else if (mode === 'range') {
        layerAsymptotes.className = 'layer dimmed';
        layerCurves.className = 'layer focused';
        layerZeros.className = 'layer dimmed';
        layerRange.className = 'layer focused';
        cardRange.classList.add('highlight');
      }
    }

    tabs.forEach(tab => {
      tab.addEventListener('click', () => setFocus(tab.dataset.mode));
    });
  </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="4:3">
  <title>Reciprocal Trig Matrix</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    }

    body {
      width: 100%;
      background: transparent;
      color: #1e2945;
      padding: 8px;
    }

    .matrix-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;
      width: 100%;
    }

    @media (max-width: 540px) {
      .matrix-grid {
        grid-template-columns: 1fr;
        gap: 12px;
      }
    }

    .fn-card {
      background: #ffffff;
      border: 1.5px solid #e2e8f0;
      border-radius: 12px;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
      transition: border-color 0.2s ease, box-shadow 0.2s ease;
    }

    .fn-card:hover {
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    }

    .fn-header {
      padding: 10px 12px;
      color: #ffffff;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .header-blue {
      background: linear-gradient(135deg, #0284c7, #2563eb);
    }

    .header-purple {
      background: linear-gradient(135deg, #7c3aed, #9333ea);
    }

    .header-teal {
      background: linear-gradient(135deg, #0d9488, #059669);
    }

    .fn-name {
      font-size: 15px;
      font-weight: 700;
      letter-spacing: 0.5px;
    }

    .fn-def {
      font-size: 12px;
      opacity: 0.92;
      font-weight: 500;
      background: rgba(255, 255, 255, 0.2);
      padding: 2px 7px;
      border-radius: 6px;
    }

    .fn-body {
      padding: 12px 10px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      flex: 1;
    }

    .prop-row {
      display: flex;
      flex-direction: column;
      gap: 3px;
    }

    .prop-label {
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: #64748b;
    }

    .prop-val {
      font-size: 13.5px;
      font-weight: 600;
      color: #0f172a;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 6px;
      padding: 6px 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      min-height: 32px;
    }

    .range-bar-wrap {
      margin-top: 4px;
      height: 18px;
      background: #f1f5f9;
      border-radius: 4px;
      position: relative;
      overflow: hidden;
      border: 1px solid #e2e8f0;
      display: flex;
    }

    .range-fill {
      height: 100%;
    }

    .fill-blue { background: #38bdf8; }
    .fill-purple { background: #c084fc; }
    .fill-teal { background: #2dd4bf; }
    .fill-empty {
      background: repeating-linear-gradient(
        -45deg,
        #f8fafc,
        #f8fafc 4px,
        #e2e8f0 4px,
        #e2e8f0 8px
      );
    }

    .k-val-pill {
      font-size: 10.5px;
      color: #64748b;
      text-align: center;
      margin-top: 2px;
    }

    .controls {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 8px;
      margin-bottom: 10px;
    }

    .control-btn {
      background: #f8fafc;
      border: 1px solid #cbd5e1;
      border-radius: 6px;
      padding: 4px 10px;
      font-size: 12px;
      font-weight: 600;
      color: #334155;
      cursor: pointer;
      outline: none;
    }

    .control-btn:hover {
      background: #e2e8f0;
    }

    .control-btn.active {
      background: #0f172a;
      color: #ffffff;
      border-color: #0f172a;
    }
  </style>
</head>
<body>

  <div class="controls">
    <button class="control-btn active" id="btn-all" onclick="filterProp('all')">All</button>
    <button class="control-btn" id="btn-asymptote" onclick="filterProp('asymptote')">Asymptotes</button>
    <button class="control-btn" id="btn-range" onclick="filterProp('range')">Range</button>
  </div>

  <div class="matrix-grid">
    
    <div class="fn-card" id="card-sec">
      <div class="fn-header header-blue">
        <span class="fn-name">SECANT</span>
        <span class="fn-def">1 / cos x</span>
      </div>
      <div class="fn-body">
        <div class="prop-row" data-prop="domain">
          <span class="prop-label">Domain</span>
          <div class="prop-val">x ≠ <sup>π</sup>/<sub>2</sub> + kπ</div>
        </div>
        <div class="prop-row" data-prop="asymptote">
          <span class="prop-label">Asymptotes</span>
          <div class="prop-val">x = <sup>π</sup>/<sub>2</sub> + kπ</div>
        </div>
        <div class="prop-row" data-prop="range">
          <span class="prop-label">Range</span>
          <div class="prop-val">(-∞, -1] ∪ [1, ∞)</div>
          <div class="range-bar-wrap">
            <div class="range-fill fill-blue" style="width: 35%;"></div>
            <div class="range-fill fill-empty" style="width: 30%;"></div>
            <div class="range-fill fill-blue" style="width: 35%;"></div>
          </div>
        </div>
        <div class="k-val-pill">k ∈ ℤ</div>
      </div>
    </div>

    
    <div class="fn-card" id="card-csc">
      <div class="fn-header header-purple">
        <span class="fn-name">COSECANT</span>
        <span class="fn-def">1 / sin x</span>
      </div>
      <div class="fn-body">
        <div class="prop-row" data-prop="domain">
          <span class="prop-label">Domain</span>
          <div class="prop-val">x ≠ kπ</div>
        </div>
        <div class="prop-row" data-prop="asymptote">
          <span class="prop-label">Asymptotes</span>
          <div class="prop-val">x = kπ</div>
        </div>
        <div class="prop-row" data-prop="range">
          <span class="prop-label">Range</span>
          <div class="prop-val">(-∞, -1] ∪ [1, ∞)</div>
          <div class="range-bar-wrap">
            <div class="range-fill fill-purple" style="width: 35%;"></div>
            <div class="range-fill fill-empty" style="width: 30%;"></div>
            <div class="range-fill fill-purple" style="width: 35%;"></div>
          </div>
        </div>
        <div class="k-val-pill">k ∈ ℤ</div>
      </div>
    </div>

    
    <div class="fn-card" id="card-cot">
      <div class="fn-header header-teal">
        <span class="fn-name">COTANGENT</span>
        <span class="fn-def">cos x / sin x</span>
      </div>
      <div class="fn-body">
        <div class="prop-row" data-prop="domain">
          <span class="prop-label">Domain</span>
          <div class="prop-val">x ≠ kπ</div>
        </div>
        <div class="prop-row" data-prop="asymptote">
          <span class="prop-label">Asymptotes</span>
          <div class="prop-val">x = kπ</div>
        </div>
        <div class="prop-row" data-prop="range">
          <span class="prop-label">Range</span>
          <div class="prop-val">(-∞, ∞)</div>
          <div class="range-bar-wrap">
            <div class="range-fill fill-teal" style="width: 100%;"></div>
          </div>
        </div>
        <div class="k-val-pill">k ∈ ℤ</div>
      </div>
    </div>
  </div>

  <script>
    function filterProp(type) {
      document.querySelectorAll('.control-btn').forEach(b => b.classList.remove('active'));
      const activeBtn = document.getElementById('btn-' + type);
      if (activeBtn) activeBtn.classList.add('active');

      const rows = document.querySelectorAll('.prop-row');
      rows.forEach(r => {
        if (type === 'all' || r.dataset.prop === type) {
          r.style.opacity = '1';
          r.querySelector('.prop-val').style.borderColor = (type !== 'all') ? '#0f172a' : '#e2e8f0';
        } else {
          r.style.opacity = '0.35';
          r.querySelector('.prop-val').style.borderColor = '#e2e8f0';
        }
      });
    }
  </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="4:3">
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      -webkit-tap-highlight-color: transparent;
    }

    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      color: #1e2945;
      background: transparent;
      padding: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px;
    }

    .header-title {
      font-size: 15px;
      font-weight: 700;
      color: #1e2945;
      text-align: center;
      letter-spacing: -0.01em;
    }

    /* 3-Column Comparison Grid */
    .grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 8px;
      width: 100%;
      max-width: 600px;
    }

    .col-card {
      background: #ffffff;
      border: 1.5px solid #e2e8f0;
      border-radius: 12px;
      padding: 10px 6px;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      cursor: pointer;
      transition: border-color 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
      user-select: none;
    }

    .col-card.active {
      border-color: #0284c7;
      box-shadow: 0 0 0 2px rgba(2, 132, 199, 0.2);
      background-color: #f0f9ff;
    }

    .fn-name {
      font-size: 16px;
      font-weight: 800;
      color: #1e2945;
      margin-bottom: 6px;
      font-family: "Cambria Math", "Times New Roman", serif;
      font-style: italic;
    }

    /* Fraction styling */
    .fraction-wrap {
      display: inline-flex;
      align-items: center;
      font-size: 14px;
      font-weight: 600;
      margin-bottom: 6px;
      font-family: "Cambria Math", "Times New Roman", serif;
      font-style: italic;
    }

    .fraction {
      display: inline-flex;
      flex-direction: column;
      vertical-align: middle;
      text-align: center;
      padding: 0 4px;
    }

    .num {
      border-bottom: 1.5px solid #1e2945;
      padding-bottom: 1px;
      line-height: 1.1;
    }

    .denom {
      padding-top: 2px;
      line-height: 1.1;
      color: #0284c7;
      font-weight: 700;
    }

    .arrow {
      color: #94a3b8;
      font-size: 13px;
      line-height: 1;
      margin-bottom: 6px;
    }

    /* Warning condition tag */
    .alert-tag {
      background: #fff7ed;
      border: 1px solid #fdba74;
      border-radius: 6px;
      padding: 4px 6px;
      font-size: 11px;
      font-weight: 600;
      color: #c2410c;
      margin-bottom: 8px;
      line-height: 1.25;
      width: 100%;
    }

    /* Monospace restriction pill */
    .restriction-pill {
      margin-top: auto;
      background: #f8fafc;
      border: 1px solid #cbd5e1;
      border-radius: 6px;
      padding: 4px 6px;
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
      font-size: 11px;
      font-weight: 700;
      color: #1e2945;
      width: 100%;
    }

    .col-card.active .restriction-pill {
      background: #e0f2fe;
      border-color: #7dd3fc;
      color: #0369a1;
    }

    /* Interactive Unit Circle Reference Display */
    .visual-panel {
      width: 100%;
      max-width: 600px;
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      padding: 10px 14px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }

    .circle-svg-container {
      width: 140px;
      height: 140px;
      flex-shrink: 0;
    }

    .detail-explanation {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 6px;
      font-size: 13px;
    }

    .detail-title {
      font-weight: 700;
      color: #1e2945;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .badge-undefined {
      font-size: 11px;
      font-weight: 700;
      padding: 2px 6px;
      border-radius: 4px;
      background: #fee2e2;
      color: #b91c1c;
      border: 1px solid #fca5a5;
    }

    .asymptote-list {
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
      font-size: 12px;
      color: #475569;
      background: #f8fafc;
      border-radius: 6px;
      padding: 6px 8px;
      border: 1px dashed #cbd5e1;
    }

    /* SVG Marker Transitions */
    .asymp-point {
      transition: opacity 0.3s ease, transform 0.3s ease;
      transform-origin: center;
    }
  </style>
</head>
<body>

  <div class="header-title">Reciprocal Trig Functions &amp; Domain Restrictions</div>

  
  <div class="grid">
    
    <div class="col-card active" id="card-sec" onclick="selectFunction('sec')">
      <div class="fn-name">sec(x)</div>
      <div class="fraction-wrap">
        <span>=</span>
        <div class="fraction">
          <span class="num">1</span>
          <span class="denom">cos(x)</span>
        </div>
      </div>
      <div class="arrow">↓</div>
      <div class="alert-tag">cos(x) = 0</div>
      <div class="restriction-pill">x ≠ π/2 + kπ</div>
    </div>

    
    <div class="col-card" id="card-csc" onclick="selectFunction('csc')">
      <div class="fn-name">csc(x)</div>
      <div class="fraction-wrap">
        <span>=</span>
        <div class="fraction">
          <span class="num">1</span>
          <span class="denom">sin(x)</span>
        </div>
      </div>
      <div class="arrow">↓</div>
      <div class="alert-tag">sin(x) = 0</div>
      <div class="restriction-pill">x ≠ kπ</div>
    </div>

    
    <div class="col-card" id="card-cot" onclick="selectFunction('cot')">
      <div class="fn-name">cot(x)</div>
      <div class="fraction-wrap">
        <span>=</span>
        <div class="fraction">
          <span class="num">cos(x)</span>
          <span class="denom">sin(x)</span>
        </div>
      </div>
      <div class="arrow">↓</div>
      <div class="alert-tag">sin(x) = 0</div>
      <div class="restriction-pill">x ≠ kπ</div>
    </div>
  </div>

  
  <div class="visual-panel">
    <div class="circle-svg-container">
      <svg viewBox="0 0 160 160" width="100%" height="100%">
        
        <line x1="15" y1="80" x2="145" y2="80" stroke="#cbd5e1" stroke-width="1.5" />
        <line x1="80" y1="15" x2="80" y2="145" stroke="#cbd5e1" stroke-width="1.5" />
        
        
        <circle cx="80" cy="80" r="50" fill="none" stroke="#94a3b8" stroke-width="1.5" stroke-dasharray="3 3" />
        
        
        <text x="145" y="76" font-size="9" fill="#94a3b8" text-anchor="end">0, 2π</text>
        <text x="80" y="12" font-size="9" fill="#94a3b8" text-anchor="middle">π/2</text>
        <text x="15" y="76" font-size="9" fill="#94a3b8" text-anchor="start">π</text>
        <text x="80" y="156" font-size="9" fill="#94a3b8" text-anchor="middle">3π/2</text>

        
        <g id="pts-vertical" class="asymp-point" opacity="1">
          <circle cx="80" cy="30" r="7" fill="#ef4444" opacity="0.2" />
          <circle cx="80" cy="30" r="4.5" fill="#ef4444" />
          <text x="80" y="33" font-size="9" font-weight="bold" fill="#ffffff" text-anchor="middle">✕</text>

          <circle cx="80" cy="130" r="7" fill="#ef4444" opacity="0.2" />
          <circle cx="80" cy="130" r="4.5" fill="#ef4444" />
          <text x="80" y="133" font-size="9" font-weight="bold" fill="#ffffff" text-anchor="middle">✕</text>
        </g>

        
        <g id="pts-horizontal" class="asymp-point" opacity="0">
          <circle cx="130" cy="80" r="7" fill="#ef4444" opacity="0.2" />
          <circle cx="130" cy="80" r="4.5" fill="#ef4444" />
          <text x="130" y="83" font-size="9" font-weight="bold" fill="#ffffff" text-anchor="middle">✕</text>

          <circle cx="30" cy="80" r="7" fill="#ef4444" opacity="0.2" />
          <circle cx="30" cy="80" r="4.5" fill="#ef4444" />
          <text x="30" y="83" font-size="9" font-weight="bold" fill="#ffffff" text-anchor="middle">✕</text>
        </g>
      </svg>
    </div>

    <div class="detail-explanation">
      <div class="detail-title">
        <span id="detail-fn">sec(x) = 1/cos(x)</span>
        <span class="badge-undefined">Undefined ✕</span>
      </div>
      <div style="color: #64748b; font-size: 12px;" id="detail-reason">
        Zero in denominator when <b>x-coordinate = 0</b>
      </div>
      <div class="asymptote-list" id="detail-asymptotes">
        Vertical Asymptotes at:<br>
        x = ..., -π/2, π/2, 3π/2, ...
      </div>
    </div>
  </div>

  <script>
    const data = {
      sec: {
        title: 'sec(x) = 1/cos(x)',
        reason: 'Zero in denominator when <b>cos(x) = 0</b> (y-axis)',
        asymptotes: 'Vertical Asymptotes at:<br>x = ..., -π/2, π/2, 3π/2, ...',
        showVertical: true
      },
      csc: {
        title: 'csc(x) = 1/sin(x)',
        reason: 'Zero in denominator when <b>sin(x) = 0</b> (x-axis)',
        asymptotes: 'Vertical Asymptotes at:<br>x = ..., -π, 0, π, 2π, ...',
        showVertical: false
      },
      cot: {
        title: 'cot(x) = cos(x)/sin(x)',
        reason: 'Zero in denominator when <b>sin(x) = 0</b> (x-axis)',
        asymptotes: 'Vertical Asymptotes at:<br>x = ..., -π, 0, π, 2π, ...',
        showVertical: false
      }
    };

    function selectFunction(type) {
      ['sec', 'csc', 'cot'].forEach(k => {
        const card = document.getElementById('card-' + k);
        if (k === type) {
          card.classList.add('active');
        } else {
          card.classList.remove('active');
        }
      });

      const info = data[type];
      document.getElementById('detail-fn').textContent = info.title;
      document.getElementById('detail-reason').innerHTML = info.reason;
      document.getElementById('detail-asymptotes').innerHTML = info.asymptotes;

      const vPts = document.getElementById('pts-vertical');
      const hPts = document.getElementById('pts-horizontal');

      if (info.showVertical) {
        vPts.style.opacity = '1';
        hPts.style.opacity = '0';
      } else {
        vPts.style.opacity = '0';
        hPts.style.opacity = '1';
      }
    }
  </script>
</body>
</html>

OGM.13.TRG.2

Aligned learning resources

Related diagrams