/*Global reset */                
 *{ 
  margin:0;
  padding:0;
  box-sizing:border-box;
}

/* The overall look and feel of the page */ 
body{
  height:100vh;
  display:flex;
  justify-content:center;
  align-items:center;
  background:radial-gradient(circle at 20% 20%,#111827,#020617 60%);
  font-family:system-ui,-apple-system;
  color:#e5e7eb;
}

/* 7×7 grid container */
.shell{
  display:grid;
  grid-template-columns:repeat(7,40px);
  grid-template-rows:repeat(7,40px);
  grid-gap:1.5rem;
}

/* Each small building block */
.item{
  width:40px;
  height:40px;
  background:#020617;              
  border-radius:6px;
  position:relative;
  overflow:hidden;                 /* Prevent inner overflow */
  box-shadow:0 0 8px rgba(0,0,0,.8);
  transition:filter .1s linear, background-color .1s linear;
}

/* Small "windows" inside each building, brightness controlled by a CSS variable */
.item::after{
  content:'';
  position:absolute;
  inset:6px;                         /* Leave a 6px inset on all sides */
  background:#facc15;              /* Window light color */
  border-radius:3px;
  opacity:var(--win-opacity,0.1);  /* Default 0.1, JS will dynamically update --win-opacity */
  transition:opacity .1s linear;
}