/* The showcase slide: one part of one page, cropped, explained, with the article's title, its link and a QR of the
   link. Drawn by showcase.js from the slide's own JSON; see showcase.md. Canvas pixels, like every slide. Apache-2.0. */
.sc-frame{position:absolute;left:60px;top:118px;width:800px;height:540px;border-radius:14px;overflow:hidden;background:var(--panel);border:2px solid var(--line)}
.sc-img{position:absolute;left:0;top:0;transform-origin:0 0;will-change:transform}
.sc-img img{display:block;user-select:none;-webkit-user-drag:none}
.sc-miss{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:40px;text-align:center;color:var(--dim);font-size:22px}
.sc-box{position:absolute;border:calc(4px * var(--inv, 1)) solid var(--accent);border-radius:calc(10px * var(--inv, 1));box-shadow:0 0 0 calc(9999px * var(--inv, 1)) rgba(0,0,0,0)}
.sc-box.dim{box-shadow:0 0 0 calc(9999px * var(--inv, 1)) rgba(0,0,0,.45)}
.sc-box b{position:absolute;left:calc(-18px * var(--inv, 1));top:calc(-18px * var(--inv, 1));width:calc(36px * var(--inv, 1));height:calc(36px * var(--inv, 1));border-radius:50%;background:var(--accent);color:var(--bg);font:800 calc(20px * var(--inv, 1))/calc(36px * var(--inv, 1)) system-ui;text-align:center}
.sc-side{position:absolute;left:890px;top:118px;width:330px;height:540px;display:flex;flex-direction:column}
.sc-text{font-size:21px;line-height:1.4;color:var(--text);margin:0 0 14px}
.sc-call{list-style:none;margin:0;padding:0;flex:1;overflow:hidden}
.sc-call li{position:relative;padding:0 0 12px 40px;font-size:19px;line-height:1.35;color:var(--text)}
.sc-call li b{position:absolute;left:0;top:0;width:28px;height:28px;border-radius:50%;background:var(--accent);color:var(--bg);font:800 16px/28px system-ui;text-align:center}
.sc-src{display:flex;gap:14px;align-items:flex-end;border-top:2px solid var(--line);padding-top:14px}
.sc-qr{flex:none;width:132px;height:132px;background:#fff;border-radius:10px;padding:8px}
.sc-qr svg{display:block;width:100%;height:100%}
.sc-ref{min-width:0;font-size:16px;line-height:1.3;color:var(--dim)}
.sc-ref b{display:block;color:var(--head);font-size:18px;margin-bottom:6px}
.sc-ref a{color:var(--accent);text-decoration:none;word-break:break-all}
.sc-open{display:block;margin:0 0 14px;padding:16px 18px;border-radius:12px;background:var(--accent);color:var(--bg);font:800 22px/1.2 system-ui;text-align:center;text-decoration:none}