.lights { --n: 3; display: grid; grid-template-columns: repeat(var(--n), 1fr); gap: 8px; width: min(100%, 380px); margin: 16px auto 0; padding: 10px; border: 5px solid var(--ink); border-radius: 22px; background: color-mix(in srgb, var(--ink) 12%, var(--surface)); }
.l-cell { position: relative; display: grid; place-items: center; aspect-ratio: 1; min-width: 0; padding: 0; border: 4px solid var(--ink); border-radius: 18px; background: #26384a; cursor: pointer; }
.l-cell::before { content: ""; width: 46%; aspect-ratio: 1; border-radius: 50%; border: 5px solid #9fb3c4; background: transparent; }
.l-cell.on { background: var(--on); box-shadow: 0 0 0 4px color-mix(in srgb, var(--on) 40%, transparent), inset 0 0 0 6px #fff7cf; }
.l-cell.on::before { border-color: #3a2a00; background: #3a2a00; width: 36%; }
.l-cell.hint { outline: 6px solid #2b85d3; outline-offset: 3px; z-index: 2; animation: pulse 1s ease-in-out infinite; }
.l-cell:active { transform: scale(.96); }
body.theme-high .l-cell { background: #000; border-color: #ffd900; }
body.theme-high .l-cell::before { border-color: #fff; }
body.theme-high .l-cell.on { background: #ffd900; }
body.theme-high .l-cell.on::before { border-color: #000; background: #000; }
body.theme-light .l-cell { background: #3a4b5c; }
@keyframes pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.06); } }