body { 
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  margin: 0;
  padding: 0;
  background: #fff;
  color: #333;
}

/* ✅ default visible */
.ux-block {
  display: block;
  min-height: 100vh;
  padding: 2em;
  box-sizing: border-box;
}

/* used by the dualux runtime to hide the inactive surface */
.hidden { display: none !important; }

/* Web UX Styling */
#web-ux {
  background: linear-gradient(to right, #f8f9fa, #e9ecef);
  color: #212529;
}
#web-ux header { text-align: center; padding-bottom: 1em; border-bottom: 1px solid #ccc; }
#web-ux main { max-width: 800px; margin: auto; font-size: 1.1em; }

/* App UX Styling */
#app-ux { background: #000; color: #fff; }
#app-ux header {
  background: #111; padding: 1.5em 0; text-align: center;
  font-size: 1.5em; letter-spacing: 0.5px; border-bottom: 2px solid #333;
}
#app-ux main { padding: 2em; font-size: 1.2em; text-align: center; }