/* Positive psychology lesson. Everything scoped under .pp-*. */
.pp-sc { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.pp-hero img { display: block; width: 240px; max-width: 100%; max-height: 28vh; object-fit: contain; margin: 0 auto; filter: drop-shadow(0 18px 30px rgba(123,92,253,.3)); }
.pp-hero.wide img { width: 300px; }
.pp-note { text-align: center; font-size: 13px; color: var(--dim); }

/* the zero line */
.pp-scale { width: 100%; max-width: 330px; padding-top: 34px; }
.pp-track { position: relative; height: 22px; border-radius: 11px; background: var(--raised); border: 1px solid var(--line); }
.pp-neg, .pp-pos { position: absolute; top: 0; bottom: 0; width: 50%; }
.pp-neg { left: 0; border-radius: 11px 0 0 11px; background: linear-gradient(90deg, rgba(216,85,85,.55), rgba(216,85,85,.08)); }
.pp-pos { right: 0; border-radius: 0 11px 11px 0; background: linear-gradient(90deg, rgba(252,192,80,.05), rgba(252,192,80,.5)); opacity: .25; transition: opacity .5s; }
.pp-wall { position: absolute; left: calc(50% - 2px); top: -10px; bottom: -10px; width: 4px; border-radius: 2px; background: var(--text); opacity: .2; transition: opacity .4s, background .4s; }
.pp-scale.walled .pp-wall { opacity: 1; background: var(--red); }
.pp-scale.open .pp-wall { opacity: 0; }
.pp-scale.open .pp-pos { opacity: 1; }
.pp-scale.bump .pp-wall { animation: pp-bump .35s ease-out; }
@keyframes pp-bump { 0%, 100% { transform: none; } 40% { transform: scaleY(1.35); background: var(--red); opacity: 1; } }
.pp-maya { position: absolute; top: -32px; transform: translateX(-50%); padding: 3px 9px; border-radius: 999px; background: var(--violet); color: #fff; font: 700 13px var(--sans); white-space: nowrap; transition: left .12s; }
.pp-maya::after { content: ''; position: absolute; left: 50%; bottom: -6px; margin-left: -5px; border: 5px solid transparent; border-top-color: var(--violet); border-bottom: 0; }
.pp-scale.up .pp-maya { background: var(--gold-deep); }
.pp-scale.up .pp-maya::after { border-top-color: var(--gold-deep); }
.pp-ends, .pp-sides { display: flex; justify-content: space-between; margin-top: 6px; font: 600 12px var(--mono); color: var(--dim); }
.pp-sides { font: 700 14px var(--sans); color: var(--text); padding: 0 8%; }
.pp-sides .pp-q { color: var(--gold); opacity: .4; transition: opacity .4s; }
.pp-scale.open .pp-q { opacity: 1; }

/* the Lorenz canvas */
.pp-lz { width: 100%; max-width: 330px; display: flex; flex-direction: column; gap: 6px; }
.pp-lz canvas { display: block; width: 100%; height: min(230px, 30vh); border-radius: 16px; background: var(--surface); border: 1.5px solid var(--line); transition: border-color .3s; }
.pp-lz.on canvas { border-color: rgba(252,192,80,.55); }
.pp-lzst { display: flex; justify-content: space-between; align-items: baseline; }
.pp-lzst span { font-size: 12px; font-weight: 700; color: var(--dim); }
.pp-lzst b { font: 700 18px var(--serif); color: var(--violet-bright); }
.pp-lz.on .pp-lzst b { color: var(--gold); }

/* pairs */
.pp-base { stroke: var(--line-strong); stroke-width: 1.5; }
.pp-key { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 14px; }
.pp-key span { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--text); }
.pp-key i { width: 12px; height: 12px; border-radius: 50%; }
.pp-pairs { width: 100%; max-width: 330px; display: flex; flex-direction: column; gap: 8px; }
.pp-pairs svg { display: block; width: 100%; height: auto; }
.pp-cv { fill: none; stroke-width: 3; }
.pp-cv.a { stroke: var(--violet-bright); }
.pp-cv.b { stroke: var(--gold); }
.pp-key i.a { background: var(--violet-bright); }
.pp-key i.b { background: var(--gold); }
.pp-grid { display: grid; grid-template-columns: repeat(10, 18px); gap: 7px; justify-content: center; min-height: 18px; }
.pp-grid i { width: 18px; height: 18px; border-radius: 50%; animation: pp-pop .25s ease-out; }
.pp-grid i.w { background: var(--gold); }
.pp-grid i.l { background: var(--violet-deep); }
@keyframes pp-pop { from { transform: scale(.3); opacity: 0; } to { transform: none; opacity: 1; } }
.pp-tally { text-align: center; font: 600 15px var(--sans); color: var(--text); }
.pp-tally b { font-family: var(--mono); color: var(--gold); }

@media (max-height: 700px) {
  .pp-lz canvas { height: min(190px, 28vh); }
  .pp-grid { grid-template-columns: repeat(10, 14px); gap: 6px; }
  .pp-grid i { width: 14px; height: 14px; }
}