/* demo.css — shared styling for the shareable wasm-X demo (dark, clean, monospace). */
:root {
  --bg:#161a21; --panel:#1d2230; --panel2:#232a3a; --edge:#323a4d;
  --ink:#cdd6e4; --dim:#8a93a5; --accent:#88c0d0; --accent2:#a3be8c;
  --warn:#ebcb8b; --bad:#bf616a; --btn:#4a78a8; --btn-h:#5b8cc0;
}
* { box-sizing:border-box; }
html,body { margin:0; }
body {
  background:var(--bg); color:var(--ink); padding:24px;
  font:14px/1.55 ui-monospace,Menlo,Consolas,monospace;
}
a { color:var(--accent); }
.repo { color:var(--dim); }
h1 { font-size:1.35rem; margin:0 0 .2rem; color:#fff; font-weight:600; letter-spacing:.2px; }
h1 .x { color:var(--accent); }
.lead { color:var(--dim); margin:.1rem 0 1.2rem; max-width:64ch; }
.wrap { max-width:980px; margin:0 auto; }

/* cards / panels */
.card { background:var(--panel); border:1px solid var(--edge); border-radius:10px; padding:18px; }
.row { display:flex; gap:18px; flex-wrap:wrap; align-items:flex-start; }
.col { flex:1; min-width:280px; }

/* buttons */
.btn {
  display:inline-block; background:var(--btn); color:#fff; border:0; border-radius:7px;
  padding:10px 16px; font:inherit; font-weight:600; cursor:pointer; text-decoration:none;
  transition:background .12s ease;
}
.btn:hover { background:var(--btn-h); }
.btn.big { padding:16px 22px; font-size:1.05rem; }
.btn.ghost { background:var(--panel2); color:var(--ink); border:1px solid var(--edge); }
.btn.ghost:hover { background:#2b3346; }
.btn:disabled { opacity:.45; cursor:default; }
.btns { display:flex; gap:12px; flex-wrap:wrap; }

/* session code */
.code {
  font-size:2.1rem; font-weight:700; letter-spacing:.35em; color:var(--accent2);
  background:#0e1116; border:1px solid var(--edge); border-radius:8px;
  padding:.35em .2em .35em .55em; text-align:center; user-select:all;
}
.codewrap { display:flex; align-items:center; gap:12px; }
.joinurl { color:var(--dim); word-break:break-all; font-size:.85rem; }

/* the screen */
.screenframe { display:inline-block; position:relative; line-height:0;
  border:2px solid var(--edge); border-radius:6px; background:#000; overflow:hidden; }
#screen { display:block; background:#000; image-rendering:pixelated; cursor:none; }
/* JS cursor sprite (Xvfb doesn't composite the real pointer into the framebuffer) */
#cursor { position:absolute; left:0; top:0; width:14px; height:20px; pointer-events:none;
  display:none; transform:translate(-1px,-1px);
  filter:drop-shadow(0 0 1px #000); }
/* overlays over the screen */
.overlay { position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  flex-direction:column; gap:10px; text-align:center; color:var(--ink); line-height:1.5;
  background:rgba(12,15,20,.82); backdrop-filter:blur(1px); }
.overlay.hidden { display:none; }
.overlay .big { font-size:1.05rem; color:#fff; }
.overlay .spin { width:26px; height:26px; border:3px solid var(--edge); border-top-color:var(--accent);
  border-radius:50%; animation:spin 1s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }

/* status + log */
.status { color:var(--dim); margin:10px 0 0; min-height:1.4em; }
.status .ok { color:var(--accent2); } .status .warn { color:var(--warn); } .status .bad { color:var(--bad); }
.log { white-space:pre-wrap; background:#0c0f14; border:1px solid var(--edge); border-radius:8px;
  padding:10px; color:var(--dim); max-height:240px; overflow:auto; font-size:.82rem; }

label { color:var(--dim); display:block; margin:0 0 4px; }
input[type=text], select {
  font:inherit; background:#0e1116; color:var(--ink); border:1px solid var(--edge);
  border-radius:7px; padding:9px 11px; width:100%; }
input.code-in { letter-spacing:.3em; text-transform:uppercase; font-size:1.2rem; text-align:center; }

.foot { color:var(--dim); margin-top:22px; font-size:.82rem; line-height:1.6; max-width:90ch; }
.foot b { color:var(--ink); }
.muted { color:var(--dim); }
.pill { display:inline-block; padding:2px 9px; border-radius:999px; background:var(--panel2);
  border:1px solid var(--edge); color:var(--dim); font-size:.78rem; }