/* Psychology for Everyone – shared gallery + player. Old-browser safe: no color-mix, :has, :is, inset or container queries. */
.pfm-top{display:-webkit-box;display:flex;-webkit-box-pack:center;justify-content:center;margin:8px 0 16px}
.pfm-all{display:-webkit-inline-box;display:inline-flex;-webkit-box-align:center;align-items:center;gap:12px;min-height:56px;padding:10px 26px;border:0;border-radius:999px;background:#c0392b;background:var(--pfm-accent,#c0392b);color:#fff;font:inherit;font-size:1.15rem;font-weight:700;cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.18)}
.pfm-all small{display:block;font-size:.8rem;font-weight:500;opacity:.9}
.pfm-all-ic{font-size:1.5rem;line-height:1}
.pfm-all:focus-visible,.pfm-card:focus-visible,.pfm-b:focus-visible,.pfm-s:focus-visible{outline:3px solid #ffbf47;outline-offset:2px}
.pfm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
@media (min-width:600px){.pfm-grid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:18px}}
.pfm-card{display:block;width:100%;padding:0;border:0;border-radius:14px;overflow:hidden;background:#222;cursor:pointer;text-align:left;font:inherit;color:#fff;box-shadow:0 2px 10px rgba(0,0,0,.18);-webkit-transition:transform .15s;transition:transform .15s}
.pfm-card:hover{-webkit-transform:translateY(-2px);transform:translateY(-2px)}
.pfm-th{position:relative;display:block;width:100%;padding-top:62%;height:0;background-size:cover;background-position:center;background-color:#2b2b40}
.pfm-audio .pfm-th{padding-top:70%}
.pfm-title{position:absolute;top:0;left:0;right:0;padding:10px 12px 26px;font-size:1rem;font-weight:700;line-height:1.3;color:#fff;background:-webkit-linear-gradient(top,rgba(0,0,0,.82),rgba(0,0,0,0));background:linear-gradient(180deg,rgba(0,0,0,.82),rgba(0,0,0,0));text-shadow:0 1px 3px rgba(0,0,0,.7);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;word-break:break-word}
.pfm-play{position:absolute;left:50%;top:58%;width:54px;height:54px;margin:-27px 0 0 -27px;border-radius:50%;background:rgba(0,0,0,.55);border:2px solid rgba(255,255,255,.9);color:#fff;font-size:22px;line-height:50px;text-align:center}
.pfm-meta{position:absolute;left:8px;right:8px;bottom:8px;display:-webkit-box;display:flex;gap:6px;-webkit-box-align:center;align-items:center}
.pfm-meta span{background:rgba(0,0,0,.65);color:#fff;border-radius:8px;padding:2px 8px;font-size:.8rem;font-weight:600}
.pfm-len{margin-left:auto}
.pfm-seen{background:#1e8449!important}
.pfm-gen-ic{position:absolute;left:50%;top:56%;font-size:46px;line-height:1;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);opacity:.35}
.pfm-gen .pfm-play{opacity:.95}
.pfm-empty{padding:28px 16px;text-align:center;font-size:1.1rem;border-radius:14px;background:rgba(127,127,127,.12)}
.pfm-skel{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
.pfm-skel i{display:block;padding-top:62%;border-radius:14px;background:#ddd;background:-webkit-linear-gradient(left,#e4e4e4 0,#f2f2f2 40%,#e4e4e4 80%);background:linear-gradient(90deg,#e4e4e4 0,#f2f2f2 40%,#e4e4e4 80%);background-size:300% 100%;-webkit-animation:pfmskel 1.3s linear infinite;animation:pfmskel 1.3s linear infinite}
@-webkit-keyframes pfmskel{0%{background-position:100% 0}100%{background-position:0 0}}
@keyframes pfmskel{0%{background-position:100% 0}100%{background-position:0 0}}
@media (prefers-reduced-motion:reduce){.pfm-skel i{-webkit-animation:none;animation:none}}

/* the player */
html.pfm-open,html.pfm-open body{overflow:hidden}
.pfm-player{position:fixed;top:0;left:0;right:0;bottom:0;z-index:2147483000;display:-webkit-box;display:flex;-webkit-box-orient:vertical;flex-direction:column;background:#000;color:#fff;font-family:inherit;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
.pfm-head{display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center;gap:10px;padding:8px 10px;padding-top:calc(8px + env(safe-area-inset-top,0px));background:rgba(0,0,0,.6);z-index:2}
.pfm-ht{-webkit-box-flex:1;flex:1;min-width:0}
.pfm-name{display:block;font-size:1.05rem;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pfm-pos{display:inline-block;margin-top:2px;padding:1px 10px;border-radius:999px;background:#c0392b;background:var(--pfm-accent,#c0392b);font-weight:700;font-size:.9rem}
.pfm-stage{position:relative;-webkit-box-flex:1;flex:1;min-height:0;display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center;overflow:hidden}
.pfm-art{position:absolute;top:0;left:0;right:0;bottom:0;background-size:cover;background-position:center;opacity:.55}
.pfm-video .pfm-art{display:none}
.pfm-stage video{position:relative;width:100%;height:100%;max-height:100%;background:#000;-o-object-fit:contain;object-fit:contain}
.pfm-stage audio{display:none}
.pfm-audio .pfm-art{opacity:1;top:8%;bottom:8%;left:50%;right:auto;width:70vw;max-width:52vh;-webkit-transform:translateX(-50%);transform:translateX(-50%);border-radius:18px;box-shadow:0 10px 30px rgba(0,0,0,.5)}
.pfm-audio .pfm-gen-ic{opacity:.5;font-size:80px}
.pfm-bigplay{position:absolute;left:50%;top:50%;width:92px;height:92px;margin:-46px 0 0 -46px;border-radius:50%;border:3px solid #fff;background:rgba(0,0,0,.55);color:#fff;font-size:40px;cursor:pointer;z-index:2}
.pfm-bigplay[hidden],.pfm-msg[hidden],.pfm-spin[hidden],.pfm-toast[hidden],.pfm-ccb[hidden]{display:none}
.pfm-spin{position:absolute;left:50%;top:50%;width:54px;height:54px;margin:-27px 0 0 -27px;border:5px solid rgba(255,255,255,.25);border-top-color:#fff;border-radius:50%;-webkit-animation:pfmspin 1s linear infinite;animation:pfmspin 1s linear infinite;z-index:3}
@-webkit-keyframes pfmspin{to{-webkit-transform:rotate(360deg)}}
@keyframes pfmspin{to{transform:rotate(360deg)}}
.pfm-msg{position:absolute;left:16px;right:16px;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);z-index:4;max-width:520px;margin:0 auto;padding:18px;border-radius:14px;background:rgba(20,20,20,.94);text-align:center;font-size:1.05rem;line-height:1.5}
.pfm-mb{min-height:48px;padding:8px 20px;margin:4px;border:0;border-radius:999px;background:#fff;color:#111;font:inherit;font-weight:700;cursor:pointer}
.pfm-ctl{padding:6px 8px;padding-bottom:calc(8px + env(safe-area-inset-bottom,0px));background:rgba(0,0,0,.75);z-index:2;-webkit-transition:opacity .3s;transition:opacity .3s}
.pfm-idle .pfm-ctl,.pfm-idle .pfm-head{opacity:0}
.pfm-idle{cursor:none}
.pfm-seek{display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center;gap:8px;font-size:.85rem;font-variant-numeric:tabular-nums}
.pfm-seek input{-webkit-box-flex:1;flex:1;min-width:0;height:28px;accent-color:#e74c3c}
.pfm-row{display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center;flex-wrap:wrap;gap:6px;margin-top:4px}
.pfm-b{display:-webkit-inline-box;display:inline-flex;-webkit-box-orient:vertical;flex-direction:column;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center;min-width:56px;min-height:56px;padding:4px 8px;border:0;border-radius:14px;background:rgba(255,255,255,.12);color:#fff;font:inherit;font-size:1.5rem;line-height:1;cursor:pointer}
.pfm-b small{font-size:.72rem;margin-top:3px}
.pfm-b:disabled{opacity:.35;cursor:default}
.pfm-pp{min-width:76px;min-height:76px;border-radius:50%;background:#fff;color:#111;font-size:2rem}
.pfm-close{min-width:48px;min-height:48px;font-size:1.3rem}
.pfm-min{min-width:48px;min-height:48px}
.pfm-s{min-width:48px;min-height:44px;padding:4px 12px;border:1px solid rgba(255,255,255,.35);border-radius:999px;background:transparent;color:#fff;font:inherit;font-size:1rem;font-weight:700;cursor:pointer}
.pfm-s.on{background:#fff;color:#111}
.pfm-speed{display:-webkit-inline-box;display:inline-flex;-webkit-box-align:center;align-items:center;gap:4px}
.pfm-sv{min-width:46px;text-align:center}
.pfm-vol{display:-webkit-inline-box;display:inline-flex;-webkit-box-align:center;align-items:center;gap:4px}
.pfm-vol input{width:90px;accent-color:#fff}
.pfm-toast{position:absolute;left:50%;bottom:170px;-webkit-transform:translateX(-50%);transform:translateX(-50%);z-index:5;max-width:90%;padding:10px 16px;border-radius:12px;background:rgba(30,30,30,.95);font-size:1rem}
.pfm-toast button{margin-left:8px;min-height:40px;padding:4px 14px;border:0;border-radius:999px;background:#fff;color:#111;font:inherit;font-weight:700}
.pfm-player video::cue{font-size:1.15em;background:rgba(0,0,0,.75)}
.pfm-player video::-webkit-media-controls{display:none!important}
/* small audio player at the bottom while you read */
.pfm-player.pfm-mini{top:auto;height:auto;box-shadow:0 -4px 18px rgba(0,0,0,.35)}
.pfm-mini .pfm-stage,.pfm-mini .pfm-extra,.pfm-mini .pfm-seek{display:none}
.pfm-mini .pfm-b{min-width:48px;min-height:48px;font-size:1.2rem}
.pfm-mini .pfm-pp{min-width:56px;min-height:56px}
@media (max-width:360px){.pfm-b{min-width:48px;min-height:52px;padding:2px 4px}.pfm-pp{min-width:64px;min-height:64px}.pfm-vol input{width:60px}.pfm-row{gap:4px}}
@media (max-height:480px) and (orientation:landscape){.pfm-extra{display:none}.pfm-player:hover .pfm-extra{display:flex}.pfm-b{min-height:46px}.pfm-pp{min-width:56px;min-height:56px}}
/* whole-page placeholder while a page is loading (slow networks): grey bars where the text will come */
.pfe-skel-on > :not(.pfm-skelpage) { display: none !important; }
.pfm-skelpage { padding: 18px 16px; max-width: 900px; margin: 0 auto; }
.pfm-skelpage > b, .pfm-skelpage > i { display: block; border-radius: 10px; background: #e7e2dc; background: linear-gradient(90deg, #ebe6e0 25%, #f6f2ee 50%, #ebe6e0 75%); background-size: 200% 100%; -webkit-animation: pfmskel 1.3s linear infinite; animation: pfmskel 1.3s linear infinite; }
.pfm-skelpage b { height: 34px; width: 60%; margin: 6px 0 18px; }
.pfm-skelpage > i { height: 16px; margin: 0 0 12px; }
.pfm-skelpage > i:nth-child(3n) { width: 82%; }
.pfm-skelpage .pfm-skel { margin-top: 18px; }
.pfm-skelpage p { margin: 16px 0 0; font-size: 17px; color: #555; text-align: center; }
.pfm-skelpage p button { font: inherit; font-size: 17px; min-height: 48px; padding: 0 20px; margin-top: 10px; border-radius: 12px; border: 2px solid currentColor; background: transparent; color: inherit; cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .pfm-skelpage > b, .pfm-skelpage > i { -webkit-animation: none; animation: none; } }