/* Panay player, styled for this page. Markup and behaviour come from player.js (same file as the posting site). */
.pp{--pp-accent:#e8e6e1;--pp-track:#5c5c5c;--pp-hover:#1d1d20;--pp-dim:var(--dim);--tap:44px}
.player{outline:none}
.player:focus-visible{outline:2px solid var(--pp-accent);outline-offset:4px}
.player-stage{position:relative;background:#000;border:1px solid var(--line);border-radius:8px;aspect-ratio:var(--ar,16/9);max-height:80vh;width:100%;overflow:hidden;touch-action:pan-y;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;cursor:pointer}
.grid .player-stage{aspect-ratio:16/9}
.player-stage video{width:100%;height:100%;object-fit:contain;display:block;pointer-events:none;background:#000}
.player.is-scrubbing .player-stage{cursor:ew-resize}
.player-bigplay{position:absolute;left:50%;top:50%;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;background:rgba(0,0,0,.55);color:var(--text);display:grid;place-items:center;pointer-events:none;transition:opacity .15s}
.grid .player-bigplay{width:52px;height:52px;margin:-26px 0 0 -26px}
.player-bigplay svg{width:28px;height:28px;margin-left:3px}
.player.is-playing .player-bigplay,.player.is-scrubbing .player-bigplay{opacity:0}
.player-readout{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);background:rgba(0,0,0,.75);color:var(--text);padding:5px 12px;border-radius:3px;font-size:16px;font-weight:500;font-variant-numeric:tabular-nums;letter-spacing:.02em;opacity:0;pointer-events:none;transition:opacity .15s}
.player-readout.show{opacity:1}
.player-bar{padding-top:4px}
.pb-scrub{position:relative;height:28px;display:flex;align-items:center;cursor:pointer;touch-action:none}
.pb-track{position:relative;width:100%;height:4px;background:var(--pp-track);border-radius:2px}
.pb-fill{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--pp-accent);border-radius:2px}
.pb-thumb{position:absolute;top:50%;left:0;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:var(--pp-accent)}
.player.is-scrubbing .pb-track{height:6px}
@media(hover:hover){.pb-scrub:hover .pb-track{height:6px}}
.pb-marks{position:absolute;inset:0;pointer-events:none}
.pb-row{display:flex;align-items:center;justify-content:space-between;gap:6px}
.pb-group{display:flex;align-items:center;gap:2px;min-width:0}
.pb-btn{width:var(--tap);height:var(--tap);display:grid;place-items:center;flex:none;background:transparent;border:0;border-radius:4px;color:var(--text);cursor:pointer;padding:0;touch-action:manipulation}
.pb-btn svg{width:22px;height:22px}
@media(hover:hover){.pb-btn:hover{background:var(--pp-hover)}}
.pb-play svg{width:26px;height:26px}
.pb-time{margin-left:8px;font-size:13px;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--text)}
.pb-dur{color:var(--pp-dim)}
.pb-hint{margin:4px 0 0;color:var(--pp-dim);font-size:12px;line-height:1.45}
.grid .pb-hint{display:none}
.player:fullscreen,.player:-webkit-full-screen{background:#000;display:flex;flex-direction:column;padding:16px 24px 20px}
.player:fullscreen .player-stage,.player:-webkit-full-screen .player-stage{flex:1;max-height:none;aspect-ratio:auto;border:0;border-radius:0}
.player:fullscreen .pb-hint,.player:-webkit-full-screen .pb-hint{display:none}
/* three across on a computer leaves ~380px per player: slimmer buttons there and on phones */
@media(min-width:981px){.grid .pb-btn{width:38px;height:38px}.grid .pb-time{margin-left:4px;font-size:12px}}
@media(max-width:480px){.pb-btn{width:40px;height:40px}.pb-time{margin-left:4px;font-size:12px}}