/* demo61: skim-by-pointer issues and credits search. Background: light through a fence, turning with the pointer. */
.pa2-top { padding-top:clamp(36px,6vw,84px); padding-bottom:clamp(30px,5vw,60px); }
#read,#credits { scroll-margin-top:90px; }
.pa2-h { margin:0 0 4px; }
.pa2-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
.pa2-iss { cursor:ew-resize; touch-action:pan-y; user-select:none; border-radius:var(--radius); transition:opacity .3s,filter .3s; }
.pa2-iss.dim { opacity:.25; filter:grayscale(1); }
.pa2-iss.hit .pa2-pic { box-shadow:0 0 0 2px var(--yellow); }
.pa2-pic { position:relative; aspect-ratio:4/5; border-radius:var(--radius); overflow:hidden; background:var(--surface-2); }
.pa2-pic img { width:100%; height:100%; object-fit:cover; pointer-events:none; }
.pa2-ticks { position:absolute; left:8px; right:8px; bottom:8px; display:flex; gap:4px; }
.pa2-ticks i { flex:1; height:3px; border-radius:2px; background:rgb(255 255 255 / .4); }
.pa2-ticks i.on { background:var(--yellow); }
.pa2-iss p { margin:8px 0 0; } .pa2-iss strong { font:600 15px var(--font-head); color:#fff; }
.pa2-find { display:grid; grid-template-columns:minmax(0,4fr) minmax(0,5fr); gap:clamp(14px,3vw,36px); }
.pa2-res { list-style:none; margin:0; padding:0; display:grid; gap:2px; align-content:start; max-height:210px; overflow:auto; }
.pa2-res li { display:flex; justify-content:space-between; gap:12px; padding:7px 0; border-bottom:1px solid var(--line); font-size:14px; color:#e6e6e6; }
.pa2-res span { color:#bdbdbd; text-align:right; }
@media (max-width:900px){ .pa2-grid { grid-template-columns:1fr 1fr; } .pa2-find { grid-template-columns:1fr; } }