/* Marcus Aurelius lesson. All rules scoped under .mau-* */

.mau-sc { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.mau-note { font-size: 12.5px; color: var(--dim); text-align: center; max-width: 300px; }
.mau-q { width: 100%; max-width: 340px; padding: 10px 14px; border-left: 3px solid var(--gold); background: var(--surface); border-radius: 0 14px 14px 0; }
.mau-q p { margin: 0; font: 500 16px/1.35 var(--serif); color: var(--text); }
.mau-q small { display: block; margin-top: 4px; font-size: 12px; color: var(--dim); }

/* the dye */
.mau-cloth { position: relative; width: 220px; height: 130px; border-radius: 18px; overflow: hidden; border: 1px solid var(--line); }
.mau-wool { position: absolute; inset: 0; background: repeating-linear-gradient(45deg, #efe6d6 0 6px, #e2d6c2 6px 12px); }
.mau-dye { position: absolute; left: -30%; top: -30%; width: 40%; height: 40%; border-radius: 50%; background: radial-gradient(circle, #6a1f9a 55%, rgba(106, 31, 154, .7) 70%, rgba(106, 31, 154, 0) 72%); transition: transform 3s cubic-bezier(.3, .6, .2, 1); transform-origin: center; mix-blend-mode: multiply; }
.mau-soak .mau-dye { transform: scale(7); }
.mau-cl { position: absolute; left: 12px; bottom: 8px; font-size: 13px; font-weight: 800; color: #3a2a1a; transition: color 2s 1s; }
.mau-soak .mau-cl { color: #f3e6c8; }

/* strip it bare */
.mau-scr { position: relative; width: 260px; height: 200px; border-radius: 20px; overflow: hidden; border: 2px solid var(--gold); box-shadow: 0 10px 30px rgba(123, 92, 253, .3); touch-action: none; }
.mau-bare { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 18px; background: #efe6d6; text-align: center; }
.mau-bare b { font: 600 22px/1.25 var(--serif); color: #2a1f14; }
.mau-bare small { font-size: 12px; font-weight: 700; color: #6b5a44; }
.mau-scr canvas { position: absolute; inset: 0; width: 100%; height: 100%; cursor: grab; transition: opacity .45s; }
.mau-clear canvas { opacity: 0; pointer-events: none; }
.mau-hint { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); padding: 4px 12px; border-radius: 10px; background: rgba(11, 10, 24, .7); font-size: 13px; font-weight: 800; color: var(--gold); pointer-events: none; transition: opacity .3s; }
.mau-hint.gone { opacity: 0; }

/* with real power: the scene before, crossfading to what he did on the answer */
.mau-pair { display: grid; place-items: center; }
.mau-pair img { grid-area: 1 / 1; width: 220px; height: 210px; object-fit: contain; filter: drop-shadow(0 18px 30px rgba(123, 92, 253, .35)); transition: opacity .5s, transform .5s; }
.mau-pair img + img { opacity: 0; transform: scale(.92); }
.mau-pair.mau-after img:first-child { opacity: 0; transform: scale(.92); }
.mau-pair.mau-after img + img { opacity: 1; transform: none; }

@media (max-height: 700px) {
  .mau-pair img { width: 180px; height: 170px; }
  .mau-q { padding: 8px 12px; }
  .mau-q p { font-size: 14px; }
  .mau-scr { width: 230px; height: 176px; }
  .mau-bare b { font-size: 19px; }
}