/* Pointillism lesson. Everything scoped under .pt-*. */

/* a face, stepped back from */
.pt-face { width: min(100%, 250px); aspect-ratio: 1; margin: 0 auto; display: grid; place-items: center; }
.pt-face img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 10px; transform-origin: 50% 50%; }

/* a patch of dots that backs away */
.pt-patch { display: flex; flex-direction: column; align-items: center; gap: 8px; --pt-k: 1; }
.pt-patch .pt-sq { width: 200px; height: 200px; border-radius: 10px; overflow: hidden; transform: scale(var(--pt-k)); transform-origin: 50% 0; display: grid; place-items: center; }
.pt-patch .pt-sq canvas { width: 150%; height: 150%; display: block; filter: blur(var(--pt-blur, 0px)); }
.pt-patch span { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--dim); margin-top: calc((var(--pt-k) - 1) * 200px); }
.pt-stir .pt-sq { background: var(--raised); border: 1px dashed var(--line-strong); transition: background .6s; }
.pt-stir .pt-sq b { font: 700 40px var(--serif); color: var(--dim); }
.pt-two { display: flex; justify-content: center; }
.pt-two .pt-patch { width: 150px; }

/* the three lamps */
.pt-screen { display: flex; align-items: center; justify-content: center; gap: 18px; }
.pt-glass, .pt-out { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.pt-px { width: 170px; height: 113px; display: block; border-radius: 8px; border: 1px solid var(--line-strong); }
.pt-sw { width: 72px; height: 72px; border-radius: 10px; border: 1px solid var(--line-strong); background: #000; transition: background .25s; }
.pt-glass span, .pt-out span { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--dim); text-align: center; max-width: 100px; }
.pt-lamps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.btn.pt-lamp { padding-left: 10px; padding-right: 10px; }
.btn.pt-lamp::before { content: ""; width: 14px; height: 14px; flex: none; border-radius: 50%; background: #161B2B; box-shadow: inset 0 0 0 1px var(--line-strong); margin-right: 8px; }
.btn.pt-lamp.r.lit::before { background: #FF2B2B; box-shadow: 0 0 10px 2px rgba(255,43,43,.6); }
.btn.pt-lamp.g.lit::before { background: #2BE85A; box-shadow: 0 0 10px 2px rgba(43,232,90,.6); }
.btn.pt-lamp.b.lit::before { background: #4266FF; box-shadow: 0 0 10px 2px rgba(66,102,255,.6); }

/* eye or stir */
.pt-claim { width: 100%; padding: 20px; border-radius: 20px; background: var(--surface); border: 1px solid var(--line-strong); }
.pt-claim p { margin: 0; font: 600 20px/1.35 var(--serif); color: var(--text); }
.choices.pt-two-opts { display: grid; grid-template-columns: 1fr 1fr; }

@media (max-height: 700px) {
  .pt-face { width: min(100%, 200px); }
  .pt-patch .pt-sq { width: 170px; height: 170px; }
  .pt-patch span { margin-top: calc((var(--pt-k) - 1) * 170px); }
  .pt-px { width: 150px; height: 100px; }
  .pt-claim p { font-size: 18px; }
}