/* Genesis Protocol — different format (typewriter + live hashing) */
*{box-sizing:border-box}
html,body{height:100%;margin:0;background:#000;color:#e8e8e8;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,'Noto Sans KR',Arial}
#hud{position:fixed;left:18px;top:14px;letter-spacing:.12em;font-size:12px;opacity:.66;pointer-events:none}
#app{position:relative;width:100vw;height:100vh;display:grid;place-items:center;overflow:hidden}
#stage{position:relative;width:min(1200px,94vw);height:min(700px,86vh);border-radius:18px;padding:48px 36px 64px;background:rgba(0,0,0,.35);box-shadow:0 10px 60px rgba(0,0,0,.6) inset}
#watermark{position:absolute;inset:0;margin:auto;opacity:.07;filter:blur(2px) drop-shadow(0 0 14px rgba(255,255,255,.04));width:100%;height:100%;object-fit:cover;pointer-events:none}
.type{font-size:clamp(20px,4.2vw,46px);font-weight:700;letter-spacing:.02em;line-height:1.2;text-shadow:0 1px 0 #000,0 0 12px rgba(255,255,255,.05)}
#sub{margin-top:12px;font-size:clamp(16px,2.2vw,26px);opacity:.8}
#block{margin-top:28px;display:grid;grid-template-columns:160px 1fr;gap:10px 14px;font-family:ui-monospace,Consolas,Menlo,monospace;background:rgba(255,255,255,.03);padding:16px;border-radius:12px}
#block .row span{opacity:.7}
#block .row code{opacity:.95}
#hashview{margin-top:18px;font-family:ui-monospace,Consolas,Menlo,monospace;font-size:clamp(12px,1.6vw,14px)}
#progress{margin-top:10px;width:100%;height:8px;background:#111;border-radius:6px;overflow:hidden}
#bar{height:100%;width:0;background:linear-gradient(90deg,#58ffcc,#d8fff5);box-shadow:0 0 12px rgba(120,255,220,.35)}
#rb-label{position:absolute;right:18px;bottom:18px;text-align:right;opacity:.4;color:#fff;font-size:12px;letter-spacing:.04em;line-height:1.1;font-weight:500;text-shadow:0 0 6px rgba(255,255,255,.06);pointer-events:none}
#rb-label .pname{font-weight:600}
@media (max-width:720px){#stage{padding:28px 18px 54px} #block{grid-template-columns:120px 1fr} #rb-label{font-size:10px}}