html, body, #canvas { margin: 0; padding: 0; border: 0; }
body { background: #cfe8f7; overflow: hidden; touch-action: none; }
#canvas { display: block; }
#canvas:focus { outline: none; }
#loader {
	position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
	background: linear-gradient(#86c5ee, #cfe8f7 60%, #7cc36a 60%);
	font-family: ui-rounded, "SF Pro Rounded", "Nunito", "Arial Rounded MT Bold", "Trebuchet MS", system-ui, sans-serif;
	color: #3b3a45;
}
body[data-state="running"] #loader { display: none; }
.card {
	width: min(420px, 80vw); padding: 24px 28px; border-radius: 22px; background: rgba(255, 252, 245, 0.92);
	box-shadow: 0 6px 0 rgba(59, 58, 69, 0.12), 0 14px 34px rgba(59, 58, 69, 0.16); text-align: center;
}
h1 { margin: 0 0 16px; font-size: 28px; }
.bar { height: 14px; border-radius: 8px; background: #eadfcb; overflow: hidden; }
.bar i { display: block; width: 0; height: 100%; border-radius: 8px; background: linear-gradient(90deg, #d9993a, #f1c35c); }
p { margin: 12px 0 0; color: #6c6a78; font-size: 15px; }
body[data-state="failed"] p { color: #e8607a; }