/* Article examples use the puzzle's board, amber lights, and shared controls. */
.lo-widget .graph-heading h3 { margin: 0; }
.lo-widget .lo-caption { margin: 12px 0 16px; color: var(--muted); font: 13px/1.65 var(--sans); }
.lo-settings { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; margin-bottom: 12px; }
.lo-settings label { min-width: 0; }
.lo-stage { display: flex; justify-content: center; align-items: center; gap: 18px; margin: 20px 0; }
.lo-stage > .glo-board-wrap { flex: 1 1 0; min-width: 0; max-width: 380px; }
.lo-proof-board { max-width: 440px; margin: 20px auto 0; }
.lo-target { flex: 0 0 100px; max-width: 24%; }
.lo-mini-title { display: block; margin-bottom: 8px; color: var(--muted); font: 12px var(--sans); text-align: center; }
[data-lo-target] .glo-light { width: 22px; height: 22px; }
[data-lo-target] .glo-light-core { width: 17px; height: 17px; }
[data-lo-target].glo-grid .glo-light { width: calc(100% / var(--glo-side)); height: auto; }
[data-lo-target].glo-grid .glo-light-core { width: calc(100% - 3px); height: auto; }
.lo-static-edge { fill: none; stroke: #b6bfae; stroke-width: 1.3; vector-effect: non-scaling-stroke; }
.lo-static-off { fill: var(--paper); stroke: #b6bfae; stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.lo-static-on { fill: #e9bd63; stroke: #d8af60; stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.lo-static-label { fill: var(--ink); font: 18px var(--sans); }
.lo-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 22px; margin: 14px 0; font: 12px var(--sans); color: var(--muted); }
.lo-legend > span { display: inline-flex; gap: 8px; align-items: center; }
.lo-key { width: 15px; height: 15px; border: 1.5px solid #b6bfae; border-radius: 50%; background: var(--paper); }
.lo-key-on { background: #e9bd63; border-color: #d8af60; }
.lo-key-plan { display: grid; place-items: center; border: 0; background: var(--green); color: var(--paper); font: normal 10px var(--sans); }
.lo-widget .lo-plan-label { font: 13px/1.8 var(--sans); overflow-wrap: anywhere; }
.lo-widget .lo-status, .lo-widget .lo-proof-detail { margin: 16px 0; color: var(--green); font: 13px/1.7 var(--sans); }
.lo-proof-key { text-align: center; }
.lo-widget[data-complete='true'] .glo-board-wrap { background: #dcebdd; box-shadow: inset 0 0 0 2px #81a68a; }
@media (max-width: 500px) {
  .lo-stage { flex-wrap: wrap; }
  .lo-stage > .glo-board-wrap { flex-basis: 100%; }
  .lo-target { flex-basis: 100px; max-width: 100%; }
  .lo-settings { grid-template-columns: 1fr; }
}
@media (forced-colors: active) {
  .lo-key, .lo-static-off { border-color: CanvasText; stroke: CanvasText; background: Canvas; fill: Canvas; }
  .lo-key-on, .lo-static-on { border-color: Highlight; stroke: Highlight; background: Highlight; fill: Highlight; }
}