<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 480 400" width="480" height="400">
<!-- glass atom: dark translucent surfaces with emotion tints -->
<rect width="480" height="400" fill="#000000"/>
<text x="240" y="24" font-family="Play, sans-serif" font-size="14" fill="#555555" text-anchor="middle">glass depth levels</text>
<!-- depth levels row -->
<g transform="translate(16, 44)">
<rect x="0" y="0" width="104" height="56" rx="4" ry="4" fill="#1a1a1a" stroke="#555555" stroke-width="0.5"/>
<text x="52" y="80" font-family="Play, sans-serif" font-size="11" fill="#d7d7d7" text-anchor="middle">foreground</text>
<text x="52" y="94" font-family="Play, sans-serif" font-size="10" fill="#555555" text-anchor="middle">z 40-50</text>
</g>
<g transform="translate(132, 44)">
<rect x="0" y="0" width="104" height="56" rx="4" ry="4" fill="#111111" stroke="#333333" stroke-width="0.5"/>
<text x="52" y="80" font-family="Play, sans-serif" font-size="11" fill="#d7d7d7" text-anchor="middle">midground</text>
<text x="52" y="94" font-family="Play, sans-serif" font-size="10" fill="#555555" text-anchor="middle">z 10-20</text>
</g>
<g transform="translate(248, 44)">
<rect x="0" y="0" width="104" height="56" rx="4" ry="4" fill="#090909" stroke="#222222" stroke-width="0.5"/>
<text x="52" y="80" font-family="Play, sans-serif" font-size="11" fill="#d7d7d7" text-anchor="middle">background</text>
<text x="52" y="94" font-family="Play, sans-serif" font-size="10" fill="#555555" text-anchor="middle">z 0</text>
</g>
<g transform="translate(364, 44)">
<rect x="0" y="0" width="104" height="56" rx="4" ry="4" fill="#050505" stroke="#151515" stroke-width="0.5"/>
<text x="52" y="80" font-family="Play, sans-serif" font-size="11" fill="#d7d7d7" text-anchor="middle">subtle</text>
<text x="52" y="94" font-family="Play, sans-serif" font-size="10" fill="#555555" text-anchor="middle">z 0</text>
</g>
<!-- emotion tints -->
<text x="240" y="168" font-family="Play, sans-serif" font-size="14" fill="#555555" text-anchor="middle">emotion tint on midground glass</text>
<g transform="translate(16, 184)">
<rect x="0" y="0" width="80" height="48" rx="4" ry="4" fill="#111111" stroke="#333333" stroke-width="0.5"/>
<rect x="0" y="0" width="80" height="48" rx="4" ry="4" fill="#00fe00" opacity="0.12"/>
<text x="40" y="68" font-family="Play, sans-serif" font-size="11" fill="#00fe00" text-anchor="middle">joy</text>
</g>
<g transform="translate(112, 184)">
<rect x="0" y="0" width="80" height="48" rx="4" ry="4" fill="#111111" stroke="#333333" stroke-width="0.5"/>
<rect x="0" y="0" width="80" height="48" rx="4" ry="4" fill="#ff0000" opacity="0.12"/>
<text x="40" y="68" font-family="Play, sans-serif" font-size="11" fill="#ff0000" text-anchor="middle">anger</text>
</g>
<g transform="translate(208, 184)">
<rect x="0" y="0" width="80" height="48" rx="4" ry="4" fill="#111111" stroke="#333333" stroke-width="0.5"/>
<rect x="0" y="0" width="80" height="48" rx="4" ry="4" fill="#fcf000" opacity="0.12"/>
<text x="40" y="68" font-family="Play, sans-serif" font-size="11" fill="#fcf000" text-anchor="middle">surprise</text>
</g>
<g transform="translate(304, 184)">
<rect x="0" y="0" width="80" height="48" rx="4" ry="4" fill="#111111" stroke="#333333" stroke-width="0.5"/>
<rect x="0" y="0" width="80" height="48" rx="4" ry="4" fill="#00acff" opacity="0.12"/>
<text x="40" y="68" font-family="Play, sans-serif" font-size="11" fill="#00acff" text-anchor="middle">interest</text>
</g>
<g transform="translate(400, 184)">
<rect x="0" y="0" width="64" height="48" rx="4" ry="4" fill="#111111" stroke="#333333" stroke-width="0.5"/>
<rect x="0" y="0" width="64" height="48" rx="4" ry="4" fill="#d500f9" opacity="0.12"/>
<text x="32" y="68" font-family="Play, sans-serif" font-size="11" fill="#d500f9" text-anchor="middle">fear</text>
</g>
<!-- nesting -->
<text x="240" y="292" font-family="Play, sans-serif" font-size="14" fill="#555555" text-anchor="middle">nesting (max 3 deep)</text>
<g transform="translate(100, 308)">
<rect x="0" y="0" width="280" height="80" rx="4" ry="4" fill="#090909" stroke="#222222" stroke-width="0.5"/>
<rect x="8" y="8" width="264" height="64" rx="4" ry="4" fill="#111111" stroke="#333333" stroke-width="0.5"/>
<rect x="16" y="16" width="248" height="48" rx="4" ry="4" fill="#1a1a1a" stroke="#555555" stroke-width="0.5"/>
<text x="140" y="44" font-family="Play, sans-serif" font-size="12" fill="#d7d7d7" text-anchor="middle">background / midground / foreground</text>
</g>
</svg>