/* Visual effects: the picture a filter is shown on, and how to step through the pictures. */
.fprev .fscene { left: auto; right: var(--s-3); bottom: var(--s-3); align-items: center; z-index: 3; }
.fscene span { min-width: 92px; padding: 0 4px; color: var(--text); font: var(--t-label); font-size: 12px; text-align: center; font-variant-numeric: tabular-nums; }
.fscene button { display: grid; place-items: center; width: var(--h-sm); padding: 0; }
.fscene svg { width: 15px; height: 15px; }

/* the filtered picture: the original under the filter, a hidden slider across it to compare */
.fprev { position: relative; margin: var(--s-1) 0 10px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-3); background: #000; }
.fprev canvas { display: block; width: 100%; height: auto; aspect-ratio: 2 / 1; }
.fsplit { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.ftag { position: absolute; top: 10px; padding: 3px 9px; border-radius: var(--r-1); background: rgba(10, 10, 15, .65); backdrop-filter: blur(8px); color: var(--text); font: var(--t-label); font-size: 11.5px; pointer-events: none; }
.ftag.a { left: 10px; } .ftag.b { right: 10px; }
/* play / fade out, how far it has gone, its timing */
.ftrans { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 2px 0 10px; }
.ftrans .aplay { width: 36px; height: 36px; }
.fbtn { height: 36px; padding: 0 14px; border: 1px solid var(--line-2); border-radius: var(--r-2); background: var(--surface-1); color: var(--text); font: var(--t-label); transition: background var(--d-2) var(--ease), border-color var(--d-2) var(--ease); }
.fbtn:hover { border-color: var(--line-3); background: var(--surface-2); }
.fbar { flex: 1; min-width: 80px; height: 4px; overflow: hidden; border-radius: 4px; background: var(--line-3); }
.fbar i { display: block; width: 100%; height: 100%; background: var(--accent); }
.ftime { color: var(--dim); font: var(--t-code-small); font-variant-numeric: tabular-nums; }
.fset input:not([type=checkbox]) { width: 110px; }
.fset.fm { margin: var(--s-1) 0 10px; }
.fset.fm span { min-width: 82px; }
.fset.fm input:not([type=checkbox]) { flex: 1; width: auto; }

/* particles: the stage, its glass controls, what it plays, the textures */
.ptfxstage { height: 380px; margin: var(--s-1) 0 14px; }
.pctl { position: absolute; z-index: 2; top: var(--s-3); left: var(--s-3); right: var(--s-3); display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.pctl label { display: flex; align-items: center; gap: var(--s-2); height: 36px; padding: 0 var(--s-3); border-radius: var(--r-2); background: rgba(10, 10, 15, .66); backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px var(--line-2); color: var(--text); font: var(--t-label); font-size: 12px; }
.pctl input { width: 120px; }
.ptfxinfo { position: absolute; right: var(--s-3); bottom: var(--s-3); padding: 6px 10px; border-radius: var(--r-1); background: rgba(10, 10, 15, .66); backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px var(--line-2); color: var(--muted); font: var(--t-code-small); }
.lchips { display: flex; max-height: 300px; padding: 0; overflow-y: auto; }
.lchips small { margin-left: 4px; color: var(--muted); }
.lchips > [hidden] { display: none; }
.chipfind { flex: none; max-width: 320px; height: var(--h-sm); margin-bottom: var(--s-2); padding: 0 var(--s-3); }
.chipfind input { font-size: 13px; }
.chipfind svg { width: 15px; height: 15px; }
.ptex { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: var(--s-2); }
.ptex figure { margin: 0; padding: var(--s-2); border: 1px solid var(--line); border-radius: var(--r-2); background: var(--sunken) repeating-conic-gradient(#ffffff08 0 25%, transparent 0 50%) 0 0 / 14px 14px; }
.ptex img { display: block; width: 100%; aspect-ratio: 1; object-fit: contain; }
.ptex figcaption { margin-top: 6px; color: var(--dim); font: var(--t-code-small); font-size: 10.5px; overflow-wrap: anywhere; }
/* a phone: the stage is too narrow for the info and the view buttons side by side: the info goes just above them */
@media (max-width: 600px) { .ptfxstage { height: 340px; } .pctl input { width: 90px; } .ptfxinfo { left: var(--s-3); right: auto; bottom: calc(var(--s-3) + 48px); max-width: calc(100% - 2 * var(--s-3)); } }

/* camera shakes: the picture shaken */
.shakeview { position: relative; aspect-ratio: 16 / 9; margin: var(--s-3) 0 10px; border-radius: var(--r-3); overflow: hidden; border: 1px solid var(--line); background: var(--sunken); }
.shakeimg { position: absolute; inset: 0; background: center / cover no-repeat; transform: scale(1.08); }