/* -------------------------------------------------
   Global page styling
   ------------------------------------------------- */
html, body {
    height: 100%;
    width: 100%;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f0f0f0;          /* initial background */
    font-family: system-ui, sans-serif;
}

/* -------------------------------------------------
   Pill container
   ------------------------------------------------- */
.pill {
    display: flex;
    gap: 5px;                     /* space between circles */
    padding: 4px 8px;
    /* background: #fff; */
    border-radius: 9999px;        /* pill shape */
    border: 1px solid rgba(0,0,0,.15);
    box-shadow: inset 0 2px 6px rgba(0,0,0,.08);
}

/* -------------------------------------------------
   Circles
   ------------------------------------------------- */
.circle {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    cursor: pointer;
    transition: transform .15s ease,
                box-shadow .15s ease;
    /* box-shadow: 0 0 2px 6px rgba(0,0,0,.08); */
}

/* Individual colours */
.light   { 
  background: rgb(122, 255, 205); 
  border: 1px solid rgba(0,0,0,.15);
}
.dark { 
  background: rgb(31, 61, 54); 
  border: 1px solid rgba(0,0,0,.15);
}
.black { 
  background: rgb(29, 29, 29); 
  border: 1px solid rgba(234, 234, 234,.15);
}
.white { 
  background: rgb(234, 234, 234); 
  border: 1px solid rgba(0,0,0,.15);
}

/* Half‑black / half‑white */
.half {
    background: linear-gradient(
        90deg,
        #000 50%,
        #fff 50%
    );
}

/* Hover glow */
.circle:hover {
    /* border: 1px solid #fff; */
    box-shadow: 0 0 2px 3px rgba(0,0,0,.08);
    transform: scale(1.08);
}