/* Hover preview panel. Used with js/peek.js. Needs theme.css (colors). */
@layer peek {
  #peek { position: fixed; z-index: 9; left: 0; top: 0; width: 412px; pointer-events: none; background: var(--bg); border: 2px solid var(--accent); box-shadow: 6px 6px 0 var(--fg); opacity: 0; transform: scaleY(.04); transition: opacity .15s, transform .22s cubic-bezier(.2, .9, .3, 1); }
  #peek.on { opacity: 1; transform: none; }
  #peek small { display: block; padding: .3em .7em; background: var(--accent); color: var(--bg); font: .7em/1.5 ui-monospace, monospace; letter-spacing: .06em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #peek div { position: relative; width: 408px; height: 255px; overflow: hidden; background: #fff; }
  #peek iframe { width: 1024px; height: 640px; border: 0; transform: scale(.398); transform-origin: 0 0; }
  #peek img { width: 100%; height: 100%; object-fit: cover; object-position: top left; display: block; }
  #peek div::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(transparent 0 2px, #0002 2px 3px); }
  @media (hover: none), (max-width: 42em) { #peek { display: none; } }
}