@font-face{
  font-family:"Prototype Label";
  src:url("https://animabyte.com/assets/fonts/vt323-latin.woff2") format("woff2");
  font-display:swap;
}
.playable .play-label,.demo-video-label{
  padding:5px 12px 6px;
  border:1px solid rgba(255,255,255,.2);
  background:rgba(8,7,6,.82);
  box-shadow:0 3px 14px rgba(0,0,0,.38);
  font-family:"Prototype Label",monospace;
  text-transform:uppercase;
  letter-spacing:.1em;
  font-size:1.6rem;
  line-height:1;
  text-shadow:0 1px 4px #000;
}
.demo-media-cover{display:block;position:relative;container-type:inline-size}
.demo-video-overlay{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:10px;padding:8px;
  pointer-events:none;color:#fff;
}
.demo-video-label{
  max-width:100%;box-sizing:border-box;text-align:center;
  font-size:clamp(14px,7cqw,25.6px);line-height:1.1;
}
.demo-video-alert{color:#ff5544;font-weight:500}
.playable .play-btn{background:transparent}
.playable .play-btn:hover,
.playable .play-btn:focus-visible{background:rgba(255,255,255,.12)}
.playable .play-ico,.demo-video-overlay .play-ico{
  position:relative;isolation:isolate;background:#fff;
}
.playable .play-ico::before,.demo-video-overlay .play-ico::before{
  content:"";position:absolute;inset:1px;z-index:-1;
  background:var(--sec,var(--accent));
  clip-path:polygon(7.4px 0,100% 0,100% calc(100% - 7.4px),calc(100% - 7.4px) 100%,0 100%,0 7.4px);
}
.demo-media{
  list-style:none;
  display:grid;
  gap:16px;
  grid-template-columns:1fr;
  margin:2px 0 0;
  padding:0;
}
.demo-media figure{margin:0;position:relative}
.demo-media-open{
  display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in;text-align:inherit;
}
.demo-media-open:hover img{border-color:var(--accent)}
.demo-media-open:hover figcaption{color:var(--accent)}
.demo-media img{
  width:100%;aspect-ratio:4/3;object-fit:cover;display:block;
  border:1px solid var(--line);
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);
  background:#0a0908;
}
.demo-media-placeholder-frame{
  width:100%;aspect-ratio:4/3;
  display:grid;place-content:center;justify-items:center;gap:10px;
  border:1px dashed var(--line);
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);
  background:var(--panel);color:var(--muted);
}
.demo-media-placeholder-icon{font-family:var(--terminal);font-size:1.55rem;color:var(--accent)}
.demo-media-placeholder-label{
  font-family:var(--terminal);font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;
}
.demo-media figcaption{
  display:grid;
  justify-items:center;
  gap:3px;
  margin:8px 2px 0;
  color:var(--muted);
  font-size:.9rem;
  text-align:center;
}
.demo-media-warning{
  display:inline-flex;
  align-items:center;
  gap:5px;
  color:var(--ink-2);
  font-size:.79rem;
  font-weight:650;
  line-height:1.3;
}
.demo-media-warning-mark{
  color:var(--accent);
  font-size:1.05rem;
  font-weight:800;
  line-height:1;
}
.demo-media a{display:block}
.demo-media a:hover figcaption{color:var(--accent)}
.demo-media a:hover img{border-color:var(--accent)}
.demo-media-play{
  position:absolute;left:50%;top:calc(50% - 16px);transform:translate(-50%,-50%);
  display:grid;place-items:center;width:58px;height:58px;border-radius:50%;
  border:2px solid #e53a2c;background:rgba(20,6,5,.72);color:#ff6a55;font-size:1.35rem;
  box-shadow:0 0 30px rgba(229,58,44,.42);pointer-events:none;
}
@media (min-width:760px){.demo-media{grid-template-columns:repeat(3,minmax(0,1fr))}}
.lightbox-fallback{
  display:inline-block;margin-top:2px;
  color:var(--muted);font-size:.86rem;text-decoration:underline;
}
.lightbox-fallback:hover{color:#e6dcc6}
.lightbox{
  position:fixed;inset:0;z-index:300;
  display:grid;place-items:center;
  background:rgba(6,5,4,.94);
  padding:clamp(12px,4vw,48px);
}
.lightbox[hidden]{display:none}
.lightbox-frame{margin:0;display:grid;gap:12px;justify-items:center;max-width:100%}
.lightbox-media{display:grid;place-items:center;max-width:100%}
.lightbox-media img,
.lightbox-media video{
  display:block;
  max-width:min(1400px,92vw);
  max-height:78vh;
  width:auto;height:auto;
  border:1px solid var(--line);
  background:#0a0908;
}
.lightbox figcaption{
  color:#e6dcc6;font-size:.95rem;text-align:center;
}
.lightbox-count{color:#97865f;font-variant-numeric:tabular-nums;margin-left:6px}
.lightbox-close,
.lightbox-nav{
  position:absolute;z-index:1;
  display:grid;place-items:center;
  background:rgba(10,7,6,.82);color:#f1e6d2;
  border:1px solid rgba(229,58,44,.6);
  cursor:pointer;line-height:1;
}
.lightbox-close{top:14px;right:14px;width:42px;height:42px;font-size:1.05rem}
.lightbox-nav{top:50%;transform:translateY(-50%);width:52px;height:66px;font-size:2rem}
.lightbox-prev{left:10px}
.lightbox-next{right:10px}
.lightbox-close:hover,
.lightbox-nav:hover{border-color:#ff5544;background:rgba(30,10,8,.92)}
.lightbox-nav[hidden]{display:none}
@media (max-width:600px){
  .lightbox-nav{width:44px;height:56px;font-size:1.6rem}
  .lightbox-media img,.lightbox-media video{max-height:66vh}
}


body.nfv-media-open{overflow:hidden}
.demo-media{margin:24px 0;--muted:#655B49}
.demo-media-open{font:inherit;color:inherit}
.demo-media-warning{font-size:14px}
.demo-media-warning-mark{color:#B63424}
.lightbox [hidden]{display:none!important}
.demo-media-open:focus-visible{outline:3px solid var(--accent);outline-offset:4px}