# Returns to intelligence

I'm going to tell you a story. For that story to make sense, I need to give you some background context.

I have some pretty smart friends. One of them is [Peter Schmidt-Nielsen](https://peter.website/). Peter has an illustrious line of descent. His paternal grandfather was [Knut Schmidt-Nielsen](https://en.wikipedia.org/wiki/Knut_Schmidt-Nielsen), regarded as one of the great animal physiologists of his time. His paternal grandmother was [Bodil Schmidt-Nielsen](https://en.wikipedia.org/wiki/Bodil_Schmidt-Nielsen), who became the first woman president of the American Physiological Society. Bodil's father was [August Krogh](https://en.wikipedia.org/wiki/August_Krogh), who won the 1920 Nobel Prize in Physiology "for the discovery of the mechanism of regulation of the capillaries in skeletal muscle", and later went on to found the company that would eventually [become](https://novonordiskfonden.dk/en/who-we-are/our-history/) Novo Nordisk.

Peter himself is no slouch. He was homeschooled for most of his childhood. When it was time to go to university, he simultaneously applied to MIT's undergrad and grad programs, and was accepted to both. (He decided to go to undergrad.) He went on to do some startup stuff, then was an early employee at [Redwood](https://arxiv.org/abs/2205.01663). While there, he [broke Meow Hash](https://peter.website/meow-hash-cryptanalysis) for fun. (He's not a security guy.)

My point here is: Peter is very, very smart.

Ok, here's the story.

One day I was in a room with Peter and [Drake Thomas](https://www.lesswrong.com/users/drake-thomas). Peter was telling us a story about a puzzle he'd grown up with, but never solved. Peter's father also went to MIT. While there, he decided to come up with a new "cube" puzzle, finding traditional cube puzzles like the [Soma Cube](https://en.wikipedia.org/wiki/Soma_cube) too easy. Knowing that people often struggled with chirality, he decided to start with the six chiral pentacube pairs, but that left four cube units to complete a four-sided cube. Thinking that four 1^3^ pieces would make it too easy, he decided to fill out the remainder with two 1x1x2 pieces (i.e. dominos).

![image.png](https://res.cloudinary.com/lesswrong-2-0/image/upload/v1776038655/lexical_client_uploads/dy6csspuorufgaaaddfq.png)

The six chiral pentacube pairs. Source: [https://sicherman.net/c5nomen/index.html](https://sicherman.net/c5nomen/index.html)

He then cut the puzzle out of wood and spent some time trying to solve it. Not having any success, he left it overnight in the grad student lounge, and came back to find it solved the next morning.

Drake, hearing this story, said something to the effect of, "I think I can probably solve this puzzle in my head."

Impossible, right? No way a human can do that in their head in any reasonable time frame?

If you want to play around with the puzzle yourself, here is a widget.

```widget[rH3SJpcMdkKfeQHyz]

<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Chiral Pentacube Puzzle</title>
<style>
  @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;600&family=DM+Sans:wght@400;500;600&display=swap');

  * { margin: 0; padding: 0; box-sizing: border-box; }
  body {
    background: #0c0c1a;
    color: #c8cdd5;
    font-family: 'DM Sans', sans-serif;
    overflow: hidden;
  }
  #app {
    width: 660px;
    max-width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    min-height: 800px;
  }

  /* Header */
  #header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    background: #111125;
    border-bottom: 1px solid #1e1e3a;
  }
  #header h1 {
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    font-weight: 600;
    color: #8891a5;
    letter-spacing: 0.5px;
  }
  #header h1 span { color: #5b9bf7; }
  #status {
    font-size: 11px;
    color: #555;
    font-family: 'JetBrains Mono', monospace;
  }
  #status.solved { color: #4ade80; }

  /* Main layout */
  #main {
    display: flex;
    flex: 1;
    min-height: 0;
  }

  /* Sidebar */
  #sidebar {
    width: 152px;
    background: #111125;
    border-right: 1px solid #1e1e3a;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    flex-shrink: 0;
  }
  #sidebar-header {
    font-size: 10px;
    color: #445;
    font-family: 'JetBrains Mono', monospace;
    padding: 8px 8px 4px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #1a1a34;
  }
  #sidebar-header button {
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px;
    padding: 2px 6px;
    border: 1px solid #2a2a50;
    background: transparent;
    color: #889;
    border-radius: 3px;
    cursor: pointer;
  }
  #sidebar-header button:hover { border-color: #e74c3c; color: #e74c3c; }

  .pair-row {
    display: flex;
    gap: 2px;
    padding: 3px 6px;
    border-bottom: 1px solid #1a1a34;
  }
  .piece-btn {
    flex: 1;
    border: 2px solid transparent;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4px 2px 2px;
    transition: all 0.15s;
    background: transparent;
  }
  .piece-btn:hover { border-color: #5b9bf7; background: rgba(91,155,247,0.06); }
  .piece-btn.selected { border-color: #fff; background: rgba(91,155,247,0.12); box-shadow: 0 0 8px rgba(91,155,247,0.2); }
  .piece-btn.placed { opacity: 0.25; cursor: default; }
  .piece-btn.placed:hover { border-color: transparent; background: transparent; }
  .piece-btn svg { display: block; }
  .piece-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 8px;
    color: #556;
    margin-top: 1px;
  }

  /* Viewport */
  #viewport-wrap {
    position: relative;
    flex: 1;
    min-height: 0;
    background: #0a0a18;
  }
  #viewport {
    display: block;
    width: 100%;
    height: 100%;
    cursor: grab;
  }
  #viewport:active { cursor: grabbing; }
  #viewport.placing { cursor: crosshair; }

  /* Overlay Controls */
  .overlay-panel {
    position: absolute;
    background: rgba(14, 14, 32, 0.88);
    border: 1px solid #1e1e3a;
    border-radius: 6px;
    padding: 6px 8px;
    backdrop-filter: blur(8px);
  }

  /* Slice Controls - top right */
  #slice-controls {
    top: 8px; right: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: flex-end;
  }
  #slice-controls .slice-row {
    display: flex;
    align-items: center;
    gap: 4px;
  }
  .slice-hint {
    font-family: 'JetBrains Mono', monospace;
    font-size: 8px;
    color: #3a3a5a;
    font-style: italic;
    text-align: right;
  }
  .axis-btn {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    padding: 3px 7px;
    border: 1px solid #2a2a50;
    background: transparent;
    color: #667;
    border-radius: 3px;
    cursor: pointer;
    transition: all 0.15s;
  }
  .axis-btn:hover { border-color: #5b9bf7; color: #5b9bf7; }
  .axis-btn.active { background: #5b9bf7; color: #fff; border-color: #5b9bf7; }
  #slice-slider {
    width: 60px;
    height: 4px;
    accent-color: #5b9bf7;
    cursor: pointer;
  }
  #slice-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    color: #5b9bf7;
    min-width: 18px;
    text-align: center;
  }

  /* Height control - top left */
  #height-controls {
    top: 8px; left: 8px;
    display: flex;
    flex-direction: column;
    gap: 3px;
  }
  #height-controls .height-row {
    display: flex;
    align-items: center;
    gap: 4px;
  }
  .h-btn {
    font-size: 12px;
    width: 22px; height: 22px;
    border: 1px solid #2a2a50;
    background: transparent;
    color: #889;
    border-radius: 3px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
  }
  .h-btn:hover { border-color: #5b9bf7; color: #5b9bf7; }
  #height-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    color: #5b9bf7;
    min-width: 14px;
    text-align: center;
  }

  /* Rotation controls - in sidebar */
  .overlay-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 8px;
    color: #445;
    letter-spacing: 1.5px;
    text-transform: uppercase;
  }
  #sidebar-controls {
    padding: 8px;
    border-top: 1px solid #1a1a34;
    margin-top: auto;
  }
  #sidebar-controls .rot-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 4px;
  }
  .rot-btn {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    padding: 5px 8px;
    border: 1px solid #2a2a50;
    background: transparent;
    color: #889;
    border-radius: 3px;
    cursor: pointer;
    transition: all 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
  }
  .rot-btn:hover { border-color: #5b9bf7; color: #5b9bf7; }
  .rot-btn.disabled { opacity: 0.25; cursor: default; pointer-events: none; }
  .rot-btn .key-hint {
    font-size: 8px;
    color: #556;
    border: 1px solid #222244;
    border-radius: 2px;
    padding: 0 3px;
    line-height: 1.4;
  }
  .rot-btn:hover .key-hint { color: #5b9bf7; border-color: #3a3a6a; }

  /* Win overlay */
  #win-overlay {
    position: absolute;
    inset: 0;
    background: rgba(10, 10, 24, 0.85);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 100;
    backdrop-filter: blur(4px);
  }
  #win-overlay.show { display: flex; }
  #win-message {
    text-align: center;
    font-family: 'JetBrains Mono', monospace;
  }
  #win-message h2 {
    font-size: 20px;
    color: #4ade80;
    margin-bottom: 8px;
  }
  #win-message p {
    font-size: 12px;
    color: #667;
  }

  /* ═══════════════════════════════════════ */
  /* MOBILE RESPONSIVE                      */
  /* ═══════════════════════════════════════ */
  @media (max-width: 660px) {
    #app {
      height: 100dvh;
      height: 100vh; /* fallback */
    }

    #main {
      flex-direction: column;
    }

    /* Sidebar becomes bottom panel */
    #sidebar {
      width: 100%;
      border-right: none;
      border-top: 1px solid #1e1e3a;
      overflow-y: auto;
      flex-shrink: 0;
      max-height: 45%;
    }

    #sidebar-header {
      padding: 6px 8px;
      position: sticky;
      top: 0;
      background: #111125;
      z-index: 2;
    }

    /* Pieces in a compact grid — 4 pairs per row */
    #piece-list {
      display: flex;
      flex-wrap: wrap;
    }
    .pair-row {
      width: 25%;
      padding: 2px 3px;
      border-bottom: none;
    }
    .piece-btn {
      padding: 2px 1px 1px;
    }
    .piece-btn svg {
      max-width: 100%;
      height: auto;
    }
    .piece-label {
      font-size: 7px;
    }

    /* Rotation controls horizontal on mobile */
    #sidebar-controls {
      position: sticky;
      bottom: 0;
      background: #111125;
      z-index: 2;
      border-top: 1px solid #1a1a34;
      margin-top: 0;
      padding: 6px 8px;
    }
    #sidebar-controls .rot-row {
      flex-direction: row;
    }
    .rot-btn {
      flex: 1;
      padding: 6px 4px;
      font-size: 11px;
    }

    /* Smaller overlay panels on mobile */
    .overlay-panel {
      padding: 4px 6px;
    }
    .overlay-label { font-size: 7px; }
    .axis-btn { font-size: 10px; padding: 2px 5px; }
    #slice-slider { width: 50px; }
    .slice-hint { display: none; }
  }

  /* Very small screens */
  @media (max-width: 400px) {
    #header h1 { font-size: 11px; }
    #status { font-size: 10px; }
    .pair-row { width: 50%; }
  }
</style>
</head>
<body>
<div id="app">
  <div id="header">
    <h1><span>4×4×4</span> PENTACUBE PUZZLE</h1>
    <div id="status">0 / 64 cells</div>
  </div>

  <div id="main">
    <div id="sidebar">
      <div id="sidebar-header">
        <span>PIECES</span>
        <button id="reset-btn">Reset</button>
      </div>
      <div id="piece-list"></div>
      <div id="sidebar-controls">
        <div class="overlay-label">ROTATE PIECE</div>
        <div class="rot-row">
          <button class="rot-btn disabled" data-axis="x" title="Rotate 90° around X axis">⟳X <span class="key-hint">W</span><span class="key-hint">S</span></button>
          <button class="rot-btn disabled" data-axis="y" title="Rotate 90° around Y axis">⟳Y <span class="key-hint">Q</span><span class="key-hint">E</span></button>
          <button class="rot-btn disabled" data-axis="z" title="Rotate 90° around Z axis">⟳Z <span class="key-hint">A</span><span class="key-hint">D</span></button>
        </div>
      </div>
    </div>

    <div id="viewport-wrap">
      <canvas id="viewport"></canvas>

      <div id="slice-controls" class="overlay-panel">
        <div class="overlay-label">SLICE — peek inside</div>
        <div class="slice-row">
          <button class="axis-btn active" data-axis="y">Y</button>
          <button class="axis-btn" data-axis="x">X</button>
          <button class="axis-btn" data-axis="z">Z</button>
          <input type="range" id="slice-slider" min="1" max="4" value="4" step="1">
          <span id="slice-label">4</span>
        </div>
        <div class="slice-hint">hide layers along chosen axis</div>
      </div>

      <div id="height-controls" class="overlay-panel">
        <div class="overlay-label">PLACE AT LAYER <span style="color:#3a3a5a; font-style:italic; letter-spacing:0">(↑↓)</span></div>
        <div class="height-row">
          <button class="h-btn" id="height-down">▾</button>
          <span id="height-label">0</span>
          <button class="h-btn" id="height-up">▴</button>
        </div>
      </div>

      <div id="win-overlay">
        <div id="win-message">
          <h2>✦ SOLVED ✦</h2>
          <p>You filled the 4×4×4 cube!</p>
        </div>
      </div>
    </div>
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script>
(function() {
  'use strict';

  // ═══════════════════════════════════════
  // PIECE DEFINITIONS
  // ═══════════════════════════════════════
  // 6 chiral pentacube pairs (L and R mirror) + 2 dominoes
  // Each piece: { name, cells: [[x,y,z],...], color }
  // R-variants are generated by reflecting z -> -z

  const BASE_PENTACUBES = [
    { name: 'S', cells: [[0,0,0],[1,0,0],[1,0,1],[1,1,1],[2,1,1]], color: '#e74c3c', mirrorColor: '#c0392b' },
    { name: 'Z', cells: [[0,0,0],[1,0,0],[1,1,0],[1,1,1],[2,1,1]], color: '#e67e22', mirrorColor: '#d35400' },
    { name: 'T', cells: [[0,0,0],[0,1,0],[1,1,0],[1,1,1],[1,2,1]], color: '#f1c40f', mirrorColor: '#d4a017' },
    { name: 'B', cells: [[0,0,0],[1,0,0],[2,0,0],[1,1,0],[0,0,1]], color: '#2ecc71', mirrorColor: '#1fa855' },
    { name: 'L', cells: [[0,0,0],[1,0,0],[1,1,0],[2,1,0],[2,1,1]], color: '#3498db', mirrorColor: '#2176ad' },
    { name: 'J', cells: [[0,0,0],[0,1,0],[0,2,0],[1,0,0],[1,0,1]], color: '#9b59b6', mirrorColor: '#7d3c98' },
  ];

  function mirrorCells(cells) {
    const mirrored = cells.map(([x,y,z]) => [x, y, -z]);
    const minZ = Math.min(...mirrored.map(c => c[2]));
    return mirrored.map(([x,y,z]) => [x, y, z - minZ]);
  }

  const PIECES = [];
  BASE_PENTACUBES.forEach((p, i) => {
    PIECES.push({ id: i * 2, name: p.name + 'ʟ', cells: p.cells.map(c => [...c]), color: p.color, size: 5 });
    PIECES.push({ id: i * 2 + 1, name: p.name + 'ʀ', cells: mirrorCells(p.cells), color: p.mirrorColor, size: 5 });
  });
  // Two dominoes
  PIECES.push({ id: 12, name: 'D1', cells: [[0,0,0],[1,0,0]], color: '#7f8c9a', size: 2 });
  PIECES.push({ id: 13, name: 'D2', cells: [[0,0,0],[1,0,0]], color: '#5c6878', size: 2 });

  // ═══════════════════════════════════════
  // STATE
  // ═══════════════════════════════════════
  const GRID = 4;
  const grid = [];
  for (let x = 0; x < GRID; x++) {
    grid[x] = [];
    for (let y = 0; y < GRID; y++) {
      grid[x][y] = [];
      for (let z = 0; z < GRID; z++) {
        grid[x][y][z] = -1; // -1 = empty, else piece id
      }
    }
  }

  let selectedPiece = -1;
  let currentCells = null;
  let placementY = 0;
  let sliceAxis = 'y';
  let sliceLevel = 4;
  let hoveredGridPos = null;
  let placedPieceData = {}; // pieceId -> { pos:[x,y,z], cells:[[dx,dy,dz],...] }
  let filledCells = 0;

  // Camera orbit state
  let camTheta = Math.PI * 0.25;
  let camPhi = Math.PI * 0.30;
  let camRadius = 16;
  let isDragging = false;
  let dragStart = { x: 0, y: 0 };
  let dragMoved = false;

  // ═══════════════════════════════════════
  // THREE.JS SETUP
  // ═══════════════════════════════════════
  const canvas = document.getElementById('viewport');
  const renderer = new THREE.WebGLRenderer({ canvas, antialias: true, alpha: true });
  renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
  renderer.setClearColor(0x0a0a18, 1);

  const scene = new THREE.Scene();
  const camera = new THREE.PerspectiveCamera(40, 1, 0.1, 100);

  // Lights
  const ambientLight = new THREE.AmbientLight(0x334466, 0.6);
  scene.add(ambientLight);
  const dirLight = new THREE.DirectionalLight(0xffffff, 0.8);
  dirLight.position.set(5, 10, 7);
  scene.add(dirLight);
  const fillLight = new THREE.DirectionalLight(0x5588cc, 0.3);
  fillLight.position.set(-5, 3, -5);
  scene.add(fillLight);

  // Raycaster
  const raycaster = new THREE.Raycaster();
  const mouseNDC = new THREE.Vector2();

  // Groups
  const gridGroup = new THREE.Group();
  scene.add(gridGroup);
  const piecesGroup = new THREE.Group();
  scene.add(piecesGroup);
  const ghostGroup = new THREE.Group();
  scene.add(ghostGroup);

  // ═══════════════════════════════════════
  // GRID VISUALS
  // ═══════════════════════════════════════
  function buildGrid() {
    // Outer wireframe
    const boxGeo = new THREE.BoxGeometry(GRID, GRID, GRID);
    const edgesGeo = new THREE.EdgesGeometry(boxGeo);
    const edgeMat = new THREE.LineBasicMaterial({ color: 0x2a3a55, linewidth: 1 });
    const wireframe = new THREE.LineSegments(edgesGeo, edgeMat);
    wireframe.position.set(GRID/2, GRID/2, GRID/2);
    gridGroup.add(wireframe);

    // Internal grid lines
    const lineMat = new THREE.LineBasicMaterial({ color: 0x1a2540, transparent: true, opacity: 0.5 });

    // Floor grid (y=0)
    for (let i = 0; i <= GRID; i++) {
      addLine([i, 0, 0], [i, 0, GRID], lineMat);
      addLine([0, 0, i], [GRID, 0, i], lineMat);
    }
    // Side grids for reference
    for (let i = 0; i <= GRID; i++) {
      addLine([0, i, 0], [0, i, GRID], lineMat);
      addLine([0, 0, i], [0, GRID, i], lineMat);
      addLine([0, i, 0], [GRID, i, 0], lineMat);
      addLine([i, 0, 0], [i, GRID, 0], lineMat);
    }

    // Cell dots at each grid intersection
    const dotGeo = new THREE.SphereGeometry(0.03, 6, 6);
    const dotMat = new THREE.MeshBasicMaterial({ color: 0x2a3a55 });
    for (let x = 0; x <= GRID; x++) {
      for (let y = 0; y <= GRID; y++) {
        for (let z = 0; z <= GRID; z++) {
          // Only corner points of the grid
          if ((x === 0 || x === GRID) || (y === 0 || y === GRID) || (z === 0 || z === GRID)) {
            if (((x === 0 || x === GRID) ? 1 : 0) + ((y === 0 || y === GRID) ? 1 : 0) + ((z === 0 || z === GRID) ? 1 : 0) >= 2) {
              const dot = new THREE.Mesh(dotGeo, dotMat);
              dot.position.set(x, y, z);
              gridGroup.add(dot);
            }
          }
        }
      }
    }

    // Translucent floor plane
    const floorGeo = new THREE.PlaneGeometry(GRID, GRID);
    const floorMat = new THREE.MeshBasicMaterial({ color: 0x111830, transparent: true, opacity: 0.3, side: THREE.DoubleSide });
    const floor = new THREE.Mesh(floorGeo, floorMat);
    floor.rotation.x = -Math.PI / 2;
    floor.position.set(GRID/2, 0, GRID/2);
    gridGroup.add(floor);
  }

  function addLine(from, to, mat) {
    const geo = new THREE.BufferGeometry().setFromPoints([
      new THREE.Vector3(...from),
      new THREE.Vector3(...to)
    ]);
    gridGroup.add(new THREE.LineSegments(geo, mat));
  }

  // ═══════════════════════════════════════
  // PIECE ROTATION
  // ═══════════════════════════════════════
  function rotX(cells) { return normalizeCells(cells.map(([x,y,z]) => [x, -z, y])); }
  function rotY(cells) { return normalizeCells(cells.map(([x,y,z]) => [z, y, -x])); }
  function rotZ(cells) { return normalizeCells(cells.map(([x,y,z]) => [-y, x, z])); }

  function normalizeCells(cells) {
    const minX = Math.min(...cells.map(c => c[0]));
    const minY = Math.min(...cells.map(c => c[1]));
    const minZ = Math.min(...cells.map(c => c[2]));
    return cells.map(([x,y,z]) => [x - minX, y - minY, z - minZ]);
  }

  // ═══════════════════════════════════════
  // PIECE MESH CREATION
  // ═══════════════════════════════════════
  const cubeGeo = new THREE.BoxGeometry(0.94, 0.94, 0.94);
  const edgeGeoTemplate = new THREE.EdgesGeometry(new THREE.BoxGeometry(0.96, 0.96, 0.96));

  const placedMeshes = []; // for raycasting against placed pieces

  function createPieceMesh(cells, colorHex, opacity, pieceId) {
    const group = new THREE.Group();
    const color = new THREE.Color(colorHex);
    const mat = new THREE.MeshPhongMaterial({
      color, transparent: opacity < 1, opacity,
      shininess: 40,
    });
    const edgeMat = new THREE.LineBasicMaterial({
      color: color.clone().multiplyScalar(1.4),
      transparent: opacity < 1, opacity: opacity * 0.7
    });

    cells.forEach(([cx, cy, cz]) => {
      const cube = new THREE.Mesh(cubeGeo, mat);
      cube.position.set(cx + 0.5, cy + 0.5, cz + 0.5);
      if (pieceId !== undefined) cube.userData.pieceId = pieceId;
      group.add(cube);

      const edges = new THREE.LineSegments(edgeGeoTemplate, edgeMat);
      edges.position.copy(cube.position);
      group.add(edges);
    });
    return group;
  }

  // ═══════════════════════════════════════
  // PLACEMENT LOGIC
  // ═══════════════════════════════════════
  function canPlace(cells, pos) {
    for (const [cx, cy, cz] of cells) {
      const gx = pos[0] + cx, gy = pos[1] + cy, gz = pos[2] + cz;
      if (gx < 0 || gx >= GRID || gy < 0 || gy >= GRID || gz < 0 || gz >= GRID) return false;
      if (grid[gx][gy][gz] !== -1) return false;
    }
    return true;
  }

  function placePiece(pieceIndex, pos) {
    const piece = PIECES[pieceIndex];
    const cells = currentCells || piece.cells;
    if (!canPlace(cells, pos)) return false;

    // Write to grid
    const worldCells = [];
    cells.forEach(([cx, cy, cz]) => {
      const gx = pos[0] + cx, gy = pos[1] + cy, gz = pos[2] + cz;
      grid[gx][gy][gz] = piece.id;
      worldCells.push([gx, gy, gz]);
    });

    placedPieceData[piece.id] = { pos: [...pos], cells: cells.map(c => [...c]), worldCells };
    filledCells += piece.size;

    // Create mesh
    const mesh = createPieceMesh(worldCells.map(([x,y,z]) => [x, y, z]), piece.color, 1, piece.id);
    mesh.userData.pieceId = piece.id;
    piecesGroup.add(mesh);

    // Track meshes for raycasting
    mesh.children.forEach(child => {
      if (child.isMesh) {
        child.userData.pieceId = piece.id;
        placedMeshes.push(child);
      }
    });

    selectedPiece = -1;
    currentCells = null;
    updateTray();
    updateGhost();
    updateStatus();
    updateSliceVisibility();
    checkWin();
    return true;
  }

  function removePiece(pieceId) {
    const data = placedPieceData[pieceId];
    if (!data) return;

    // Clear grid
    data.worldCells.forEach(([gx, gy, gz]) => {
      grid[gx][gy][gz] = -1;
    });

    const piece = PIECES.find(p => p.id === pieceId);
    filledCells -= piece.size;

    // Remove meshes
    const toRemove = [];
    piecesGroup.children.forEach(child => {
      if (child.userData.pieceId === pieceId) toRemove.push(child);
    });
    toRemove.forEach(m => {
      piecesGroup.remove(m);
      m.children.forEach(c => {
        if (c.geometry) c.geometry.dispose();
        if (c.material) c.material.dispose();
      });
    });

    // Remove from raycasting list
    for (let i = placedMeshes.length - 1; i >= 0; i--) {
      if (placedMeshes[i].userData.pieceId === pieceId) {
        placedMeshes.splice(i, 1);
      }
    }

    delete placedPieceData[pieceId];
    updateStatus();
  }

  // ═══════════════════════════════════════
  // GHOST PREVIEW
  // ═══════════════════════════════════════
  let ghostMesh = null;
  let ghostValid = false;

  function updateGhost() {
    // Clear old ghost
    if (ghostMesh) {
      ghostGroup.remove(ghostMesh);
      ghostMesh.children.forEach(c => {
        if (c.geometry) c.geometry.dispose();
        if (c.material) c.material.dispose();
      });
      ghostMesh = null;
    }

    if (selectedPiece < 0 || !hoveredGridPos || !currentCells) return;

    const piece = PIECES[selectedPiece];
    const pos = hoveredGridPos;
    const valid = canPlace(currentCells, pos);
    ghostValid = valid;

    const worldCells = currentCells.map(([cx, cy, cz]) => [pos[0] + cx, pos[1] + cy, pos[2] + cz]);
    const ghostColor = valid ? piece.color : '#ff2244';
    ghostMesh = createPieceMesh(worldCells, ghostColor, 1);
    ghostGroup.add(ghostMesh);
  }

  // ═══════════════════════════════════════
  // SLICE VISIBILITY
  // ═══════════════════════════════════════
  function updateSliceVisibility() {
    const axisIdx = { x: 0, y: 1, z: 2 }[sliceAxis];

    piecesGroup.traverse(obj => {
      if (obj.isMesh || obj.isLineSegments) {
        const pos = obj.position;
        const val = [pos.x - 0.5, pos.y - 0.5, pos.z - 0.5][axisIdx];
        obj.visible = val < sliceLevel;
      }
    });

    // Also slice the ghost
    ghostGroup.traverse(obj => {
      if (obj.isMesh || obj.isLineSegments) {
        const pos = obj.position;
        const val = [pos.x - 0.5, pos.y - 0.5, pos.z - 0.5][axisIdx];
        obj.visible = val < sliceLevel;
      }
    });
  }

  // ═══════════════════════════════════════
  // CAMERA
  // ═══════════════════════════════════════
  const CAM_TARGET = new THREE.Vector3(GRID/2, GRID/2, GRID/2);

  function updateCamera() {
    camera.position.set(
      camRadius * Math.sin(camPhi) * Math.cos(camTheta) + CAM_TARGET.x,
      camRadius * Math.cos(camPhi) + CAM_TARGET.y,
      camRadius * Math.sin(camPhi) * Math.sin(camTheta) + CAM_TARGET.z
    );
    camera.lookAt(CAM_TARGET);
  }

  // ═══════════════════════════════════════
  // RAYCASTING
  // ═══════════════════════════════════════
  function getGridPosFromMouse(e) {
    const rect = canvas.getBoundingClientRect();
    mouseNDC.x = ((e.clientX - rect.left) / rect.width) * 2 - 1;
    mouseNDC.y = -((e.clientY - rect.top) / rect.height) * 2 + 1;
    raycaster.setFromCamera(mouseNDC, camera);

    // Intersect with horizontal plane at y = placementY
    const plane = new THREE.Plane(new THREE.Vector3(0, 1, 0), -placementY);
    const intersection = new THREE.Vector3();
    const hit = raycaster.ray.intersectPlane(plane, intersection);
    if (!hit) return null;

    const gx = Math.floor(intersection.x);
    const gz = Math.floor(intersection.z);
    if (gx < -1 || gx > GRID || gz < -1 || gz > GRID) return null;

    return [gx, placementY, gz];
  }

  function getPlacedPieceFromMouse(e) {
    const rect = canvas.getBoundingClientRect();
    mouseNDC.x = ((e.clientX - rect.left) / rect.width) * 2 - 1;
    mouseNDC.y = -((e.clientY - rect.top) / rect.height) * 2 + 1;
    raycaster.setFromCamera(mouseNDC, camera);

    const intersects = raycaster.intersectObjects(placedMeshes);
    if (intersects.length > 0) {
      return intersects[0].object.userData.pieceId;
    }
    return -1;
  }

  // ═══════════════════════════════════════
  // ISOMETRIC SVG GENERATOR
  // ═══════════════════════════════════════
  function adjustColor(hex, amount) {
    const r = parseInt(hex.slice(1,3), 16);
    const g = parseInt(hex.slice(3,5), 16);
    const b = parseInt(hex.slice(5,7), 16);
    const nr = Math.max(0, Math.min(255, Math.round(r + amount)));
    const ng = Math.max(0, Math.min(255, Math.round(g + amount)));
    const nb = Math.max(0, Math.min(255, Math.round(b + amount)));
    return '#' + [nr,ng,nb].map(c => c.toString(16).padStart(2,'0')).join('');
  }

  // Generate all 24 unique orientations of a piece
  function getAllOrientations(cells) {
    const seen = new Set();
    const results = [];
    for (let rx = 0; rx < 4; rx++) {
      for (let ry = 0; ry < 4; ry++) {
        for (let rz = 0; rz < 4; rz++) {
          let c = cells.map(cell => [...cell]);
          for (let i = 0; i < rx; i++) c = c.map(([x,y,z]) => [x, -z, y]);
          for (let i = 0; i < ry; i++) c = c.map(([x,y,z]) => [z, y, -x]);
          for (let i = 0; i < rz; i++) c = c.map(([x,y,z]) => [-y, x, z]);
          c = normalizeCells(c);
          const key = c.map(cell => cell.join(',')).sort().join(';');
          if (!seen.has(key)) {
            seen.add(key);
            results.push(c);
          }
        }
      }
    }
    return results;
  }

  // Find the orientation that displays best in isometric
  function findBestDisplayOrientation(cells) {
    const orientations = getAllOrientations(cells);
    let bestScore = -Infinity;
    let bestCells = cells;

    orientations.forEach(oriented => {
      // Build a set of occupied positions for adjacency checks
      const occupied = new Set(oriented.map(([x,y,z]) => `${x},${y},${z}`));

      // Count visible faces (faces not hidden by adjacent cubes)
      let visibleFaces = 0;
      oriented.forEach(([cx, cy, cz]) => {
        if (!occupied.has(`${cx},${cy+1},${cz}`)) visibleFaces++; // top
        if (!occupied.has(`${cx+1},${cy},${cz}`)) visibleFaces++; // right
        if (!occupied.has(`${cx},${cy},${cz+1}`)) visibleFaces++; // left
      });

      // Count unique screen positions (cubes that don't overlap in projection)
      const screenPos = new Set();
      oriented.forEach(([cx, cy, cz]) => {
        screenPos.add(`${cx - cz},${cx + cz - 2 * cy}`);
      });

      // Prefer orientations that are spread horizontally
      const xs = oriented.map(c => c[0]);
      const ys = oriented.map(c => c[1]);
      const zs = oriented.map(c => c[2]);
      const hSpread = (Math.max(...xs) - Math.min(...xs) + 1) + (Math.max(...zs) - Math.min(...zs) + 1);
      const yExtent = Math.max(...ys) - Math.min(...ys) + 1;

      // Score: unique screen positions (most important), then visible faces, then horizontal spread
      const score = screenPos.size * 10000 + visibleFaces * 100 + hSpread * 10 - yExtent;

      if (score > bestScore) {
        bestScore = score;
        bestCells = oriented;
      }
    });

    return bestCells;
  }

  function generatePieceSVG(cells, color, size, uniformW, uniformH) {
    const s = 9;
    const a = s * Math.cos(Math.PI / 6);
    const b = s * Math.sin(Math.PI / 6);
    const h = s;

    function proj(px, py, pz) {
      return [(px - pz) * a, (px + pz) * b - py * h];
    }

    const topColor = adjustColor(color, 55);
    const rightColor = adjustColor(color, -5);
    const leftColor = adjustColor(color, -50);
    const stroke = '#0c0c1a';

    // Build occupancy set for face culling
    const occupied = new Set(cells.map(([x,y,z]) => `${x},${y},${z}`));

    // Sort back to front for painter's algorithm
    const sorted = [...cells].sort((c1, c2) => (c1[0]+c1[1]+c1[2]) - (c2[0]+c2[1]+c2[2]));

    let polys = '';
    sorted.forEach(([cx, cy, cz]) => {
      if (!occupied.has(`${cx},${cy},${cz+1}`)) {
        const l = [proj(cx,cy+1,cz+1), proj(cx+1,cy+1,cz+1), proj(cx+1,cy,cz+1), proj(cx,cy,cz+1)];
        polys += `<polygon points="${l.map(p=>p.join(',')).join(' ')}" fill="${leftColor}" stroke="${stroke}" stroke-width="0.8"/>`;
      }
      if (!occupied.has(`${cx+1},${cy},${cz}`)) {
        const r = [proj(cx+1,cy+1,cz), proj(cx+1,cy,cz), proj(cx+1,cy,cz+1), proj(cx+1,cy+1,cz+1)];
        polys += `<polygon points="${r.map(p=>p.join(',')).join(' ')}" fill="${rightColor}" stroke="${stroke}" stroke-width="0.8"/>`;
      }
      if (!occupied.has(`${cx},${cy+1},${cz}`)) {
        const t = [proj(cx,cy+1,cz), proj(cx+1,cy+1,cz), proj(cx+1,cy+1,cz+1), proj(cx,cy+1,cz+1)];
        polys += `<polygon points="${t.map(p=>p.join(',')).join(' ')}" fill="${topColor}" stroke="${stroke}" stroke-width="0.8"/>`;
      }
    });

    // Internal edges
    sorted.forEach(([cx, cy, cz]) => {
      if (occupied.has(`${cx+1},${cy},${cz}`) && !occupied.has(`${cx},${cy+1},${cz}`) && !occupied.has(`${cx+1},${cy+1},${cz}`)) {
        const p1 = proj(cx+1, cy+1, cz);
        const p2 = proj(cx+1, cy+1, cz+1);
        polys += `<line x1="${p1[0]}" y1="${p1[1]}" x2="${p2[0]}" y2="${p2[1]}" stroke="${stroke}" stroke-width="0.5" stroke-opacity="0.5"/>`;
      }
      if (occupied.has(`${cx},${cy},${cz+1}`) && !occupied.has(`${cx},${cy+1},${cz}`) && !occupied.has(`${cx},${cy+1},${cz+1}`)) {
        const p1 = proj(cx, cy+1, cz+1);
        const p2 = proj(cx+1, cy+1, cz+1);
        polys += `<line x1="${p1[0]}" y1="${p1[1]}" x2="${p2[0]}" y2="${p2[1]}" stroke="${stroke}" stroke-width="0.5" stroke-opacity="0.5"/>`;
      }
      if (occupied.has(`${cx},${cy+1},${cz}`) && !occupied.has(`${cx+1},${cy},${cz}`) && !occupied.has(`${cx+1},${cy+1},${cz}`)) {
        const p1 = proj(cx+1, cy+1, cz);
        const p2 = proj(cx+1, cy+1, cz+1);
        polys += `<line x1="${p1[0]}" y1="${p1[1]}" x2="${p2[0]}" y2="${p2[1]}" stroke="${stroke}" stroke-width="0.5" stroke-opacity="0.5"/>`;
      }
      if (occupied.has(`${cx},${cy+1},${cz}`) && !occupied.has(`${cx},${cy},${cz+1}`) && !occupied.has(`${cx},${cy+1},${cz+1}`)) {
        const p1 = proj(cx, cy+1, cz+1);
        const p2 = proj(cx+1, cy+1, cz+1);
        polys += `<line x1="${p1[0]}" y1="${p1[1]}" x2="${p2[0]}" y2="${p2[1]}" stroke="${stroke}" stroke-width="0.5" stroke-opacity="0.5"/>`;
      }
    });

    // Compute piece bounding box
    let allPts = [];
    cells.forEach(([cx,cy,cz]) => {
      for (let dx = 0; dx <= 1; dx++)
        for (let dy = 0; dy <= 1; dy++)
          for (let dz = 0; dz <= 1; dz++)
            allPts.push(proj(cx+dx, cy+dy, cz+dz));
    });
    const allXs = allPts.map(p => p[0]);
    const allYs = allPts.map(p => p[1]);
    const pieceMinX = Math.min(...allXs);
    const pieceMinY = Math.min(...allYs);
    const pieceMaxX = Math.max(...allXs);
    const pieceMaxY = Math.max(...allYs);
    const pieceW = pieceMaxX - pieceMinX;
    const pieceH = pieceMaxY - pieceMinY;

    // Use uniform viewBox if provided, centering the piece within it
    const vbW = uniformW || (pieceW + 4);
    const vbH = uniformH || (pieceH + 4);
    const cx = (pieceMinX + pieceMaxX) / 2;
    const cy = (pieceMinY + pieceMaxY) / 2;
    const vbX = cx - vbW / 2;
    const vbY = cy - vbH / 2;

    return {
      svg: `<svg viewBox="${vbX} ${vbY} ${vbW} ${vbH}" width="${size}" height="${size * vbH / vbW}" xmlns="http://www.w3.org/2000/svg">${polys}</svg>`,
      w: pieceW,
      h: pieceH
    };
  }

  // ═══════════════════════════════════════
  // UI - SIDEBAR
  // ═══════════════════════════════════════
  const pieceListEl = document.getElementById('piece-list');

  // Precompute display orientations for each piece — optimized independently
  const displayCells = [];
  for (let i = 0; i < PIECES.length; i++) {
    displayCells[i] = findBestDisplayOrientation(PIECES[i].cells);
  }

  // Compute uniform viewBox: find max bounding box across all pieces
  let maxPieceW = 0, maxPieceH = 0;
  displayCells.forEach((cells, i) => {
    const { w, h } = generatePieceSVG(cells, PIECES[i].color, 58);
    maxPieceW = Math.max(maxPieceW, w);
    maxPieceH = Math.max(maxPieceH, h);
  });
  const uniformW = maxPieceW + 4;
  const uniformH = maxPieceH + 4;

  function buildSidebar() {
    pieceListEl.innerHTML = '';
    for (let row = 0; row < 7; row++) {
      const rowDiv = document.createElement('div');
      rowDiv.className = 'pair-row';

      const i1 = row * 2;
      const i2 = row * 2 + 1;
      [i1, i2].forEach(i => {
        const piece = PIECES[i];
        const btn = document.createElement('div');
        btn.className = 'piece-btn';
        btn.dataset.index = i;

        const { svg } = generatePieceSVG(displayCells[i], piece.color, 58, uniformW, uniformH);
        btn.innerHTML = svg;

        const label = document.createElement('div');
        label.className = 'piece-label';
        label.textContent = piece.name;
        btn.appendChild(label);

        btn.addEventListener('click', () => {
          if (placedPieceData[piece.id]) return;
          selectPiece(i);
        });
        rowDiv.appendChild(btn);
      });

      pieceListEl.appendChild(rowDiv);
    }
  }

  function updateTray() {
    const btns = pieceListEl.querySelectorAll('.piece-btn');
    btns.forEach((btn, i) => {
      const piece = PIECES[i];
      btn.classList.toggle('selected', i === selectedPiece);
      btn.classList.toggle('placed', !!placedPieceData[piece.id]);
    });
    canvas.classList.toggle('placing', selectedPiece >= 0);
    // Toggle rotation buttons
    document.querySelectorAll('.rot-btn').forEach(btn => {
      btn.classList.toggle('disabled', selectedPiece < 0);
    });
  }

  function selectPiece(index) {
    if (index === selectedPiece) {
      // Deselect
      selectedPiece = -1;
      currentCells = null;
    } else {
      selectedPiece = index;
      currentCells = PIECES[index].cells.map(c => [...c]);
    }
    updateTray();
    updateGhost();
  }

  function deselectPiece() {
    selectedPiece = -1;
    currentCells = null;
    hoveredGridPos = null;
    updateTray();
    updateGhost();
  }

  // ═══════════════════════════════════════
  // UI - STATUS
  // ═══════════════════════════════════════
  function updateStatus() {
    const el = document.getElementById('status');
    el.textContent = `${filledCells} / 64 cells`;
    el.classList.toggle('solved', filledCells === 64);
  }

  function checkWin() {
    if (filledCells === 64) {
      document.getElementById('win-overlay').classList.add('show');
    }
  }

  // ═══════════════════════════════════════
  // EVENT HANDLERS
  // ═══════════════════════════════════════
  canvas.addEventListener('mousedown', e => {
    isDragging = true;
    dragMoved = false;
    dragStart = { x: e.clientX, y: e.clientY };
  });

  canvas.addEventListener('mousemove', e => {
    if (isDragging) {
      const dx = e.clientX - dragStart.x;
      const dy = e.clientY - dragStart.y;
      if (Math.abs(dx) > 3 || Math.abs(dy) > 3) dragMoved = true;
      if (dragMoved) {
        camTheta -= dx * 0.008;
        camPhi = Math.max(0.15, Math.min(Math.PI - 0.15, camPhi - dy * 0.008));
        dragStart = { x: e.clientX, y: e.clientY };
        updateCamera();
      }
    }

    // Update ghost preview (only when not orbiting)
    if (selectedPiece >= 0 && !dragMoved) {
      hoveredGridPos = getGridPosFromMouse(e);
      updateGhost();
      updateSliceVisibility();
    }
  });

  canvas.addEventListener('mouseup', e => {
    if (!dragMoved) {
      // This is a click
      if (selectedPiece >= 0 && hoveredGridPos && ghostValid) {
        // Place piece
        placePiece(selectedPiece, hoveredGridPos);
      } else if (selectedPiece < 0) {
        // Try to pick up a placed piece
        const pieceId = getPlacedPieceFromMouse(e);
        if (pieceId >= 0) {
          const data = placedPieceData[pieceId];
          const pieceIndex = PIECES.findIndex(p => p.id === pieceId);
          removePiece(pieceId);
          selectedPiece = pieceIndex;
          currentCells = data.cells.map(c => [...c]);
          hoveredGridPos = getGridPosFromMouse(e);
          updateTray();
          updateGhost();
          updateSliceVisibility();
        }
      }
    }
    isDragging = false;
    dragMoved = false;
  });

  canvas.addEventListener('wheel', e => {
    e.preventDefault();
    camRadius = Math.max(5, Math.min(22, camRadius + e.deltaY * 0.01));
    updateCamera();
  }, { passive: false });

  // Clear ghost when mouse leaves
  canvas.addEventListener('mouseleave', () => {
    hoveredGridPos = null;
    updateGhost();
  });

  // Right-click to deselect
  canvas.addEventListener('contextmenu', e => {
    e.preventDefault();
    if (selectedPiece >= 0) deselectPiece();
  });

  // Keyboard
  document.addEventListener('keydown', e => {
    const key = e.key.toLowerCase();
    if (selectedPiece >= 0 && currentCells) {
      if (key === 'q' || key === 'e') {
        currentCells = key === 'q' ? rotY(currentCells) : rotY(rotY(rotY(currentCells)));
        updateGhost(); updateSliceVisibility();
      }
      if (key === 'w' || key === 's') {
        currentCells = key === 'w' ? rotX(currentCells) : rotX(rotX(rotX(currentCells)));
        updateGhost(); updateSliceVisibility();
      }
      if (key === 'a' || key === 'd') {
        currentCells = key === 'a' ? rotZ(currentCells) : rotZ(rotZ(rotZ(currentCells)));
        updateGhost(); updateSliceVisibility();
      }
    }
    if (key === 'r') deselectPiece();
    if (key === 'arrowleft' || key === 'arrowright') {
      e.preventDefault();
      camTheta += (key === 'arrowleft' ? 1 : -1) * 0.15;
      updateCamera();
    }
    if (key === 'arrowup') {
      e.preventDefault();
      placementY = Math.min(GRID - 1, placementY + 1);
      document.getElementById('height-label').textContent = placementY;
      if (hoveredGridPos) hoveredGridPos[1] = placementY;
      updateGhost(); updateSliceVisibility();
    }
    if (key === 'arrowdown') {
      e.preventDefault();
      placementY = Math.max(0, placementY - 1);
      document.getElementById('height-label').textContent = placementY;
      if (hoveredGridPos) hoveredGridPos[1] = placementY;
      updateGhost(); updateSliceVisibility();
    }
  });

  // UI button handlers
  document.querySelectorAll('.rot-btn').forEach(btn => {
    btn.addEventListener('click', e => {
      e.stopPropagation();
      if (selectedPiece < 0 || !currentCells) return;
      const axis = btn.dataset.axis;
      if (axis === 'x') currentCells = rotX(currentCells);
      if (axis === 'y') currentCells = rotY(currentCells);
      if (axis === 'z') currentCells = rotZ(currentCells);
      updateGhost(); updateSliceVisibility();
    });
  });

  document.querySelectorAll('.axis-btn').forEach(btn => {
    btn.addEventListener('click', () => {
      document.querySelectorAll('.axis-btn').forEach(b => b.classList.remove('active'));
      btn.classList.add('active');
      sliceAxis = btn.dataset.axis;
      updateSliceVisibility();
    });
  });

  const sliceSlider = document.getElementById('slice-slider');
  const sliceLabel = document.getElementById('slice-label');
  sliceSlider.addEventListener('input', () => {
    sliceLevel = parseInt(sliceSlider.value);
    sliceLabel.textContent = sliceLevel >= 4 ? '4' : sliceLevel;
    updateSliceVisibility();
  });

  document.getElementById('height-up').addEventListener('click', () => {
    placementY = Math.min(GRID - 1, placementY + 1);
    document.getElementById('height-label').textContent = placementY;
    if (hoveredGridPos) hoveredGridPos[1] = placementY;
    updateGhost(); updateSliceVisibility();
  });
  document.getElementById('height-down').addEventListener('click', () => {
    placementY = Math.max(0, placementY - 1);
    document.getElementById('height-label').textContent = placementY;
    if (hoveredGridPos) hoveredGridPos[1] = placementY;
    updateGhost(); updateSliceVisibility();
  });

  document.getElementById('reset-btn').addEventListener('click', () => {
    // Remove all placed pieces
    Object.keys(placedPieceData).forEach(id => removePiece(parseInt(id)));
    deselectPiece();
    document.getElementById('win-overlay').classList.remove('show');
  });

  // ═══════════════════════════════════════
  // RESIZE
  // ═══════════════════════════════════════
  function resize() {
    const wrap = document.getElementById('viewport-wrap');
    const w = wrap.clientWidth;
    const h = wrap.clientHeight;
    renderer.setSize(w, h);
    camera.aspect = w / h;
    camera.updateProjectionMatrix();
  }

  window.addEventListener('resize', resize);

  // ═══════════════════════════════════════
  // ANIMATION LOOP
  // ═══════════════════════════════════════
  function animate() {
    requestAnimationFrame(animate);
    renderer.render(scene, camera);
  }

  // ═══════════════════════════════════════
  // INIT
  // ═══════════════════════════════════════
  buildGrid();
  buildSidebar();
  updateCamera();
  resize();
  animate();

})();
</script>
</body>
</html>
```

After that, I watched Drake lie down on a couch and stare into space for two hours. Then he went to sleep. He came back downstairs the next morning and stared into space for another hour. Then he took a piece of paper and pen and wrote this down (in a spoiler block, in case you want to avoid any hints):

![image.png](https://res.cloudinary.com/lesswrong-2-0/image/upload/v1776033031/lexical_client_uploads/li1n07o3vl3ij7zvq4ch.png)

We didn't have a copy of the puzzle handy to make extra-sure, so they 3d printed one out and confirmed that the solution was correct.

Here are a couple of the original puzzles from the 70s:

![image.png](https://res.cloudinary.com/lesswrong-2-0/image/upload/v1776048302/lexical_client_uploads/nnfs7ia1kxrhzkpewi8c.png)

* * *

The distribution of what unassisted human brains can accomplish is extremely wide. Human brains are squishy meat sacks. Better things are possible. Alas.