/* Shared look of the guide examples (integrations/examples, drivers/examples) */
body { margin: 0; font: 15px/1.4 system-ui, sans-serif; color: #e8f1fb; background: #04101d; }
.stage { position: relative; height: 100vh; }
.z-view { display: grid; place-content: center; justify-items: center; gap: 14px; text-align: center; }
h1, h2, p { margin: 0; }
h1 { font-size: 1.3rem; }
.list { width: 100%; height: 100%; background: radial-gradient(circle at 50% 35%, #12355a, #04101d 70%); }
.row { display: flex; gap: 20px; }
/* A planet and the view it opens are both circles, so one grows into the other */
.planet, .planet-view { border-radius: 50%; box-shadow: inset -12px -10px 30px #0008; }
.planet { width: 84px; height: 84px; cursor: zoom-in; display: grid; place-content: center; font-weight: 600; text-shadow: 0 1px 4px #0009; }
.planet-view { width: 300px; height: 300px; padding: 40px; box-sizing: border-box; text-shadow: 0 1px 6px #000a; }
.mercury { background: radial-gradient(circle at 35% 30%, #d9d4cc, #6f665b); }
.venus { background: radial-gradient(circle at 35% 30%, #f6dc9a, #a8692a); }
.earth { background: radial-gradient(circle at 35% 30%, #7cc4ff, #1b4f8f); }
.mars { background: radial-gradient(circle at 35% 30%, #ff9a6b, #8f3416); }
.tag { font: 600 11px/1 ui-monospace, monospace; padding: 5px 10px; border-radius: 99px; background: #ffffff1a; color: #b9d3ee; }
button { font: inherit; padding: 8px 16px; border: 0; border-radius: 99px; background: #3da9fc; color: #04101d; font-weight: 600; cursor: pointer; }
.hint { font-size: 13px; color: #9fb6d4; max-width: 340px; }