body { font-family: Arial, sans-serif; margin:0; padding:2rem; text-align:center; }
.preview { max-width:80%; height:auto; margin-bottom:1rem; }
.btn { display:inline-block; padding:0.5rem 1rem; margin:1rem 0; background:#4caf50; color:#fff; text-decoration:none; border-radius:4px; }
#mode-control { display:flex; flex-wrap:wrap; gap:0.75rem; justify-content:center; }
#mode-control button { padding:0.65rem 1rem; min-height:44px; cursor:pointer; }
#demo-status { max-width:70ch; margin:1rem auto; }
#logs-panel { text-align:left; white-space:pre-wrap; overflow-wrap:anywhere; max-width:70ch; margin:1rem auto; }
#chart { max-height:360px; }
details { max-width:70ch; margin:1rem auto; text-align:left; }
table { border-collapse:collapse; width:100%; }
th, td { text-align:left; border-bottom:1px solid #ccc; padding:0.4rem; }
@media (max-width:480px) { body { padding:1rem; } .preview { max-width:100%; } }
body { overflow-wrap:anywhere; }
h1, p, pre { max-width:100%; }