/* Shared research visualizations used by Home and Studio. */
.research-demo {
  --research-demo-accent: 114, 164, 255;
  position: relative;
  isolation: isolate;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255,255,255,.025), transparent 38%),
    linear-gradient(132deg, #151618, #101113 72%);
}

.research-demo--hive { --research-demo-accent: 159, 89, 104; }
.research-demo--prm { --research-demo-accent: 71, 113, 90; }
.research-demo--safe-delta { --research-demo-accent: 69, 107, 131; }
.research-demo--sico { --research-demo-accent: 226, 179, 97; }

.research-demo::before {
  position: absolute;
  z-index: 0;
  inset: 0;
  content: "";
  background:
    linear-gradient(104deg, transparent 2%, rgba(var(--research-demo-accent),.055) 54%, transparent 96%),
    linear-gradient(180deg, rgba(255,255,255,.022), transparent 42%);
  opacity: .52;
  pointer-events: none;
}

.research-demo-canvas {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  cursor: default;
}

.research-demo.is-scrubbing .research-demo-canvas { cursor: ew-resize; }

.research-demo-replay {
  position: absolute;
  z-index: 5;
  top: 10px;
  right: 10px;
  display: inline-flex;
  align-items: center;
  gap: .38rem;
  min-height: 29px;
  padding: .35rem .58rem;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  color: rgba(244,241,235,.78);
  background: rgba(18,19,21,.66);
  box-shadow: 0 8px 24px rgba(0,0,0,.16);
  font: 650 .64rem/1 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: .02em;
  opacity: .62;
  cursor: pointer;
  transition: border-color .22s ease, color .22s ease, opacity .22s ease, transform .22s ease;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.research-demo-replay svg {
  width: 12px;
  height: 12px;
  fill: currentColor;
}

.research-demo:hover .research-demo-replay,
.research-demo-replay:focus-visible {
  border-color: rgba(var(--research-demo-accent),.45);
  color: #f4f1eb;
  opacity: 1;
}

.research-demo-replay:hover { transform: translateY(-1px); }

.research-demo-replay:focus-visible {
  outline: 2px solid rgba(var(--research-demo-accent),.62);
  outline-offset: 2px;
}

.research-demo.is-playing .research-demo-replay { opacity: .36; }

@media (max-width: 460px) {
  .research-demo-replay {
    width: 31px;
    min-height: 31px;
    justify-content: center;
    padding: 0;
  }

  .research-demo-replay span { display: none; }
}

/* PaW keeps the site's warm paper palette and uses color only for supervision type. */
.research-demo.research-demo--paw {
  background-color: #f2efe7;
  background-image: none;
}

.research-demo--paw::before {
  background: linear-gradient(180deg, rgba(255,255,255,.36), rgba(255,255,255,0) 42%);
  opacity: 1;
}

.research-demo--paw .research-demo-replay {
  border-color: rgba(54,48,41,.13);
  color: #5e574f;
  background: rgba(255,255,255,.58);
  box-shadow: none;
}

.research-demo--paw:hover .research-demo-replay,
.research-demo--paw .research-demo-replay:focus-visible {
  border-color: rgba(189,101,72,.34);
  color: #302c27;
}

/* HIVE uses a cool neutral field and one restrained accent for the moving edge. */
.research-demo.research-demo--hive {
  background-color: #e9edef;
  background-image: none;
}

.research-demo--hive::before {
  background: linear-gradient(180deg, rgba(255,255,255,.42), rgba(255,255,255,0) 46%);
  opacity: 1;
}

.research-demo--hive .research-demo-replay {
  border-color: rgba(39,49,57,.14);
  color: #66727a;
  background: rgba(255,255,255,.64);
  box-shadow: none;
}

.research-demo--hive:hover .research-demo-replay,
.research-demo--hive .research-demo-replay:focus-visible {
  border-color: rgba(159,89,104,.40);
  color: #273139;
}

/* PRM keeps shared-reasoning steps left and gives paired curves a tall right plot. */
.research-demo.research-demo--prm {
  background-color: #e8ece7;
  background-image: none;
}

.research-demo--prm::before {
  background: linear-gradient(180deg, rgba(255,255,255,.40), rgba(255,255,255,0) 48%);
  opacity: 1;
}

.research-demo--prm .research-demo-replay {
  border-color: rgba(41,52,46,.14);
  color: #65736b;
  background: rgba(255,255,255,.62);
  box-shadow: none;
}

.research-demo--prm:hover .research-demo-replay,
.research-demo--prm .research-demo-replay:focus-visible {
  border-color: rgba(71,113,90,.42);
  color: #29342e;
}

/* Safe Delta uses utility fill and a safety-cost edge on a cool neutral field. */
.research-demo.research-demo--safe-delta {
  background-color: #e9edef;
  background-image: none;
}

.research-demo--safe-delta::before {
  background: linear-gradient(180deg, rgba(255,255,255,.42), rgba(255,255,255,0) 48%);
  opacity: 1;
}

.research-demo--safe-delta .research-demo-replay {
  border-color: rgba(41,52,60,.14);
  color: #65727b;
  background: rgba(255,255,255,.64);
  box-shadow: none;
}

.research-demo--safe-delta:hover .research-demo-replay,
.research-demo--safe-delta .research-demo-replay:focus-visible {
  border-color: rgba(69,107,131,.42);
  color: #29343c;
}