body { background:#020617; overflow-x:hidden; }
.room {
  position:relative; min-height:calc(100vh - 56px); width:min(520px,100%); margin:0 auto;
  display:flex; flex-direction:column; justify-content:flex-end; padding-bottom:24px;
}
.city {
  position:absolute; inset:0 0 35%; background:
    linear-gradient(180deg, rgba(2,6,23,.2), rgba(2,6,23,.85) 70%),
    radial-gradient(circle at 20% 80%, rgba(251,191,36,.25), transparent 25%),
    radial-gradient(circle at 80% 70%, rgba(251,191,36,.18), transparent 22%),
    #0f172a;
}
.holo {
  position:relative; z-index:2; flex:1; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:20px; padding:40px 20px 20px;
}
.holo-root {
  width:88px; height:88px; border-radius:999px; display:grid; place-items:center; font-size:36px;
  border:2px solid rgba(96,165,250,.55); box-shadow:0 0 40px rgba(59,130,246,.45);
  background:rgba(15,23,42,.55); backdrop-filter:blur(4px);
}
.holo-branch, .holo-leaves { display:flex; gap:12px; flex-wrap:wrap; justify-content:center; }
.holo-branch span, .holo-leaves span {
  width:52px; height:52px; border-radius:999px; display:grid; place-items:center; font-size:22px;
  border:1px solid rgba(147,197,253,.35); background:rgba(15,23,42,.45); backdrop-filter:blur(6px);
}
.desk {
  position:relative; z-index:3; height:120px; margin:0 20px; border-radius:16px 16px 0 0;
  background:linear-gradient(180deg,#1f2937,#111827); border:1px solid rgba(148,163,184,.18);
  display:flex; align-items:flex-end; justify-content:center; gap:20px; padding:16px 20px;
}
.user { width:48px; height:48px; border-radius:12px 12px 4px 4px; background:#334155; }
.laptop { width:80px; height:50px; border-radius:6px; background:#475569; transform:perspective(200px) rotateX(12deg); }
.assistant { font-size:28px; filter:drop-shadow(0 0 12px rgba(96,165,250,.8)); }