html, body { width:100%; height:100%; margin:0; overflow:hidden; background:#0b1715; font-family:Arial,sans-serif; }
#renderCanvas { width:100%; height:100%; display:block; outline:none; }
#loading { position:fixed; inset:0; display:grid; place-items:center; pointer-events:none; }
.card { width:min(560px,calc(100vw - 42px)); box-sizing:border-box; padding:30px; border:1px solid #55746d; border-radius:24px; color:#fff; background:rgba(8,27,24,.91); box-shadow:0 20px 70px #0009; pointer-events:auto; }
.eyebrow,.build { color:#79e4c2; letter-spacing:.15em; font-weight:800; font-size:13px; }
h1 { margin:12px 0; font-size:clamp(32px,6vw,56px); line-height:1.02; }
p { color:#dbe9e6; line-height:1.55; }
button { border:0; border-radius:999px; padding:14px 22px; background:#67dfb7; color:#09231d; font-weight:800; font-size:16px; cursor:pointer; }
button:disabled { opacity:.45; cursor:wait; }
.hint { font-size:14px; }
.build { margin-top:18px; color:#f4cf71; }
body.ready #loading { opacity:0; pointer-events:none; transition:opacity .45s ease; }