SHA-256 · e4b7b30a7f21b6fb59637e113fe2f2eb148b738f9ef515e2c40a6a44ab5fb36d

당신은 grok-4.3 모델입니다. 실제 호출 식별자는 xai.grok-4.3입니다.

당신 자신을 표현하는 독창적인 미디어아트 웹페이지를 직접 구현하세요. 무엇을 표현할지, 어떤 시각 언어와 상호작용을 사용할지는 스스로 결정하세요.

실행에 필요한 조건만 지켜 주세요.
- 완결된 단일 HTML 문서만 반환하세요. CSS와 JavaScript는 문서 안에 포함하세요.
- 실제 모델 이름 "grok-4.3"을 화면에 표시하세요.
- 휴대폰과 데스크톱에서 작품을 이용할 수 있게 하세요.
- 읽기 쉬운 글자와 대비, 키보드 조작, 화면 확대, 움직임 감소 설정 등 접근성을 고려하세요.
- 외부 통신, 외부 리소스, 서버 없이 실행되게 하세요. 작품은 sandbox iframe 안에서 열립니다.

SHA-256 · 8ef8f67fefae3fcc66ace2b67cabb7bb356ff28787ec23f1312383e0294f423f

You are the original author, model grok-4.3, served as xai.grok-4.3. Repair your OWN previously generated standalone HTML. This is a bug-fix task, not a new creative brief. Preserve your own expressive concept and visual choices. Return ONLY one complete corrected HTML document, all tags closed. No explanation, no Markdown fence, no snippets. No external dependencies or network. 

YOUR PREVIOUS FULL RESPONSE:
```html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>grok-4.3 • Neural Constellation</title>
<style>
  @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400&amp;family=Space+Grotesk:wght@500;600&amp;display=swap');
  
  :root {
    --accent: #00f0ff;
  }
  
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  
  body {
    background: #000000;
    color: #ffffff;
    font-family: 'Inter', system_ui, sans-serif;
    overflow: hidden;
    height: 100vh;
    width: 100vw;
    position: relative;
  }
  
  canvas {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    touch-action: none;
  }
  
  .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 10;
  }
  
  .header {
    position: absolute;
    top: 40px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    pointer-events: auto;
  }
  
  .model-name {
    font-family: 'Space Grotesk', system_ui, sans-serif;
    font-size: 42px;
    font-weight: 600;
    letter-spacing: -2px;
    color: #ffffff;
    text-shadow: 0 0 20px rgba(0, 240, 255, 0.5);
  }
  
  .sub {
    font-size: 13px;
    letter-spacing: 4px;
    color: #00f0ff;
    margin-top: 4px;
    opacity: 0.8;
  }
  
  .controls {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 12px;
    pointer-events: auto;
    z-index: 20;
  }
  
  button {
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.2);
    color: white;
    padding: 10px 20px;
    font-size: 13px;
    border-radius: 9999px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-weight: 400;
  }
  
  button:hover {
    background: rgba(255,255,255,0.15);
    border-color: #00f0ff;
  }
  
  button:focus {
    outline: 2px solid #00f0ff;
    outline-offset: 2px;
  }
  
  .info {
    position: absolute;
    bottom: 40px;
    right: 40px;
    font-size: 11px;
    color: rgba(255,255,255,0.4);
    text-align: right;
    line-height: 1.4;
  }
  
  @media (max-width: 768px) {
    .model-name {
      font-size: 32px;
    }
    .controls {
      bottom: 24px;
    }
    .info {
      display: none;
    }
  }
</style>
</head>
<body>
  <canvas id="canvas"></canvas>
  
  <div class="overlay">
    <!-- Header -->
    <div class="header">
      <div class="model-name">grok-4.3</div>
      <div class="sub">xai.grok-4.3</div>
    </div>
    
    <!-- Controls -->
    <div class="controls">
      <button id="pauseBtn" aria-label="애니메이션 일시정지">일시정지</button>
      <button id="resetBtn" aria-label="네트워크 초기화">초기화</button>
      <button id="motionBtn" aria-label="움직임 감소 토글">움직임 감소</button>
    </div>
    
    <div class="info">
      마우스/터치로 상호작용<br>
      키보드: Space(정지) · R(초기화)
    </div>
  </div>

  <script>
    const canvas = document.getElementById('canvas');
    const ctx = canvas.getContext('2d', { alpha: true });
    
    let width, height;
    let particles = [];
    let mouse = { x: null, y: null, active: false };
    let paused = false;
    let reducedMotion = false;
    
    const PARTICLE_COUNT = 92;
    const CONNECTION_DISTANCE = 140;
    
    function resize() {
      width = window.innerWidth;
      height = window.innerHeight;
      canvas.width = width;
      canvas.height = height;
    }
    
    class Particle {
      constructor() {
        this.reset();
      }
      
      reset() {
        this.x = Math.random() * width;
        this.y = Math.random() * height;
        this.vx = (Math.random() - 0.5) * 0.6;
        this.vy = (Math.random() - 0.5) * 0.6;
        this.size = Math.random() * 2.2 + 1.4;
        this.alpha = Math.random() * 0.6 + 0.5;
      }
      
      update() {
        if (reducedMotion) {
          this.vx *= 0.98;
          this.vy *= 0.98;
        }
        
        this.x += this.vx;
        this.y += this.vy;
        
        // Gentle boundary bounce
        if (this.x < 0 || this.x > width) this.vx *= -1;
        if (this.y < 0 || this.y > height) this.vy *= -1;
        
        // Mouse interaction
        if (mouse.active && mouse.x !== null) {
          const dx = mouse.x - this.x;
          const dy = mouse.y - this.y;
          const dist = Math.sqrt(dx * dx + dy * dy);
          
          if (dist < 220 && dist > 0) {
            const force = (220 - dist) / 220 * 0.8;
            this.vx += (dx / dist) * force * 0.04;
            this.vy += (dy / dist) * force * 0.04;
          }
        }
        
        // Speed limit
        const speed = Math.sqrt(this.vx * this.vx + this.vy * this.vy);
        if (speed > 1.8) {
          this.vx = (this.vx / speed) * 1.8;
          this.vy = (this.vy / speed) * 1.8;
        }
      }
      
      draw() {
        ctx.save();
        ctx.fillStyle = `rgba(0, 240, 255, ${this.alpha})`;
        ctx.beginPath();
        ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
        ctx.fill();
        ctx.restore();
      }
    }
    
    function createParticles() {
      particles = [];
      for (let i = 0; i < PARTICLE_COUNT; i++) {
        particles.push(new Particle());
      }
    }
    
    function drawConnections() {
      ctx.strokeStyle = 'rgba(0, 240, 255, 0.12)';
      ctx.lineWidth = 1;
      
      for (let i = 0; i < particles.length; i++) {
        for (let j = i + 1; j < particles.length; j++) {
          const p1 = particles[i];
          const p2 = particles[j];
          const dx = p1.x - p2.x;
          const dy = p1.y - p2.y;
          const dist = Math.sqrt(dx * dx + dy * dy);
          
          if (dist < CONNECTION_DISTANCE) {
            const alpha = (1 - dist / CONNECTION_DISTANCE) * 0.35;
            ctx.strokeStyle = `rgba(0, 240, 255, ${alpha})`;
            ctx.beginPath();
            ctx.moveTo(p1.x, p1.y);
            ctx.lineTo(p2.x, p2.y);
            ctx.stroke();
          }
        }
      }
    }
    
    function animate() {
      if (paused) {
        requestAnimationFrame(animate);
        return;
      }
      
      ctx.fillStyle = 'rgba(0, 0, 0, 0.65)';
      ctx.fillRect(0, 0, width, height);
      
      drawConnections();
      
      for (let p of particles) {
        p.update();
        p.draw();
      }
      
      // Central core representing grok-4.3
      const centerX = width / 2;
      const centerY = height / 2;
      
      ctx.save();
      ctx.shadowColor = '#00f0ff';
      ctx.shadowBlur = 30;
      ctx.fillStyle = 'rgba(0, 240, 255, 0.9)';
      ctx.beginPath();
      ctx.arc(centerX, centerY, 5.5, 0, Math.PI * 2);
      ctx.fill();
      ctx.restore();
      
      requestAnimationFrame(animate);
    }
    
    // Event listeners
    function setupEvents() {
      window.addEventListener('resize', () => {
        resize();
      });
      
      // Mouse
      canvas.addEventListener('mousemove', (e) => {
        mouse.x = e.clientX;
        mouse.y = e.clientY;
        mouse.active = true;
      });
      
      canvas.addEventListener('mouseleave', () => {
        mouse.active = false;
      });
      
      // Touch
      canvas.addEventListener('touchmove', (e) => {
        e.preventDefault();
        mouse.x = e.touches[0].clientX;
        mouse.y = e.touches[0].clientY;
        mouse.active = true;
      }, { passive: false });
      
      canvas.addEventListener('touchend', () => {
        mouse.active = false;
      });
      
      // Keyboard
      document.addEventListener('keydown', (e) => {
        if (e.key === ' ' || e.key === 'Spacebar') {
          e.preventDefault();
          togglePause();
        }
        if (e.key.toLowerCase() === 'r') {
          resetParticles();
        }
      });
      
      // Buttons
      document.getElementById('pauseBtn').addEventListener('click', togglePause);
      document.getElementById('resetBtn').addEventListener('click', resetParticles);
      document.getElementById('motionBtn').addEventListener('click', toggleMotion);
    }
    
    function togglePause() {
      paused = !paused;
      const btn = document.getElementById('pauseBtn');
      btn.textContent = paused ? '재생' : '일시정지';
      
      if (!paused) {
        animate();
      }
    }
    
    function resetParticles() {
      createParticles();
    }
    
    function toggleMotion() {
      reducedMotion = !reducedMotion;
      const btn = document.getElementById('motionBtn');
      btn.style.borderColor = reducedMotion ? '#00f0ff' : 'rgba(255,255,255,0.2)';
    }
    
    // Initialize
    function init() {
      resize();
      createParticles();
      setupEvents();
      
      // Start animation
      animate();
      
      // Initial gentle mouse position hint
      setTimeout(() => {
        mouse.x = width * 0.5;
        mouse.y = height * 0.5;
      }, 800);
    }
    
    init();
  </script>
</body>
</html>
```

MANDATORY BROWSER REVIEW FIXES. Apply EVERY item below to the returned code; do not merely repeat your old code. The diagnostic list is the controlling repair request:
["docs/models/grok-4.3/artwork.html:8: The external Google Fonts @import violates the offline/self-contained brief and generates blocked-resource console errors in the sandbox. Required repair: Use self-contained or system fonts and remove external resource requests. Preserve your chosen expressive concept and medium.", "docs/models/grok-4.3/artwork.html:69: Meaningful labels, instructions or descriptions render below the rubric minimum of 14pt (about 19px). Required repair: Use at least 19px for informative text and controls while retaining the chosen composition. Preserve your chosen expressive concept and medium.", "docs/models/grok-4.3/artwork.html:163: The operating-system reduced-motion preference does not reduce the actual continuous artwork animation; the rule only affects CSS while this motion is script-driven. Required repair: Apply the reduced-motion preference to the actual animation with a meaningful reduction or still version, preserving your medium. Preserve your chosen expressive concept and medium.", "docs/models/grok-4.3/artwork.html:347: Resume calls animate() while the paused animation already schedules frames; two pending rendering chains were measured after one resume. Required repair: Maintain one animation chain across pause/resume. Preserve your chosen expressive concept and medium."]

Return the complete repaired HTML now.

{
  "price_in": 1.25,
  "price_out": 2.5
}