.crystal-model { max-width: 48rem; margin: 1.5rem auto; padding: 1rem; border: 1px solid #b8cbd7; border-radius: .5rem; background: #edf3f7; }
.crystal-controls { display: flex; flex-wrap: wrap; gap: .5rem; margin: .75rem 0; }
.crystal-model button, .crystal-model select { font: inherit; padding: .4rem .65rem; }
.crystal-model button[aria-pressed="true"] { background: #164d70; color: white; }
.crystal-viewer { height: 400px; position: relative; }
.crystal-viewer canvas { display: block; }
.crystal-viewer img[width="0"] { display: none; }
@media (max-width: 600px) { .crystal-viewer { height: 300px; } .crystal-model { padding: .5rem; } }
.crystal-model p { background: transparent; }