/* A live website on the table: a browser window showing the real site,
   moving through its pages as if someone were looking around it. */
.live-win {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  background: #f6eeed;
}
.live-win__bar {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  height: 7.5%;
  min-height: 14px;
  padding: 0 2.2%;
  background: #1d1c19;
  border-bottom: 1px solid rgb(255 255 255 / 0.06);
}
.live-win__dots { display: flex; gap: 0.45em; font-size: clamp(4px, 0.9cqw, 9px); }
.live-win__dots i { width: 1em; height: 1em; border-radius: 50%; background: #3a3833; }
.live-win__url {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.35em 1.1em;
  border-radius: 99px;
  background: #2a2925;
  color: #d8d5cc;
  font: 500 clamp(5px, 1.35cqw, 13px)/1 var(--f-body);
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.live-dot {
  position: relative;
  width: 0.6em;
  height: 0.6em;
  border-radius: 50%;
  background: #3ddc84;
}
.live-dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: inherit;
  animation: live-ping 1.8s cubic-bezier(0, 0, 0.2, 1) infinite;
}
@keyframes live-ping { 75%, 100% { transform: scale(2.6); opacity: 0; } }
.live-win__view { position: relative; flex: 1; overflow: hidden; }
:is(.live-win, .live-phone) [data-live-win] img {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 0;
  transform: translateY(100%);
  transition: none;
}
/* The next page slides up over the last one, as if scrolled to */
:is(.live-win, .live-phone) [data-live-win] img.is-on { z-index: 2; transform: none; transition: transform 1000ms cubic-bezier(0.65, 0, 0.15, 1); }
:is(.live-win, .live-phone) [data-live-win] img.is-off { z-index: 1; transform: translateY(-22%); filter: brightness(0.8); transition: transform 1000ms cubic-bezier(0.65, 0, 0.15, 1), filter 1000ms linear; }
.cw-tile--live .cw-tile__pic { position: relative; container-type: inline-size; }
/* The same site on a phone, standing in front of the window */
.live-phone {
  position: absolute;
  z-index: 3;
  right: 4.5cqw;
  bottom: 4cqw;
  width: 17cqw;
  aspect-ratio: 600 / 1037;
  padding: 0.7cqw;
  border-radius: 3cqw;
  background: #0e0e0d;
  box-shadow: 0 0 0 0.25cqw #3a3833, 0 2cqw 5cqw -1cqw rgb(0 0 0 / 0.65);
}
.live-phone::before {
  content: "";
  position: absolute;
  z-index: 4;
  top: 1.5cqw;
  left: 50%;
  width: 4.6cqw;
  height: 1.3cqw;
  border-radius: 99px;
  background: #0e0e0d;
  transform: translateX(-50%);
}
.live-phone__view {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 2.3cqw;
  background: #f6eeed;
}

/* On the table: a small Live mark beside the name */
.cw-tile__name .live-dot { display: inline-block; margin: 0 0.5em 0.12em 0; vertical-align: middle; font-size: 0.7em; }

/* Up close: who made what */
.cw-hud__credit {
  margin-top: var(--s2);
  padding-left: 12px;
  border-left: 2px solid #3ddc84;
  color: var(--paper-dim);
  font-size: 14px;
  line-height: 1.5;
}
.cw-hud__credit[hidden], .cw-hud .cta[hidden] { display: none; }
.cw-hud__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: var(--s4); }
.cw-hud .cw-hud__ctas .cta { margin-top: 0; }
@media (max-width: 767px) { .cw-hud__ctas { margin-top: var(--s2); gap: 8px; } }