/* chem_demo 3D visualization shared styles */
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 100%; height: 100%; overflow: hidden; background: #0a0a1a; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; color: #e0e0e0; }
#renderCanvas { width: 100%; height: 100%; touch-action: none; display: block; }
.demo-info { position: absolute; top: 16px; left: 16px; z-index: 10; background: rgba(10,10,26,0.85); padding: 12px 18px; border-radius: 8px; max-width: 420px; border: 1px solid rgba(255,255,255,0.08); backdrop-filter: blur(8px); }
.demo-info h1, .demo-info h2 { font-size: 16px; margin-bottom: 6px; color: #fff; font-weight: 600; }
.demo-info p { font-size: 13px; line-height: 1.5; color: #aaa; margin-bottom: 8px; }
.back-link { color: #5b9aff; text-decoration: none; font-size: 13px; transition: color .2s; }
.back-link:hover { color: #82b4ff; text-decoration: underline; }
.demo-noscript { position: absolute; inset: 24px; z-index: 20; overflow: auto; padding: 24px; border: 1px solid rgba(255,255,255,.16); border-radius: 12px; background: #10172a; color: #eaf1ff; }
.demo-noscript h2 { margin-bottom: 12px; font-size: 22px; }
.demo-noscript p { margin-bottom: 10px; line-height: 1.7; }
.demo-noscript a { color: #82b4ff; }