.g-lights-out{--lo-bg-off:var(--c-surface-2);--lo-edge-off:var(--c-border);--lo-fg-off:var(--c-text-faint);--lo-bg-on:color-mix(in srgb, var(--c-accent) 22%, var(--c-surface));--lo-edge-on:color-mix(in srgb, var(--c-accent) 62%, var(--c-surface));--lo-fg-on:color-mix(in srgb, var(--c-accent) 72%, var(--c-text));--lo-glow:color-mix(in srgb, var(--c-accent) 34%, transparent);gap:var(--sp-3)}.g-lights-out .lo-meter{justify-content:center;gap:var(--sp-2);flex-wrap:wrap;display:flex}.g-lights-out .lo-chip{align-items:center;gap:var(--sp-1);padding-block:var(--sp-1);padding-inline:var(--sp-3);border-radius:var(--r-full);background:var(--c-surface-2);color:var(--c-text-dim);font-size:var(--fs-sm);display:inline-flex}.g-lights-out .lo-chip--target{background:var(--c-brand-soft);color:var(--c-brand)}.g-lights-out .lo-chip b{font-family:var(--font-num);font-variant-numeric:tabular-nums;color:var(--c-text)}.g-lights-out .lo-grid{grid-template-columns:repeat(var(--lo-n,3), minmax(0, 1fr));width:min(100%, calc(var(--lo-n,3) * 88px))}.g-lights-out .lo-cell{min-width:var(--tap);min-height:var(--tap);border:2px solid var(--lo-edge-off);border-radius:var(--r-md);background:var(--lo-bg-off);color:var(--lo-fg-off);padding:0}.g-lights-out .lo-cell.is-on{border-color:var(--lo-edge-on);background:var(--lo-bg-on);color:var(--lo-fg-on);box-shadow:0 0 16px var(--lo-glow)}.g-lights-out .lo-bulb{width:62%;height:auto}.g-lights-out .lo-rays{opacity:0}.g-lights-out .lo-cell.is-on .lo-rays{opacity:1}.g-lights-out .lo-cell.is-hint{outline:3px dashed var(--c-brand);outline-offset:3px}.g-lights-out.is-solved .lo-cell{border-color:color-mix(in srgb, var(--c-good) 55%, var(--c-border))}.g-lights-out .lo-note{max-width:32ch;color:var(--c-text-faint);font-size:var(--fs-xs);text-align:center;margin:0}.g-lights-out .lo-sr{white-space:nowrap;clip-path:inset(50%);border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.g-lights-out .lo-cell,.g-lights-out .lo-rays{transition:none}.g-lights-out .lo-cell:active{transform:none}.g-lights-out.is-motion .lo-cell{transition:background var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur-fast) var(--ease)}.g-lights-out.is-motion .lo-rays{transition:opacity var(--dur) var(--ease)}.g-lights-out.is-motion .lo-cell:active{transform:scale(.94)}
