Play my little Game
Everything that is, mirrors everything else.
Your intuition already knows — this is just a small game to see it clearly.
But first… let’s do a short Awareness exercise with me
Walk slowly around your house.
Feel the space you are in and the function it has in the whole of your home.
Then close your eyes.
Feel which organ or system in your body has a similar function.
Just feel it.
No answer is needed.
When you’re ready…
Click a room, guess the organ, check your score.
Openly Shared based on CENStm — prompt, preview & code:
Want to know the first prompt I used?
“Top-down architectural floor plan of a single-story house, labeled rooms, each room annotated with a corresponding human organ name in parentheses, clean line-art style, medical-anatomy cross-reference diagram”
How about a sneak preview?
Or look at the code if you think it’s ‘unsafe’
'<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>House = Body Quiz</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600&family=Nunito+Sans:ital,opsz,wght@0,6..12,400;0,6..12,600;1,6..12,400&display=swap" rel="stylesheet">
<style>
:root {
--bg: #f3ece1;
--bg-deep: #e8dcc8;
--surface: #faf6ef;
--surface-2: #efe6d6;
--fg: #3d3226;
--muted: #7a6a58;
--subtle: #a0907c;
--border: #d4c4ae;
--primary: #6d7f5c;
--primary-fg: #faf6ef;
--accent: #a67c52;
--plan: #9a8468;
--room: #f7f1e6;
--correct: #7a8f6a;
--correct-bg: #d8e2cc;
--correct-fg: #3d4a35;
--wrong: #b07a5c;
--wrong-bg: #ead8cc;
--wrong-fg: #5c3d32;
--organ-brain: #b8a090;
--organ-kidneys: #a67c5d;
--organ-heart: #c48a7a;
--organ-stomach: #c4a66b;
--organ-urinary: #cfc4a4;
--organ-pancreas: #c4a35a;
--organ-gallbladder: #8a9a62;
--organ-temporal: #9a8078;
--organ-liver: #8b6b4a;
--organ-mouth: #c9a090;
--organ-spleen: #8a7380;
--font-display: "Fraunces", "Times New Roman", serif;
--font-body: "Nunito Sans", "Segoe UI", system-ui, sans-serif;
--radius-md: 12px;
--radius-lg: 16px;
--radius-xl: 24px;
--ease: cubic-bezier(0.22, 1, 0.36, 1);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: var(--font-body);
background: var(--bg);
background-image:
radial-gradient(ellipse at 20% 0%, color-mix(in oklab, var(--bg-deep) 55%, transparent), transparent 52%),
radial-gradient(ellipse at 90% 100%, color-mix(in oklab, var(--correct-bg) 40%, transparent), transparent 48%);
color: var(--fg);
display: flex;
flex-direction: column;
align-items: center;
min-height: 100vh;
padding: 24px 16px 40px;
-webkit-font-smoothing: antialiased;
}
h1 {
font-family: var(--font-display);
font-size: 1.7rem;
font-weight: 600;
letter-spacing: -0.02em;
color: var(--fg);
}
.title-row {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 6px;
color: var(--primary);
}
.subtitle { font-size: 0.9rem; color: var(--muted); margin-bottom: 12px; }
.quote {
font-size: 0.8rem;
color: var(--accent);
font-style: italic;
text-align: center;
max-width: 420px;
line-height: 1.5;
margin-bottom: 16px;
}
.score-bar {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 16px;
font-size: 0.9rem;
font-variant-numeric: tabular-nums;
}
.score-bar span {
background: var(--surface);
padding: 8px 14px;
border-radius: 8px;
box-shadow: 0 0 0 1px color-mix(in oklab, var(--fg) 8%, transparent);
display: inline-flex;
align-items: center;
gap: 6px;
}
.score-bar .correct { color: var(--correct-fg); }
.score-bar .wrong { color: var(--wrong-fg); }
.score-dot {
width: 10px;
height: 10px;
border-radius: 50%;
display: inline-block;
}
.score-dot.ok { background: var(--correct); }
.score-dot.no { background: var(--wrong); }
.score-dot.mark { background: var(--accent); }
.floorplan {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: auto auto auto auto auto;
gap: 6px;
width: 100%;
max-width: 600px;
background: var(--plan);
padding: 12px;
border-radius: var(--radius-xl);
box-shadow:
0 0 0 1px color-mix(in oklab, var(--fg) 10%, transparent),
0 10px 28px -12px color-mix(in oklab, var(--fg) 28%, transparent);
}
.room {
position: relative;
perspective: 640px;
min-height: 92px;
cursor: pointer;
border: none;
background: transparent;
padding: 0;
font: inherit;
color: inherit;
width: 100%;
}
.room-inner {
position: relative;
width: 100%;
height: 100%;
min-height: 92px;
transition: transform 500ms var(--ease);
transform-style: preserve-3d;
}
.room.flipped .room-inner { transform: rotateY(180deg); }
.room-front, .room-back {
position: absolute;
inset: 0;
backface-visibility: hidden;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
border-radius: var(--radius-md);
padding: 8px;
text-align: center;
gap: 4px;
}
.room-front {
background: var(--room);
color: var(--fg);
font-weight: 600;
font-size: 0.78rem;
line-height: 1.25;
box-shadow: 0 1px 2px color-mix(in oklab, var(--fg) 12%, transparent);
}
.room:hover:not(.flipped) .room-front { background: var(--surface); }
.room-front .icon {
width: 20px;
height: 20px;
color: var(--accent);
}
.room-back {
background: var(--surface-2);
color: var(--fg);
transform: rotateY(180deg);
font-weight: 600;
font-size: 0.8rem;
line-height: 1.25;
}
.room.done .room-back { background: var(--correct-bg); color: var(--correct-fg); }
.room.wrong .room-back { background: var(--wrong-bg); color: var(--wrong-fg); }
.attic, .garage { min-height: 64px; }
.attic .room-inner, .garage .room-inner { min-height: 64px; }
.color-ball {
width: 1.35rem;
height: 1.35rem;
border-radius: 999px;
flex-shrink: 0;
background:
radial-gradient(circle at 32% 28%, rgba(255, 248, 238, 0.62), transparent 46%),
var(--ball);
box-shadow:
inset 0 -2px 3px color-mix(in oklab, var(--fg) 22%, transparent),
0 1px 2px color-mix(in oklab, var(--fg) 14%, transparent);
}
.modal-overlay {
display: none;
position: fixed;
inset: 0;
background: color-mix(in oklab, var(--fg) 42%, transparent);
z-index: 100;
align-items: center;
justify-content: center;
padding: 16px;
}
.modal-overlay.active { display: flex; }
.modal {
background: var(--surface);
border-radius: var(--radius-xl);
padding: 28px;
max-width: 400px;
width: 100%;
text-align: center;
box-shadow:
0 0 0 1px color-mix(in oklab, var(--fg) 8%, transparent),
0 18px 40px -18px color-mix(in oklab, var(--fg) 35%, transparent);
}
.modal h2 {
font-family: var(--font-display);
font-size: 1.15rem;
font-weight: 600;
margin-bottom: 6px;
color: var(--fg);
}
.modal p { font-size: 0.9rem; color: var(--muted); margin-bottom: 16px; }
.choices { display: grid; gap: 8px; }
.choice-btn {
background: var(--surface-2);
border: none;
color: var(--fg);
padding: 12px;
border-radius: 10px;
font-size: 0.9rem;
font-family: inherit;
font-weight: 500;
cursor: pointer;
display: flex;
align-items: center;
gap: 10px;
text-align: left;
box-shadow: 0 0 0 1px color-mix(in oklab, var(--fg) 8%, transparent);
transition: background-color 150ms var(--ease), box-shadow 150ms var(--ease);
}
.choice-btn:hover { background: var(--bg-deep); }
.choice-btn.selected-correct {
background: var(--correct-bg);
color: var(--correct-fg);
box-shadow: 0 0 0 1px var(--correct);
}
.choice-btn.selected-wrong {
background: var(--wrong-bg);
color: var(--wrong-fg);
box-shadow: 0 0 0 1px var(--wrong);
}
.choice-btn:disabled { cursor: default; opacity: 0.7; }
.choice-btn:disabled.selected-correct,
.choice-btn:disabled.selected-wrong { opacity: 1; }
.result-msg { margin-top: 12px; font-size: 0.95rem; font-weight: 700; min-height: 24px; }
.result-msg.correct { color: var(--correct); }
.result-msg.wrong { color: var(--wrong); }
.close-btn, .restart-btn {
margin-top: 16px;
background: var(--primary);
color: var(--primary-fg);
border: none;
padding: 12px 24px;
border-radius: 8px;
font-size: 0.9rem;
font-weight: 700;
font-family: inherit;
cursor: pointer;
}
.close-btn:hover, .restart-btn:hover { filter: brightness(0.96); }
.final-screen {
display: none;
text-align: center;
margin-top: 24px;
background: var(--surface);
padding: 28px;
border-radius: 24px;
max-width: 400px;
width: 100%;
box-shadow: 0 0 0 1px color-mix(in oklab, var(--fg) 8%, transparent);
}
.final-screen.active { display: block; }
.final-screen h2 {
font-family: var(--font-display);
color: var(--accent);
margin-bottom: 8px;
font-weight: 600;
}
.final-screen p { color: var(--muted); }
@media (prefers-reduced-motion: reduce) {
.room-inner { transition: none; }
}
</style>
</head>
<body>
<div class="title-row">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8"/><path d="M3 10a2 2 0 0 1 .709-1.528l7-5.999a2 2 0 0 1 2.582 0l7 5.999A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/></svg>
<h1>House = Body</h1>
</div>
<p class="subtitle">Click a room, guess the organ, check your score</p>
<p class="quote">Everything that is, mirrors everything else. Your intuition already knows — this is just a small game to see it clearly.</p>
<div class="score-bar">
<span><i class="score-dot ok"></i> <span class="correct" id="score-correct">0</span></span>
<span><i class="score-dot no"></i> <span class="wrong" id="score-wrong">0</span></span>
<span><i class="score-dot mark"></i> <span id="score-total">0</span>/<span id="score-max">11</span></span>
</div>
<div class="floorplan" id="floorplan"></div>
<div class="modal-overlay" id="modal">
<div class="modal">
<h2 id="modal-title">Which organ matches?</h2>
<p id="modal-room">Living Room</p>
<div class="choices" id="choices"></div>
<div class="result-msg" id="result-msg"></div>
<button class="close-btn" id="close-btn" style="display:none;">Continue</button>
</div>
</div>
<div class="final-screen" id="final-screen">
<h2 id="final-score"></h2>
<p id="final-msg"></p>
<button class="restart-btn" onclick="location.reload()">Play again</button>
</div>
<script>
const icons = {
triangle: '<svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M13.73 4a2 2 0 0 0-3.46 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z"/></svg>',
bed: '<svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M2 20v-8a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v8"/><path d="M4 10V6a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v4"/><path d="M12 4v6"/><path d="M2 18h20"/></svg>',
sofa: '<svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M20 9V6a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v3"/><path d="M2 16a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-5a2 2 0 0 0-4 0v1.5a.5.5 0 0 1-.5.5h-11a.5.5 0 0 1-.5-.5V11a2 2 0 0 0-4 0Z"/><path d="M4 18v2"/><path d="M20 18v2"/></svg>',
pot: '<svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M2 12h20"/><path d="M20 12v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-8"/><path d="m4 8 16-4"/><path d="m8.86 6.78-.45-1.81a2 2 0 0 1 1.45-2.43l1.94-.48a2 2 0 0 1 2.43 1.46l.45 1.8"/></svg>',
bath: '<svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M10 4 8 6"/><path d="M17 19v2"/><path d="M2 12h20"/><path d="M7 19v2"/><path d="M9 5 7.32 6.68a1 1 0 0 0 .05 1.43l.638.58"/><rect x="2" y="12" width="20" height="7" rx="2"/></svg>',
utensils: '<svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="m16 2-2.3 2.3a3 3 0 0 0 0 4.2l1.8 1.8a3 3 0 0 0 4.2 0L22 8"/><path d="M15 15 3.3 3.3a4.2 4.2 0 0 0 0 6l7.3 7.3c.7.7 2 .7 2.8 0L15 15Zm0 0 7 7"/><path d="m2.1 21.8 6.4-6.3"/><path d="m19 5-7 7"/></svg>',
archive: '<svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><rect width="20" height="5" x="2" y="3" rx="1"/><path d="M4 8v11a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8"/><path d="M10 12h4"/></svg>',
book: '<svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M12 7v14"/><path d="M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z"/></svg>',
shirt: '<svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M20.38 3.46 16 2a4 4 0 0 1-8 0L3.62 3.46a2 2 0 0 0-1.34 2.23l.58 3.47a1 1 0 0 0 .99.84H6v10c0 1.1.9 2 2 2h8a2 2 0 0 0 2-2V10h2.15a1 1 0 0 0 .99-.84l.58-3.47a2 2 0 0 0-1.34-2.23z"/></svg>',
door: '<svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M13 4h3a2 2 0 0 1 2 2v14"/><path d="M2 20h3"/><path d="M13 20h9"/><path d="M10 12v.01"/><path d="M13 4.562v16.157a1 1 0 0 1-1.242.97L5 20V5.562a2 2 0 0 1 1.515-1.94l4-1A2 2 0 0 1 13 4.561Z"/></svg>',
car: '<svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M19 17h2c.6 0 1-.4 1-1v-3c0-.9-.7-1.7-1.5-1.9C18.7 10.6 16 10 16 10s-1.3-1.4-2.2-2.3c-.5-.4-1.1-.7-1.8-.7H5c-.6 0-1.1.4-1.4.9l-1.4 2.9A3.7 3.7 0 0 0 2 12v4c0 .6.4 1 1 1h2"/><circle cx="7" cy="17" r="2"/><path d="M9 17h6"/><circle cx="17" cy="17" r="2"/></svg>'
};
const rooms = [
{ id:'attic', name:'Attic', icon:'triangle', organ:'Brain', ball:'var(--organ-brain)', col:'1 / -1', row:'1' },
{ id:'master', name:'Master Bedroom', icon:'bed', organ:'Kidneys', ball:'var(--organ-kidneys)', col:'1', row:'2' },
{ id:'living', name:'Living Room', icon:'sofa', organ:'Heart', ball:'var(--organ-heart)', col:'2 / 4', row:'2' },
{ id:'kitchen', name:'Kitchen', icon:'pot', organ:'Stomach', ball:'var(--organ-stomach)', col:'4', row:'2' },
{ id:'bathroom', name:'Bathroom', icon:'bath', organ:'Urinary System', ball:'var(--organ-urinary)', col:'1', row:'3' },
{ id:'dining', name:'Dining Room', icon:'utensils', organ:'Pancreas', ball:'var(--organ-pancreas)', col:'2', row:'3' },
{ id:'pantry', name:'Pantry', icon:'archive', organ:'Gallbladder', ball:'var(--organ-gallbladder)', col:'3', row:'3' },
{ id:'study', name:'Study / Library', icon:'book', organ:'Temporal Lobe', ball:'var(--organ-temporal)', col:'4', row:'3' },
{ id:'laundry', name:'Laundry / Utility',icon:'shirt', organ:'Liver', ball:'var(--organ-liver)', col:'1 / 3', row:'4' },
{ id:'foyer', name:'Foyer', icon:'door', organ:'Mouth / Esophagus', ball:'var(--organ-mouth)', col:'3 / 5', row:'4' },
{ id:'garage', name:'Garage', icon:'car', organ:'Spleen', ball:'var(--organ-spleen)', col:'1 / -1', row:'5' }
];
const allOrgans = rooms.map(r => r.organ);
const organBall = Object.fromEntries(rooms.map(r => [r.organ, r.ball]));
let correct = 0, wrong = 0, total = rooms.length;
let answered = new Set();
const fp = document.getElementById('floorplan');
rooms.forEach(r => {
const btn = document.createElement('button');
btn.type = 'button';
btn.className = `room ${r.id}`;
btn.style.gridColumn = r.col;
btn.style.gridRow = r.row;
btn.setAttribute('aria-label', 'Guess organ for ' + r.name);
btn.innerHTML = `
<div class="room-inner">
<div class="room-front">${icons[r.icon]}<span>${r.name}</span></div>
<div class="room-back"><span class="color-ball" style="--ball:${r.ball}"></span>${r.organ}</div>
</div>`;
btn.addEventListener('click', () => openQuiz(r, btn));
fp.appendChild(btn);
});
function openQuiz(room, el) {
if (answered.has(room.id)) return;
let choices = [room.organ];
const others = allOrgans.filter(o => o !== room.organ);
while (choices.length < 4) {
const pick = others[Math.floor(Math.random() * others.length)];
if (!choices.includes(pick)) choices.push(pick);
}
choices.sort(() => Math.random() - 0.5);
document.getElementById('modal-room').textContent = room.name;
const choicesDiv = document.getElementById('choices');
choicesDiv.innerHTML = '';
document.getElementById('result-msg').textContent = '';
document.getElementById('result-msg').className = 'result-msg';
document.getElementById('close-btn').style.display = 'none';
choices.forEach(c => {
const btn = document.createElement('button');
btn.className = 'choice-btn';
btn.innerHTML = `<span class="color-ball" style="--ball:${organBall[c]}"></span>${c}`;
btn.addEventListener('click', () => checkAnswer(btn, c, room, el));
choicesDiv.appendChild(btn);
});
document.getElementById('modal').classList.add('active');
}
function checkAnswer(btn, selected, room, el) {
const buttons = document.querySelectorAll('.choice-btn');
buttons.forEach(b => {
b.disabled = true;
if (b.textContent.trim() === room.organ) b.classList.add('selected-correct');
});
const msg = document.getElementById('result-msg');
if (selected === room.organ) {
correct++;
msg.textContent = 'Correct';
msg.className = 'result-msg correct';
el.classList.add('flipped', 'done');
} else {
wrong++;
btn.classList.add('selected-wrong');
msg.textContent = `It was ${room.organ}`;
msg.className = 'result-msg wrong';
el.classList.add('flipped', 'wrong');
}
answered.add(room.id);
document.getElementById('score-correct').textContent = correct;
document.getElementById('score-wrong').textContent = wrong;
document.getElementById('score-total').textContent = correct + wrong;
document.getElementById('close-btn').style.display = 'inline-block';
}
document.getElementById('close-btn').addEventListener('click', () => {
document.getElementById('modal').classList.remove('active');
if (answered.size === total) {
setTimeout(showFinal, 400);
}
});
function showFinal() {
const pct = Math.round((correct / total) * 100);
document.getElementById('final-score').textContent = `You scored ${correct}/${total} (${pct}%)`;
let msg = '';
if (pct === 100) msg = 'Perfect. You really see the connection.';
else if (pct >= 70) msg = 'Great — the metaphor is clicking.';
else if (pct >= 40) msg = 'Good start. The house-body link is subtle but real.';
else msg = 'Keep exploring — the connections are everywhere.';
document.getElementById('final-msg').textContent = msg;
document.getElementById('final-screen').classList.add('active');
}
</script>
</body>
</html>
Much Love!
Felicia.